NavigationDrawer, adapter with an image also

Question

i've got a navigationdrawer with this code for filling:

mDrawerListView.setAdapter(new ArrayAdapter<String>(
            getActionBar().getThemedContext(),
            R.layout.item_menu,
            R.id.item1,
            new String[]{
                    getString(R.string.title_section1),
                    getString(R.string.title_section2),
                    getString(R.string.title_section3),
                    getString(R.string.title_section4),
                    getString(R.string.title_section5),
                    getString(R.string.title_section6),
            }));

i need to add an image for each item, not only a string. i already have my item xml (R.layout.item_menu):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="1"
android:layout_height="wrap_content">
<ImageView
    android:layout_width="0dp"
    android:layout_weight="0.2"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:id="@+id/image1"
    android:layout_centerVertical="true" />
<TextView
    android:id="@+id/item1"
    android:layout_width="0dp"
    android:layout_weight="0.8"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:padding="5dp"
    android:layout_toRightOf="@+id/image1"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall" />
</LinearLayout>

but i don't know how to pass the image. any help? thanks

@DFerra You can find on google. You defenelty get solution because it is available. — Piyush, Mar 31 '15 at 08:25
Yes, @DFerra search google or you can watch this awesome video https://www.youtube.com/watch?v=rs4LW3GxOgE — Ajeet, Mar 31 '15 at 08:31
You can use this link@DFerra http://stackoverflow.com/questions/27082763/custom-adapter-for-navigation-drawer — Alka Jadav, Mar 31 '15 at 08:39

score 2 · Answer 1 · edited Mar 31 '15 at 08:41

You should create Custom Adapter for your image Arraylist like below code,Your Custom Adapter create like this

 public class YourAdapter extends ArrayAdapter<NavDrawerItem>
    {
        private final Context context;
        private final int layoutResourceId;
        private NavDrawerItem data[] = null;
        public NavDrawerAdapter(Context context, int layoutResourceId, NavDrawerItem [] data)
       {
        super(context, layoutResourceId, data);
        this.context = context;
        this.layoutResourceId = layoutResourceId;
        this.data = data;
       }

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        LayoutInflater inflater = ((Activity) context).getLayoutInflater();
        View v = inflater.inflate(layoutResourceId, parent, false);
        ImageView imageView =(ImageView)v.findViewById(R.id.navDrawerImageView);
        TextView textView = (TextView) v.findViewById(R.id.navDrawerTextView);
        NavDrawerItem choice = data[position];
        imageView.setImageResource(choice.icon);
        textView.setText(choice.name);
        return v;
    }
}

For NavDrawerItem:

public class NavDrawerItem
{
    public int icon;
    public String name;

    public NavDrawerItem(int icon, String name)
    {
        this.icon = icon;
        this.name = name;
    }
}

For drawer_list_item.xml:

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

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

        <TextView
           android:id="@+id/navDrawerTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/navDrawerImageView"
            android:paddingRight="10dp"
            android:textAppearance="?android:attr/textAppearanceListItemSmall"/>
    </RelativeLayout>

In MainActivity.java, instantiate an array of NavDrawerItem objects, with the appropriate drawable and name for each, and then pass this array when you set the adapter, like so: mDrawerList.setAdapter(new YourAdapter(this, R.layout.drawer_list_item, yourArray));

score 1 · Answer 2 · answered Mar 31 '15 at 08:16

You have first to create a custom object, something like:

public class DrawerItem{
    String title;
    int image_id;

    public DrawerItem(String title, int image_id){
        this.title = title;
        this.image_id = image_id;
    }
}

Then you have to create a custom adapter:

public class DrawerAdapter extends ArrayAdapter<DrawerItem>{
    //all adapter method
}

Check this link to know how to create a custom adapter: http://www.javacodegeeks.com/2013/06/android-listview-custom-adapter-with-imageview.html

And then in your activity you have to pass the id of the image and the title;

List d_list = new ArrayList<DrawerItem>();
d_list.add(new DrawerItem("my first item", R.drawable.myimageid));
d_list.add(new DrawerItem("my second item", R.drawable.mysecondimageid));

DrawerAdapter adapter = new DrawerAdapter(context, list);
mDrawerListView.setAdapter(adapter);

score 1 · Answer 3 · answered Mar 31 '15 at 08:18

1

you should create a custom adapter for your ListView like this: Implementing your own adapter

and set this adapter to your ListView

answered Mar 31 '15 at 08:18

Sajad Garshasbi

508
1
9
23

score 1 · Answer 4 · answered Mar 31 '15 at 08:19

1

This is a very nice example explaining custom adapters for listview. http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/

You can use this to create custom adapter and apply it on your mDrawerListView

answered Mar 31 '15 at 08:19

Mohib Irshad

1,940
23
18

NavigationDrawer, adapter with an image also

4 Answers4