How to prevent the ActionBar Menu from collapsing on selection?

Question

Here is my menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">

<item
   android:id="@+id/filter"
    android:icon="@drawable/filter"
    app:showAsAction="always"
    android:title="Filter">

    <menu>
        <item
            android:id="@+id/action_dropdown1"
            android:title="free"
            android:checkable="true"
            app:showAsAction="always"
            android:icon="@drawable/ic_free"/>
        <item
            android:id="@+id/action_dropdown2"
            android:title="paid"
            android:icon="@drawable/ic_paid">

            <menu>
                <group android:checkableBehavior="all">

                <item
                    android:id="@+id/paid_cat1"
                    android:title="0-50"
                    android:checkable="true"
                    android:icon="@drawable/ic_paid"/>
                <item
                    android:checkable="true"
                    android:id="@+id/paid_cat2"
                    android:title="51-100"
                    android:icon="@drawable/ic_paid"/>

                <item
                    android:checkable="true"
                    android:id="@+id/paid_cat3"
                    android:title="101-500"
                    android:icon="@drawable/ic_paid"/>

                <item
                    android:checkable="true"
                    android:id="@+id/paid_cat4"
                    android:title="500-10,000"
                    android:icon="@drawable/ic_paid"/>

                <item
                    android:checkable="true"
                    android:id="@+id/paid_cat5"
                    android:title="show all"
                    android:icon="@drawable/ic_paid"/>

                </group>

            </menu>
            </item>

        <item

            android:id="@+id/action_find"
            android:title="find"
            android:icon="@drawable/ic_search_black_24dp"/>

    </menu>
    </item>

<item
    android:id="@+id/action_search"
    android:icon="@android:drawable/ic_menu_search"
    app:showAsAction="always"
    app:actionViewClass="android.support.v7.widget.SearchView"
    android:title="Search"/>

What i want to achieve is user should be able to select multiple menu items when when they click on checkbox in menu ... but i as soon as click item it disappear

or is there any better alternative to achieve the same i thought of using spinner as well but it behaves the same

Answer 1

You can use popup menu with custom layout anchored to the menu item.
Show the popup menu when "paid" menu item is clicked -

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle item selection
    switch (item.getItemId()) {
        case R.id.action_dropdown2:
            showPopUp();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

public void showPopUp() {
    View mPopUpView = LayoutInflater.from(this).inflate(R.layout.checkable_items, null);
     PopupWindow mPopupWindow = new PopupWindow(
            mPopUpView,
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    mPopupWindow.setOutsideTouchable(true);
    mPopupWindow.setFocusable(true);
    mPopupWindow.setBackgroundDrawable(new ColorDrawable());
    // Set content width and height
    mPopupWindow.setHeight(convertDpToPx(140));
    mPopupWindow.setWidth(convertDpToPx(120));
    mPopupWindow.showAsDropDown(this.findViewById(R.id.filter), convertDpToPx(-20), convertDpToPx(-40));
}

int convertDpToPx(int dp){
    return   (int) (dp * Resources.getSystem().getDisplayMetrics().density);
}

This is the custom layout checkable_items.xml -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="0-50" />

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="51-100" />

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="101-500" />

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="500-10,000" />

</LinearLayout>

Update the menu file to -

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">

<item
    android:id="@+id/filter"
    android:icon="@android:drawable/ic_dialog_email"
    android:title="Filter"
    app:showAsAction="always">

    <menu>
        <item
            android:id="@+id/action_dropdown1"
            android:checkable="true"
            android:icon="@android:drawable/btn_dialog"
            android:title="free"
            app:showAsAction="always" />
        <item
            android:id="@+id/action_dropdown2"
            android:icon="@android:drawable/btn_minus"
            android:title="paid">

        </item>

        <item

            android:id="@+id/action_find"
            android:icon="@android:drawable/ic_dialog_email"
            android:title="find" />

    </menu>
</item>

<item
    android:id="@+id/action_search"
    android:icon="@android:drawable/ic_menu_search"
    android:title="Search"
    app:actionViewClass="android.support.v7.widget.SearchView"
    app:showAsAction="always" />
</menu>

You can use mPopupWindow.dismiss() to close the popup anytime.Hope this helps!