Background image and image view in Navigation Drawer

Question

I am trying out a navigation drawer design similar to play store App: I have got the menu part things working fine but I would like to add the profile image and user id in the top of menu like image below. I am not sure how to achieve this part:

I have tried the following code and added it in xml which has the list of items to be shown.

<LinearLayout
    android:id="@+id/LinearLayoutFrom1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="left|center"
    android:background="@drawable/bg"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/clear1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profilepic" />

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="UserID"
        android:textColor="#FFFFFF"
        android:textSize="15sp"
        android:textStyle="bold" />
</LinearLayout>

but this just appends the background and text for each listitem.

How do I achieve the above design?

UPDATE 1:

I tried the following in the XML:

<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
    android:id="@+id/framelayoutid"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />


<LinearLayout
    android:id="@+id/LinearLayoutFrom1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/LinearLayoutFrom2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight=".20" >

        <ImageView
            android:id="@+id/clear1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/profilepic" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayoutFrom3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight=".80"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textViewName"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="UserID"
            android:textColor="#FFFFFF"
            android:textSize="15sp"
            android:textStyle="bold" />
    </LinearLayout>

    <ListView
        android:id="@+id/left_panel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/list"
        android:choiceMode="singleChoice"
        android:divider="@color/divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/selector" />
</LinearLayout>

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

I get the following error:

http://txs.io/4bpb

Update 2:

I managed to add header to list by doing the following:

    mDrawerList = (ListView) findViewById(R.id.left_menu);

    View header = getLayoutInflater().inflate(R.layout.headerlayoutfordrawer, null); 
    mDrawerList.addHeaderView(header);

    navDrawerItems = new ArrayList<NavDrawerItem>();

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1),true, "2"));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1)));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1)));
    navMenuIcons.recycle();

    mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

    adapter = new NavDrawerListAdapter(getApplicationContext(), navDrawerItems);
    mDrawerList.setAdapter(adapter);

But the problem is that the header is also being counted in arraylist in DrawerItems and hence I get array outofboundexception

  07-22 11:18:01.433: E/AndroidRuntime(14229): FATAL EXCEPTION: main
  07-22 11:18:01.433: E/AndroidRuntime(14229): java.lang.ArrayIndexOutOfBoundsException: length=6; index=7
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.jlk.trip.maps.displayView(maps.java:192)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.jlk.trip.maps.access$0(maps.java:159)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.jlk.trip.maps.maps$SlideMenuClickListener.onItemClick(maps.java:122)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.widget.AdapterView.performItemClick(AdapterView.java:298)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.widget.AbsListView.performItemClick(AbsListView.java:1100)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.widget.AbsListView$PerformClick.run(AbsListView.java:2788)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.widget.AbsListView$1.run(AbsListView.java:3463)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.os.Handler.handleCallback(Handler.java:730)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.os.Handler.dispatchMessage(Handler.java:92)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.os.Looper.loop(Looper.java:137)  
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.app.ActivityThread.main(ActivityThread.java:5103)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at java.lang.reflect.Method.invokeNative(Native Method)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at java.lang.reflect.Method.invoke(Method.java:525)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:737)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at dalvik.system.NativeStart.main(Native Method)

Obala

for achieving this you need to use a layout that wraps the navigation drawyer listview and has the imageview that you want in it. – Cupo

Thanks for the quick reply.. Any example would be good? – Obala

refer to developer.android.com/training/implementing-navigation/… – Glary

@Pr38y: I have implemented the navigation menu things are working fine there but I just I need the header part which has the background image with one image view (profile pic) and text view for email address.. – Obala

i too got this error. Please reply @Obala en.textsave.org/4bpb – Assumption

@SagarDevanga : can you post your code? – Obala

Answer 1

UPDATE:

Take a look at this project for everything related with the drawer. https://github.com/Sottti/MaterialDesignNavDrawer

OLD ANSWER:

Take a look at my xml here: https://github.com/Sottti/BuyIt/blob/master/BuyIt/src/main/res/layout/activity_main.xml

Pay attention at where it says "YOUR DRAWER".

The Navigation Drawer is the second child in android.support.v4.widget.DrawerLayout.

The second child is a LinearLayout containing a RelativeLayout and a ListView.

The ListView is the Drawer list view it self.

The Relative layout is the place where the image header is located.

Try that, it's working for me.

Luck!!

Railey

Thanks for the quick reply. I tried the what ever you recommended but got error. Please check my question for update. Can you let me know what could be wrong here? – Obala

Start with something simpler. Just an image and a listview. When I had time I will help you with more examples. For now just try to make it simpler. – Railey

I managed to do something like adding a header to list, but I have a strange issue.. Please check my update in my question above. Thanks! – Obala

This is a really great answer, wonder why it hasnt been upvoted as deserved ! – Cahan

I solved the error using this answer #17940298 – Assumption

@Railey Hey, the link is no longer working. Do you think you could reupload the xml please? :3 – Na

Answer 2

You can find how Google handle this issue in navdrawer_content layout of Google IO's Android app.
Short answer: they don't use ListView.

Lenny

Answer 3

Use the addHeaderView() method provided by ListView. Note: this will cause the ArrayAdapter to interpret the image as the first item in your list. To deal with this, use the option in addHeaderView to disable clicking, and move all the elements in your array up by 1 (essentially creating a dummy value at the 0th element). When your navigation drawer is first called, you may need to add a snippet like the following:

if (savedInstanceState == null) {
            selectItem(1);
        }

Melodics