Custom Listview with Image and Text :

The standard ListView only displays a list of items. while it may suffice when you simply need to show a list of text, it’s not enough for more refined applications. in this example, you’ll see how you’ll be able to customise the ListView so that you’ll be able to show pictures, multiple lines of text, and more.

custom listview image text

A. First Learn How to Display Image in ListView :

1. The first thing you’ll learn in this example is how to show a picture next to each item in the ListView. To do that, Create an XML file in your res/layout folder and name it, for example, mylist.xml

custom listview image text

 

2. Now Open “res/layout/mylist.xml” file and put this xml code it into file:

Above code will show each row will contain an ImageView and a TextView.

3. To display a ListView in your activity, you need to add the <ListView> element to your UI, such as the activity_main.xml file:

File : res/layout/activity_main.xml

1. Open “MainActivity.java” file and add following JAVA code.

File : src/package-name/MainActivity.java

Note that instead of using one of the default layout types, in this example you are using your own self-defined layout:

Output of  Android Custom ListView with Image in emulator :

custom listview image text

You can see each row have same icon If you want different icons or images for each row, you must need to create your own custom adapter. In next part B shows you how to achieve this.

Download Android Custom List with Same Image Source code :


B. How to Create Custom Adapter of Display Image and TextView in ListView :

For better understanding Create new Project and Follow this steps :

1. Create an XML file in your res/layout folder and name it, for example, mylist.xml. (As previous Part)

2. Now Open “res/layout/mylist.xml” file and put this xml code it into file:

The preceding layout contains an ImageView and two TextViews.

3. To display a ListView in your activity, you need to add the <ListView> element to your UI, such as the activity_main.xml file:

File : res/layout/activity_main.xml

4. Add 8 images to the res/drawable-mdpi folder (see Figure ).

custom listview image text

5. To populate each row using this newly created layout, you need to create a new custom array adapter. To do that, add a new Java class to the project and name it CustomListAdapter.java (see Figure).

custom listview image text

6. Open “CustomListAdapter.java” file and add following JAVA code.

File : src/package-name/CustomListAdapter.java

The CustomArrayAdapter class extends the ArrayAdapter base class.

7. To display the ListView using the new layout, add the following code to the MainActivity.java file:

File : src/package-name/MainActivity.java

 

Output of  Android Custom ListView with Image & Text in emulator :

custom listview image text

Download Android Custom List with Image and Text Source code :

Note : This example (Project) is developed in Eclipse Version Kepler,tested on Android 4.4.2 (KitKat Version) and SDK build-tools 23.0

      • R.K.Kanojia (Android App Developer)

        Hi, use this code in toast =>Toast.makeText(getApplicationContext(), Slecteditem, Toast.LENGTH_SHORT).show();
        or
        Toast.makeText(MainActivity.this, Slecteditem, Toast.LENGTH_SHORT).show();

        let me know if you again getting same error

        • Toast.makeText(getApplicationContext(),”SelectedItem”,Toast.LENGTH_SHORT).show();
          In your code you are not passing String after context() method thatswhy it is showing error to you.Because in toast method we are having a string type after the context() method.
          Thankyou …!!!

      • R.K.Kanojia (Android App Developer)

        HI Jeremy, code is updated now download code and check Toast is working, if get any error or problem let me know. Thanks 🙂

    • R.K.Kanojia (Android App Developer)

      Hi, use this code in toast =>Toast.makeText(getApplicationContext(), Slecteditem, Toast.LENGTH_SHORT).show();
      or
      Toast.makeText(MainActivity.this, Slecteditem, Toast.LENGTH_SHORT).show();

      • hi, great tutorial, im new to android development and have a half built app, i have used an adapter and have a dialog fragment listview, the problem i have got is this, in my listview i have like your tutorial an image and a textview on each row, i have set an onItemClickListener and made an intent so that when i click an item in the list it starts a new activity, i have about 30 items in the list and dont really want to have 30 new blank activitys, is there a better way of doing this? all i want to do is once an item in the list is clicked i would like to display a image with text underneith, your help would be greatly appreciated as i really am stuck and not want to make 30 activitys.

    • R.K.Kanojia (Android App Developer)

      HI Senthil, code is updated now download code and check Toast is working, if get any error or problem let me know. Thanks 🙂

  1. R.K.Kanojia (Android App Developer)

    Hi Shahid, I think you want dynamically add data to ListView, Like exmaple:- if Select any State in Spinner then ListView should be updating with city (Cities of states).
    If you have problem same as my example then you can use handler for updating ListView

  2. very nice post.thanks a lot.
    i followed the 2nd method and i got list view but the first text is coming to the bottom right of image and the list item width is too much.i want the list view to appear as you have shown.
    same code is used no changes but dont know why i am getting like that.. please help me out

    • Philip Barwikowski

      Change customlist Class to this:
      package barwikowski.liquortycoon;

      import android.app.Activity;
      import android.view.LayoutInflater;
      import android.view.View;
      import android.view.ViewGroup;
      import android.widget.ArrayAdapter;
      import android.widget.ImageView;
      import android.widget.TextView;

      public class CustomListAdapter extends ArrayAdapter {

      private final Activity context;
      private final String[] itemname;
      private final Integer[] imgid;
      private final String[] description;

      public CustomListAdapter(Activity context, String[] itemname, Integer[] imgid, String[] description) {
      super(context, R.layout.homelist, itemname);
      // TODO Auto-generated constructor stub

      this.description = description;
      this.context=context;
      this.itemname=itemname;
      this.imgid=imgid;
      }

      public View getView(int position,View view,ViewGroup parent) {
      LayoutInflater inflater=context.getLayoutInflater();
      View rowView=inflater.inflate(R.layout.homelist, null,true);

      TextView txtTitle = (TextView) rowView.findViewById(R.id.item);
      ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
      TextView extratxt = (TextView) rowView.findViewById(R.id.textView1);

      txtTitle.setText(itemname[position]);
      imageView.setImageResource(imgid[position]);
      extratxt.setText(description[position]);
      return rowView;

      };
      }

      now you can call it with an additional list which contains the descriptions.

  3. Great sample code.
    For people looking to have the selected line highlight all the items, simply add
    android:background=”?android:attr/activatedBackgroundIndicator”
    to the LinearLayout parent of the image,textview

  4. ArrayAdapteradapter =new ArrayAdapter(this,android.R.layout.simple_list_item_1,Names);
    here string shows error wat i hav to do

  5. Wow, finally something that just works! Used the “Custom ListView with Image & Text in emulator” and it worked as fast as I could copy and paste! Bravo!!!

  6. If anyone wanted to use this to personalize a navigation drawer make these changes.

    CustomListAdapter.java

    package codswallop.mylibrary;

    import android.app.Activity;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ArrayAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;

    import java.util.zip.Inflater;

    /**
    * Created by Abby on 7/16/2015.
    */
    public class CustomListAdapter extends ArrayAdapter {

    private final Context context;
    private final String[] itemname;
    private final Integer[] imgid;
    private final LayoutInflater inf;
    private Activity act;

    public CustomListAdapter(LayoutInflater in, Context context, String[] itemname, Integer[] imgid) {
    super(context, R.layout.my_list, itemname);
    // TODO Auto-generated constructor stub

    this.context = context;
    this.itemname = itemname;
    this.imgid = imgid;
    this.inf = in;
    }

    public View getView(int position, View view, ViewGroup parent) {

    View rowView = inf.inflate(R.layout.my_list, null, true);

    TextView txtTitle = (TextView) rowView.findViewById(R.id.item);
    ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
    TextView extratxt = (TextView) rowView.findViewById(R.id.textView1);

    txtTitle.setText(itemname[position]);
    imageView.setImageResource(imgid[position]);
    extratxt.setText(“Description ” + itemname[position]);
    return rowView;

    }
    }

    Then in the NavigationDrawerFragment.java replace the onCreateView with the code below

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
    Integer[] imgid={
    R.drawable.add,
    R.drawable.lol,
    R.drawable.add,
    R.drawable.lol,
    R.drawable.add,
    R.drawable.lol,
    R.drawable.add,
    R.drawable.lol,
    };
    String[] itemname ={
    “Safari”,
    “Camera”,
    “Global”,
    “FireFox”,
    “UC Browser”,
    “Android Folder”,
    “VLC Player”,
    “Cold War”
    };
    mDrawerListView = (ListView) inflater.inflate(
    R.layout.fragment_navigation_drawer, container, false);
    mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
    selectItem(position);
    }
    });
    mDrawerListView.setAdapter(new CustomListAdapter(inflater, getActionBar().getThemedContext(), itemname, imgid));
    mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
    return mDrawerListView;
    }

  7. Hey Thanks for your tutorail But when I change the picture its not going to read it why ? its wierd I check spelling But I go this error Error:(30, 23) error: cannot find symbol variable pic1

  8. hi sir..im getting error at onItemClickListener method
    and it is showing the suggestions like change to onItemSelectListener..
    and also i am getting error at list.setAdapter..and the suggestion that the eclipse is showing like onitemclick is not applicable to listadpater..
    please help…….

  9. Thanks for easy tutorial. This code works for me but i want to make those images corner round. can i add some code to make round corner images..if so where should i include that code in the above tutorial?

    • Hi mate, just use a online image editor, Google free online image editor and I’m sure you will find one so you can make your image corners round! You don’t need to do it in code

  10. Hi, l wanna learn how to make an android app that l can click on the items. What I mean is l wanna make a biography app. However, l searched a lot about that but l couldnt find any beneficial info about how to create a same layout and use this layout for all rows in a listview. You know in biography app l will add biographies of 21 great people. Users will reach the detailed info about them by clicking on an item. Layout must be same just information of people are differnet. I am looking forward to hearing back from you. Thanks …

  11. make sure you extend the main activity as “Activity” and not “ListActivity”. I was getting an error ‘Your content must have a ListView whose id attribute is’ due to that. Users attending this tutorial without copying pasting your code will keep having the same issue. Cheers

  12. hello. can anyone guide me how to create a custom list view for showing a playlist of videos. as when i paste video in drawable folder the format of the video file is not detectable. Kindly guide me.

  13. ListView list;
    String[] forecastArray = {
    “hello”,

    “hello3”,
    “hello4”
    };
    List weekForecast = new ArrayList
    (Arrays.asList(forecastArray)) ;

    This code is show unreachable error
    How to correct error.

  14. Hi,

    How do i link/ connect another activity for each of the list items. Basically, I want to open a new activity (XML file, which I already created) for each list item in the ListView. There are some 10 – 20 Items in my list?

    Everything else mentioned above in the article worked for me. I just need to complete this last step.

    please help!

    • R.K.Kanojia (Android App Developer)

      Don’t create XML file for every list item it will be hard coded. Do use Model class for data(item) and when you click on any item in list pass this id thru Intnet then launch another activity along with xml, fetch data for particularity id and show them in xml 🙂

  15. ive followed the instructions but the images are not being shown in the listview.how can I get the Images to show?

Leave a Reply