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:

enter image description here

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)

for achieving this you need to use a layout that wraps the navigation drawyer listview and has the imageview that you want in it. — Illegal Argument, Jul 21 '14 at 11:09
refer to http://developer.android.com/training/implementing-navigation/nav-drawer.html — Pr38y, Jul 21 '14 at 11:16
@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.. — TheDevMan, Jul 21 '14 at 18:11
i too got this error. Please reply @TheDevMan http://en.textsave.org/4bpb — Sagar Devanga, Dec 11 '14 at 07:09

Sotti · Accepted Answer · 2015-12-07T20:09:40.387

6

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!!

edited Dec 07 '15 at 20:09

answered Jul 21 '14 at 11:40

Sotti

14,089
2
50
43

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? – TheDevMan Jul 21 '14 at 18:43
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. – Sotti Jul 21 '14 at 19:38
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! – TheDevMan Jul 22 '14 at 06:01
This is a really great answer, wonder why it hasnt been upvoted as deserved ! – uLYsseus Oct 24 '14 at 00:07
I solved the error using this answer http://stackoverflow.com/questions/17939798/classcastexception-android-widget-framelayoutlayoutparams-to-android-support-v4 – Sagar Devanga Dec 16 '14 at 10:16
@Sotti Hey, the link is no longer working. Do you think you could reupload the xml please? :3 – Bensas Dec 07 '15 at 18:38

score 0 · Answer 2 · answered Oct 10 '14 at 20:00

0

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.

answered Oct 10 '14 at 20:00

Alex Lipov

13,503
5
64
87

score 0 · Answer 3 · answered Oct 28 '14 at 08:25

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);
        }

Background image and image view in Navigation Drawer

3 Answers3

Linked