Showing Custom Layout on Overflow Drop Down Menu Item? Android

arberb picture arberb · Feb 18, 2014 · Viewed 9.1k times · Source

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

Shahzeb picture Shahzeb · May 5, 2014

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:

enter image description here

And here is the reference to my question:

link

I hope it might help you.