How to create a dropdown within a Navigation Drawer (in Android)?

Question

I would like to be a able to create a Navigation Drawer that has some expandable, selectable items, and some non-expandable items. The consensus on StackOverflow for questions similar to mine point to solutions by ExpandableListView (which may not even apply to my idea). For the most part, what people are asking for is a way to separate items in the Nav Drawer like the GMail app does with labels, not what I'm trying to do...

...which is essentially outlined HERE

and SIMILARLY HERE (though all, not some are dropdowns) . And not like THIS ANSWER.

Solution 1

Use an ExpandableListView within a DrawerLayout, like so:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout2"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_commentary_behind_nav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|top"
        android:text="Frame text" />
</FrameLayout>
<!-- The navigation drawer -->
    <ExpandableListView
        android:id="@+id/left_drawer2"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        android:choiceMode="multipleChoice"
        android:dividerHeight="0dp"
        />

</android.support.v4.widget.DrawerLayout>

Then initialize in code like so:

    private DrawerLayout drawer;
    private ExpandableListView drawerList;
    private CheckBox checkBox;
    private ActionBarDrawerToggle actionBarDrawerToggle;


@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.drawer_layout);
        drawer = (DrawerLayout) findViewById(R.id.drawer_layout2);
        drawerList = (ExpandableListView) findViewById(R.id.left_drawer2);
        drawerList.setAdapter(new NewAdapter(this, groupItem, childItem));
    }

Solution 2

You should have a class having all implemented methods of ExpandableListAdapter as well as ChildItemsInfo class and a GroupItemsInfo class, with MainActivity having the click listeners to group items and their children

...now to be more specific...

You can place this within getGroupView() that's inside MyExpandableListAdapter class

    View ind = convertView.findViewById(R.id.group_indicator);
    View ind2 = convertView.findViewById(R.id.group_indicator2);
    if (ind != null)
    {
        ImageView indicator = (ImageView) ind;
        if (getChildrenCount(groupPosition) == 0)
        {
            indicator.setVisibility(View.INVISIBLE);
        }
        else
        {
            indicator.setVisibility(View.VISIBLE);
            int stateSetIndex = (isExpanded ? 1 : 0);

            /*toggles down button to change upwards when list has expanded*/
            if(stateSetIndex == 1){
                ind.setVisibility(View.INVISIBLE);
                ind2.setVisibility(View.VISIBLE);
                Drawable drawable = indicator.getDrawable();
                drawable.setState(GROUP_STATE_SETS[stateSetIndex]);
            }
            else if(stateSetIndex == 0){
                ind.setVisibility(View.VISIBLE);
                ind2.setVisibility(View.INVISIBLE);
                Drawable drawable = indicator.getDrawable();
                drawable.setState(GROUP_STATE_SETS[stateSetIndex]);
            }
        }
    }

...and as for the layout view, this is how my group_items.xml appears to be

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/group_heading"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="20dp"
    android:paddingTop="16dp"
    android:paddingBottom="16dp"
    android:textSize="15sp"
    android:textStyle="bold"/>

<ImageView
    android:id="@+id/group_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/arrow_down_float"
    android:layout_alignParentRight="true"
    android:paddingRight="20dp"
    android:paddingTop="20dp"/>

<ImageView
    android:id="@+id/group_indicator2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/arrow_up_float"
    android:layout_alignParentRight="true"
    android:visibility="gone"
    android:paddingRight="20dp"
    android:paddingTop="20dp"/>

Not clear enough?, comment whenever

Comments

[Ojonugwa Jude Ochalifu]

What are groupItem, and childItem. What is NewAdapter and how does it handle groupItem and childItem to make some items expandable? Your answer is incomplete.

[AlleyOOP]

groupItem is an array containing Strings for each of the Group options. "TopView 2" in above graphic. childItem is a matrix/hashmap containing a list of items to be dropped down after selecting each of the group items. NewAdapter assigns the values of groupItem and childItem datasets to views when it inflates each item's holder.