how to make custom Navigation drawer (List view with image view)

Question

how to make custom navigation drawer. which have both

1-image view

2-list view

I used this link for reference Creating a Navigation Drawer

But this tutorial is only for the list view

Please tell me how to add image view with list view in the navigation drawer.

If there any tutorial link,then it will be better

Answer 1

Use this layout xml this worked perfect for me ;

<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="match_parent" >

    <!-- Framelayout to display Fragments -->

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

    <RelativeLayout
        android:id="@+id/slider"
        android:layout_width="260dp"

        android:layout_height="match_parent"
        android:layout_gravity="start" >

        <LinearLayout
            android:id="@+id/header_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="#AA000000"
            android:orientation="horizontal"
            android:padding="5dp" >

            <com.wholesaleraja.model.RoundImage
                android:id="@+id/profile_icon"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_gravity="center_vertical"
                android:layout_margin="1dp"
                android:padding="3dp"
                android:scaleType="fitCenter"
                android:src="@drawable/default_image_male" />

            <LinearLayout
                android:id="@+id/profile_name_layout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:orientation="vertical"
                 android:layout_marginLeft="5dp"
                android:padding="5dp" >

                <TextView
                    android:id="@+id/profile_name"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textColor="#ffffff"
                    android:textSize="18sp" />

                <TextView
                    android:id="@+id/profile_email"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#ffffff"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

        <View
            android:id="@+id/header_divider"
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:layout_below="@+id/header_view"
            android:background="@color/list_divider" />

        <ListView
            android:id="@+id/list_slidermenu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/header_divider"
            android:background="@color/white"
            android:choiceMode="singleChoice"
            android:divider="@color/list_divider"
            android:dividerHeight="1dp"
            android:overScrollMode="never" />
    </RelativeLayout>

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

Answer 2

Here is an example of drawer layout with user info on top of ListView. Hope this helps.

<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="match_parent"
android:background="@color/black">


<LinearLayout
    android:id="@+id/drawer_linear"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:orientation="vertical" >

    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/blue"
        android:padding="15dp"
        >

        <ImageView
            android:id="@+id/avatar"
            android:contentDescription="@string/drawer_icon"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/ic_launcher" />

        <TextView 
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingTop="6dp"                
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_toRightOf="@id/avatar"
            android:background="@color/blue"
            android:textColor="@color/white"
            />

        <TextView 
            android:id="@+id/role"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingTop="5dp"
            android:textSize="12sp"
            android:layout_toRightOf="@id/avatar"
            android:layout_below="@id/name"
            android:background="@color/blue"
            android:textColor="@color/white"

            />

    </RelativeLayout>
    <!-- Listview to display slider menu -->

    <ListView
        android:id="@+id/drawer_list"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        android:choiceMode="singleChoice"
        android:dividerHeight="1dp" />

 </LinearLayout>     

Answer 3

Sample

<!-- The main context view -->

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

<!-- The navigation drawer -->

<ScrollView
    android:id="@+id/leftDrawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#fff" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:paddingBottom="3dp"
            android:src="@drawable/ic_launcher"
            android:text="@string/menu_account"
            android:textColor="@color/nav_headingsColor"
            android:textStyle="bold" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="2dip"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/nav_headingsColor" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imgProfilePic"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="3"
                android:scaleType="fitXY"
                android:src="@drawable/ic_launcher" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/imgProfilePic"
                    android:layout_width="0dp"
                    android:layout_height="70dp"
                    android:layout_weight="3"
                    android:clickable="true"
                    android:contentDescription="@null"
                    android:scaleType="fitXY"
                    android:src="@drawable/ic_launcher" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="7"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="5dp" >

                    <TextView
                        android:id="@+id/lblName"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Christian Bale"
                        android:textColor="@color/nav_textColor"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/lblEmail"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="christianbale@imhot.com"
                        android:textColor="@color/nav_textColor"
                        android:textSize="10sp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="20dp"
            android:paddingBottom="3dp"
            android:src="@drawable/ic_launcher"
            android:text="@string/menu_menu"
            android:textColor="@color/nav_headingsColor"
            android:textStyle="bold" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="2dip"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/nav_headingsColor" />

        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dip"
            android:layout_marginTop="2dip" >

            <RadioButton
                android:id="@+id/radioTopTen"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_topTen" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioWish"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_wish" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioGifts"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_gifts" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioLibrary"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_library" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioWhatsOn"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_whatsOn" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioDownload"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_download" />
        </RadioGroup>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="40dp"
            android:padding="10dp"
            android:src="@drawable/footer_image" />
    </LinearLayout>
</ScrollView>

Answer 4

You need to customize listview according to your requirements. Like you can use custom adapter and make a logic in that according to your requirement. Go through this link

http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

Hope it helps!!