What's the name of the little widget with three dots inside a cardview in android?

Question

What's the little widget with three dots? How can I add it to my app?

Solution 1

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

Solution 2

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"/>

Solution 3

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>

Solution 4

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zm0,2c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zm0,6c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
</vector>

Solution 5

As I've found on the web, it is called "overflow icon" or action overflow".

This code maybe could help you. (The code is from there)

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_red"
        android:orderInCategory="1"
        android:showAsAction="never"
        android:title="@string/red_string"/>
    <item
        android:id="@+id/menu_green"
        android:orderInCategory="2"
        android:showAsAction="never"
        android:title="@string/green_string"/>
</menu>

View more solutions

Comments

[kandroidj]

added a link to the correct one using that tool above @Cristian

[kandroidj]

@Laurent see under UPDATE

[romaneso]

easiest answer, most helpful one. should be #1.