Custom Listview In Android With Images and Text

Hello friends, today I will explain you how to make a Custom Listview In Android With Images and Text using the Custom Adapter. 

In the previous post, I explained about:

If you havn’t read that post then read that before reading this, so that you can have clear understanding of the basics thing that are used to build an application in Android.

So there are four steps to create a Custom Listview.

  1. Prepare your data, this means that we have to decide where we have to store our images and texts that is to be displayed within the list.
  2. We have to define the appearance for a single row. The structure of a single row with image and text has to be defined within .XML file.
  3.  Then we have to create a custom adapter that will pick up your data from the .xml file and put it within the adapter.
  4. Last but not the least, decide what happens when the user click on a single row.

So to store the data, we need to find the way for it. In this the data is our images and texts. The text will be stored in strings.xml file using the <string-array> tag and in the same way you can save images in the drawable folder.

Then we have to create a separate layout file for the appearance of single row which contains image view and text view.

After that we will create an adapter using an extended class called Array Adapter that will take our data, the layout and create the appearance for a single row.

So we have discussed all the important points so we will now create a project and create a custom listview

Download Source Code

Custom Listview In Android With Images and Text

  • Firstly create a project in Android Studio naming Customlist and click next.
  • Choose the BlankActivity and click next.
  • At last click finish, without changing anything.
  • Now firstly create a new layout file and name as singlerow.xml and do following changes in it:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/audio"
        android:layout_margin="10dp"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/textView"
        android:layout_alignTop="@+id/imageView"
        android:layout_toRightOf="@+id/imageView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/textView2"
        android:layout_alignBottom="@+id/imageView"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignStart="@+id/textView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

In the above code, the layout for the single row has been created so that we can tell the adapter that our list will look like this layout.

  • Now go to sttrings.xml file and do following changes:
<?xml version="1.0"?>

    <resources>

    <string name="app_name">Customlist</string>

    <string name="action_settings">Settings</string>


    <string-array name="title">

    <item>Main Activity</item>

    <item>Wifi Activity</item>

    <item>Debug Activity</item>

    <item>Form</item>

    <item>Notification</item>

    <item>Toast Activity</item>

    <item>Android Menus</item>

    <item>Alert Activity</item>

    <item>GPS Activity</item>

    <item>Progress Activity</item>

    <item>Audio Player</item>

    <item>Video Player</item>

    <item>Camera</item>

    <item>Shared Activity</item>

    <item>SQLite Activity</item>

    <item>Content Activity</item>

</string-array>


    <string-array name="descriptions">

    <item>Main Activity</item>

    <item>Wifi Activity</item>

    <item>Debuging your application</item>

    <item>Creat a form for capturing data</item>

    <item>Display a notification on touch</item>

    <item>Display a toast message on touch</item>

    <item>shows the menus used in Adroid</item>

    <item>Displays a alert and custom dialogue box</item>

    <item>Displays location on map using GPS</item>

    <item>Displays a spinner</item>

    <item>Basic audion player with play, pause or stop</item>

    <item>Plays video with inbuilt video player</item>

    <item>Take a picture using device camera</item>

    <item>lets you save data permanently</item>

    <item>Lets you store data locally </item>

    <item>Fetch and display your contacts </item>

</string-array>

    <string name="title_activity_main2">Android Menus</string>

    <string name="title_activity_main22">Main22Activity</string>

</resources>

  • Now go to MainActivity.java file and do following changes:
package com.example.aditya.customlist;

import android.content.Context;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    ListView listView;

    String[] list_title;

    String[] list_desc;

    int[] images={R.drawable.home,R.drawable.wifi,R.drawable.debugs,R.drawable.forms,R.drawable.notification1,R.drawable.messages,R.drawable.option_menu,R.drawable.alert,R.drawable.gpss,R.drawable.progress,R.drawable.audio,R.drawable.video_icons,R.drawable.camera,R.drawable.settings,R.drawable.database,R.drawable.content};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView=(ListView) findViewById(R.id.listView);

        Resources res=getResources();

        list_title=res.getStringArray(R.array.title);

        list_desc=res.getStringArray(R.array.descriptions);

        CustomAdapter adapter=new CustomAdapter(this,list_title,images,list_desc);

        listView.setAdapter(adapter);
     }
}

class CustomAdapter extends ArrayAdapter<String>
{

    Context context;

    int image[];

    String[] title;

    String[] description;

    public CustomAdapter(Context context, String[] titles, int[] imgs, String[] desc)
    {

        super(context, R.layout.single_row,titles);

        this.context=context;

        this.image=imgs;

        this.title=titles;

        this.description=desc;

    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        LayoutInflater inflater= (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View row=inflater.inflate(R.layout.single_row, parent, false);

      ImageView myimage= (ImageView) row.findViewById(R.id.imageView);

       TextView mytitle= (TextView) row.findViewById(R.id.textView);

        TextView mydesc= (TextView) row.findViewById(R.id.textView2);

        myimage.setImageResource(image[position]);

        mytitle.setText(title[position]);

        mydesc.setText(description[position]);

        return row;


    }
}
  • In the above code, firstly, the list view, list_title, list_desc are declared.
  • After that the integer type array for the declaration of the images were defined.
  • After that in onCreate(), we have given the id to the list view.
        Resources res=getResources();

        list_title=res.getStringArray(R.array.title);

        list_desc=res.getStringArray(R.array.descriptions);

  • In the above code, that is written in onCreate method, the Resource is the class that has an object res. The getResource() method is used to get our titles and descriptions from the strings.xml file that is present under values folder, within res directory.
  • After that, the list_title and list_desc variables of string type are provided with their relative string-arrays that are stored in strings.xml file.

The when you go down in the code, I have created a class called CustomAdapter which extends ArrayAdapter. Now this class is responsible for taking the layout file and out data and to create rows for our list.

public CustomAdapter(Context context, String[] titles, int[] imgs, String[] desc)
{

    super(context, R.layout.single_row,titles);

    this.context=context;

    this.image=imgs;

    this.title=titles;

    this.description=desc;

}
  • Now the code defined above is the constructor for the class is created. Its a predefined constructor for the ArrayAdapter class.
  • This constructor will take 4 parameters, the context, titles, imgs, desc. Now thes parameters will be used within the getView() method. If we do not pass these above parameters within the constructor, then we will not be able to see out list.

The next thing comes is the getView() method. It is an overriding method.

 public View getView(int position, View convertView, ViewGroup parent)
    {
        LayoutInflater inflater= (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View row=inflater.inflate(R.layout.single_row, parent, false);

      ImageView myimage= (ImageView) row.findViewById(R.id.imageView);

       TextView mytitle= (TextView) row.findViewById(R.id.textView);

        TextView mydesc= (TextView) row.findViewById(R.id.textView2);

        myimage.setImageResource(image[position]);

        mytitle.setText(title[position]);

        mydesc.setText(description[position]);

        return row;


    }
  • Now the getView() method is responsible for taking our data and putting them inside a view. Infact it will create a single row for our list.
  • This means that for every single row to shown to the user, the getView() method will be called. For Example: if wee have 5 rows, then this view method will be called for 5 times for creating each row every time.
  • In the getView() method, firstly we have give the reference of our layout file which is singlerow.xml file.
  • Now the row object of View contains our root  that means our layout file.
  • After that we have passed each and every thing that we have made in our layout file, which is our list_title, images and list_desc and passed them with the view object.
  • So this will set the exact image, title and description for every single row and we will get a single row displayed.
  • And at last we have to return our row object so that we are able to view our list.

Now you can also set the onClickListener() on the list.

 

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view,
                            int position, long id) {
        switch (position) {
            case 1:
                Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_LONG).show();

        }

    }

    @SuppressWarnings("unused")
    public void onClick(View v) {
    }


});

You can use this code write this code within onCreate() method after the adapter is set. This will set the click listner on the list whenever you click on any row within the list. You can either put an intent within this onClickListener()

Output:

CustomList View 2

 

Custom List View 1

One Response

  1. Nicholas August 1, 2016