Showing Custom Layout on Overflow Drop Down Menu Item? Android

Question

I am trying to figure out how to show a custom view for items inside the overflow menu (on right of actionbar) but I can't seem to figure it out. It still shows the title only :S. I want to do something like how twitter has it to show an icon, title, and subtitle in the first item in drop down menu. Can anyone help me out

Item in Menu.xml

<item
    android:id="@+id/action_dropdown"
    android:icon="@drawable/ic_action_overflow"
    android:actionProviderClass="efwefwef.com.actionbar.ABDropDown"
    android:title=""
    android:showAsAction="always">
</item>

actionProvider Class #1

public class ABDropDown extends ActionProvider  {
    private static final String TAG = "MActionProvider";
    private Context context;

    public ABDropDown(Context context) {
        super(context);
        this.context = context;
    }

    @Override
    public View onCreateActionView() {
        return null;
    }

    @Override
    public boolean hasSubMenu() {
        Log.d(TAG, "hasSubMenu");
        return true;
    }


    @Override
    public boolean onPerformDefaultAction() {
        Log.d(TAG, "onPerformDefaultAction");
        return super.onPerformDefaultAction();
    }

    @Override
    public void onPrepareSubMenu(SubMenu subMenu) {
        subMenu.clear();
        subMenu.add("Profile").setActionProvider(new ABDropDownProfile(context));
        subMenu.add(Menu.NONE, Menu.NONE, 2, "Mezz 2");

    }

}

Second ActionProvider class for the item I want to show a custom view

public class ABDropDownProfile extends ActionProvider  {
    private static final String TAG = "MActionProvider";
    private Context context;

    public ABDropDownProfile(Context context) {
        super(context);
        this.context = context;
    }

    @Override
    public View onCreateActionView() {
        View view = View.inflate(context, R.layout.actionbar_viewprofile, null);

        return view;
    }

    @Override
    public boolean hasSubMenu() {
        return false;
    }


    @Override
    public boolean onPerformDefaultAction() {
        Log.d(TAG, "onPerformDefaultAction");
        return super.onPerformDefaultAction();
    }
}

Answer 1

I was just facing the same problem on how to list custom rows in overflow menu. Unfortunately there isn't much on web about customising action bars. If you want to list items with just icon and title in over flow menu, you need to do nesting of items within items. I did it like this:

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

    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_action_overflow"
        android:orderInCategory="100"
        android:showAsAction="always">
        <menu>
            <item
                android:id="@+id/add_source"
                android:icon="@drawable/add_on"
                android:orderInCategory="100"
                android:showAsAction="never"
                android:title="@string/add_source"/>
            <item
                android:id="@+id/channel_setup"
                android:icon="@drawable/channelsetup_on"
                android:orderInCategory="100"
                android:showAsAction="never"
                android:title="@string/channel_setup"/>
        </menu>
    </item>

    <item
        android:id="@+id/time"
        android:orderInCategory="99"
        android:showAsAction="always"
        android:title="@string/time_title"/>
    <item
        android:id="@+id/weather"
        android:icon="@drawable/ic_action_cloud"
        android:orderInCategory="98"
        android:showAsAction="always"
        android:title="@string/weather_title"/>
    <item
        android:id="@+id/search"
        android:actionViewClass="android.widget.SearchView"
        android:icon="@drawable/ic_action_search"
        android:orderInCategory="97"
        android:showAsAction="collapseActionView|always"
        android:title="@string/search_title"/>

</menu>

to achieve this thing:

And here is the reference to my question:

link

I hope it might help you.

Answer 2

If you just want add a drawable (red dot) after text, you can use imageSpan to add drawable after main text like below:

private MenuItem settingsItem;
    ....
    SpannableStringBuilder builder = new SpannableStringBuilder(getString(R.string.settings_menu_name) + " .");
    Drawable drawable = getResources().getDrawable(R.drawable.red_dot);
    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
    builder.setSpan(new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE), builder.length()-1, builder.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    settingsItem.setTitle(builder);