how to create an expandable listView inside navigation drawer?

Question

I need to create a navigation drawer like flipkart or Astro file manager app. How can I replace a listView with an expandable listView?

I need an navigation Drawer like this:

This is my xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">
<include
    layout="@layout/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />


<!-- This DrawerLayout has two children at the root  -->
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- This LinearLayout represents the contents of the screen  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- The main content view where fragments are loaded -->
        <FrameLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


    </LinearLayout>
    <!-- The navigation drawer that comes from the left -->
    <!-- Note that `android:layout_gravity` needs to be set to 'start' -->

    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        app:headerLayout="@layout/nav_header"
        android:choiceMode="singleChoice"
        app:menu="@menu/drawer_view" />

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

Unhopedfor

Please show us what you have done so far. – Gardener

I just created a normal Navigation Drawer, with a listView – Unhopedfor

You an expandable listview instead and your good to go – Rigobertorigor

Answer 1

You can create an ExpandableListView and use it as your NavigationView. An example of xml result:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">

<include
    layout="@layout/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<!-- This DrawerLayout has two children at the root  -->
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!-- This LinearLayout represents the contents of the screen  -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- The main content view where fragments are loaded -->
    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>
<!-- The navigation drawer that comes from the left -->
<!-- Note that `android:layout_gravity` needs to be set to 'start' -->

 <ExpandableListView
            android:id="@+id/lvExp"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout_gravity="start"/>   

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

You can find an example of using an ExpandableListView here

Nephron

expandable listVIew is working but I can't use header view in expandable listView – Unhopedfor

Answer 2

You must make an ExpandableListView in your NavigationDrawer you please follow throw these links and apply How to create drawer navigation like this? and list and expandable list in single drawer hope this will help you

Neela

I need to use a header view too in navigation drawer . – Unhopedfor

Answer 3

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:itemIconTint="@color/colorPrimary"
    app:itemTextAppearance="@style/TextAppearance.AppCompat.Body2">


    <ExpandableListView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/navigationmenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="41dp"
        android:layout_marginTop="90dp"
        android:background="@android:color/white"
        android:choiceMode="singleChoice"
        android:dividerHeight="1dp"
        android:groupIndicator="@null"
        android:listSelector="@color/colorAccent" />

    <Button
        android:id="@+id/session_logout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimary"
        android:text="Logout"
        android:textColor="#fff" />

</android.support.design.widget.NavigationView>

Allergic

Answer 4

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:background="@color/themeColor"
        android:padding="10dp">

        <ImageView
            android:id="@+id/home"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:background="@drawable/menu_icon" />

        <TextView
            android:id="@+id/appname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/home"
            android:gravity="left|center_vertical"
            android:text="Home"
            android:textColor="#FFFFFF"
            android:textSize="20dp" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_gravity="center_vertical|right"
            android:src="@android:drawable/ic_menu_share" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_gravity="center_vertical"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/setting"
            android:visibility="gone" />

    </RelativeLayout>

    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!-- Drawer Content -->

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

        <!-- The navigation menu -->
        <LinearLayout
            android:id="@+id/header"
            android:layout_width="260dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="@color/colorDrawer"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_gravity="top"
                android:paddingLeft="50dp"
                android:paddingRight="50dp"
                android:paddingTop="5dp"
                android:src="@drawable/logo" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/colorDrawerText" />

            <ExpandableListView
                android:id="@+id/lvExp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="10dp"
                android:background="@color/colorDrawer"
                android:choiceMode="singleChoice"
                android:groupIndicator="@android:color/transparent"
                android:listSelector="@color/themeColor"></ExpandableListView>

        </LinearLayout>

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

    <!--android:groupIndicator="@null"-->

This is done going through the androihive.com tutorial - "ExpandableListView example" =============Link for your reference is http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/
Vinod Kumar Gaur

Pringle

please elaborate more rather than just put some codes – Tisza

Hi @Poorya please follow this link androidhive.info/2013/07/android-expandable-list-view-tutorial – Pringle