Basit Saeed Basit Saeed - 3 years ago 43
Android Question

How to add ImageView to a NavigationDrawer along with a ListView

add image view to Navigation Drawer

I am using a NavigationDrawer in my Android application that shows items in a ListView. What I want to do, is to add a ImageView element programmatically.
My NavigationDrawer layout (

activity_navigation.xml
) is as follows:

<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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<LinearLayout
android:id="@+id/left_linear"
android:layout_width="@dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:id="@+id/left_drawer"
android:layout_width="@dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="@color/navigation_divider"
android:dividerHeight="1dp" />
</LinearLayout>



I have a ListView item layout (
listview_item_row.xml
), too. It is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/navigation_drawer_list_item_selector"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:padding="10dp" >

<ImageView
android:id="@+id/imageViewIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:paddingRight="10dp" />

<TextView
android:id="@+id/textViewName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/imageViewIcon"
android:paddingRight="10dp"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#ffffff" />

</RelativeLayout>


In my NavigationActivity, I use the following code to dynamically populate ListView items:

mNavigationDrawerItemTitles = getResources().getStringArray(R.array.app_navigation_items);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
mDrawerLinear = (LinearLayout) findViewById(R.id.left_linear);
ObjectDrawerItem[] drawerItem = new ObjectDrawerItem[6];
drawerItem[0] = new ObjectDrawerItem(R.drawable.ic_speedometer, mNavigationDrawerItemTitles[0]);
drawerItem[1] = new ObjectDrawerItem(R.drawable.ic_place, mNavigationDrawerItemTitles[1]);
drawerItem[2] = new ObjectDrawerItem(R.drawable.ic_price, mNavigationDrawerItemTitles[2]);
drawerItem[3] = new ObjectDrawerItem(R.drawable.ic_action_settings, mNavigationDrawerItemTitles[3]);
drawerItem[4] = new ObjectDrawerItem(R.drawable.ic_about, mNavigationDrawerItemTitles[4]);
drawerItem[5] = new ObjectDrawerItem(R.drawable.ic_logout, mNavigationDrawerItemTitles[5]);
DrawerItemCustomAdapter adapter = new DrawerItemCustomAdapter(this, R.layout.listview_item_row, drawerItem);
mDrawerList.setAdapter(adapter);
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());


So, how can I achieve the ImageView along with the name, and picture inside it in my NavigationDrawer?

Answer Source

You can add a View on top of a ListView with ListView.addHeaderView(View). This will make the picture and the name to scroll along with the ListView.

Example with the headerView :

mDrawerList.setAdapter(adapter);
View headerView = LayoutInflater.from(this).inflate(R.layout.listview_item_row);
((ImageView) headerView.findViewById(R.id.imageViewIcon)).setImageBitmap(...);
((TextView) headerView.findViewById(R.id.textviewName)).setText(userName);
mDrawerList.addHeaderView(headerView);

If you don't want the picture and the name to scroll, just add your views just above the ListView in activity_navigation.xml

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download