What's the name of the little widget with three dots inside a cardview in android?
This is not a widget at all. It is an ImageButton
(borderless in style) using the overflow Icon that includes a PopupMenu
For documentation tutorial visits http://developer.android.com/guide/topics/ui/menus.html#PopupMenu
This refers to a nice code snippet from the link above:
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_overflow_holo_dark" android:contentDescription="@string/descr_overflow_button" android:onClick="showPopup" />
Then use to show popup:
public void showPopup(View v) { PopupMenu popup = new PopupMenu(this, v); MenuInflater inflater = popup.getMenuInflater(); inflater.inflate(R.menu.actions, popup.getMenu()); popup.show(); }
3-Dots button is available among Assets in Android Studio:
Right click on res
-> New -> Vector Assets -> Asset Type = Clip Art
-> Click on the button next to Clip Art: label -> Search for more vert
You may also simply use an ImageButton
with the actionOverflowButtonStyle
style attribute.
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" style="?android:attr/actionOverflowButtonStyle"/>
The "original" three dot widget is the android.widget.ActionMenuPresenter.OverflowMenuButton
(ActionMenuPresenter.java). Sadly it is a private class. Here a working shorter version:
public class OverflowMenuButton extends AppCompatImageView{ public OverflowMenuButton(Context context) { this(context, null); } public OverflowMenuButton(Context context, AttributeSet attrs) { this(context, attrs, 0); } public OverflowMenuButton(Context context, AttributeSet attrs, int defStyleAttr) { super(new ContextThemeWrapper(context, R.style.OverflowButtonTheme), attrs, R.attr.actionOverflowButtonStyle); setClickable(true); setFocusable(true); setVisibility(VISIBLE); setEnabled(true); }}
Themes of the ContextThemeWrapper
to get a dark and light version:
<!--White dots theme--><style name="OverflowButtonTheme" parent="@style/Theme.AppCompat"> <item name="actionOverflowButtonStyle">@style/Widget.AppCompat.ActionButton.Overflow</item></style><!--Dark dots theme--><style name="OverflowButtonThemeLight" parent="@style/Theme.AppCompat.Light"> <item name="actionOverflowButtonStyle">@style/Widget.AppCompat.Light.ActionButton.Overflow</item></style>