Android Listview With Image And Text In Android Studio Example

android listview kotlin, android listview with image

Android Listview with image and text example tutorial will guide you today.

Listview is used when you want to display multiple items which have a dynamic number of items.

We will create a listview which contains image and text in it’s every row item.

I have put one divider between every listview row item. Divider helps user to differentiate among listview items easily.

Watch this video to have a brief idea about the output of this tutorial.

Step 1. Create a new project

Make a new project in the Android Studio.

Step 2. Necessary Images

We require few images in this example to use them in the listview.

Click on the below link to download these images.

download this images

Now put these images in the drawable folder.

Step 3. Update activity_main.xml

copy and paste following code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.exampledemo.parsaniahardik.listview_with_image_demonuts.MainActivity">
    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
        android:divider="@null"
       />
</RelativeLayout>

I have taken one listview in the above code.

Step 4. Create java class named CustomeAdapter.java 

copy following code in it.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.HashMap;
/**
 * Created by Parsania Hardik on 03-Jan-17.
 */
public class CustomeAdapter  extends BaseAdapter {
    private Context context;
    private ArrayList<ImageModel> imageModelArrayList;
    public CustomeAdapter(Context context, ArrayList<ImageModel> imageModelArrayList) {
        this.context = context;
        this.imageModelArrayList = imageModelArrayList;
    }
    @Override
    public int getViewTypeCount() {
        return getCount();
    }
    @Override
    public int getItemViewType(int position) {
        return position;
    }
    @Override
    public int getCount() {
        return imageModelArrayList.size();
    }
    @Override
    public Object getItem(int position) {
        return imageModelArrayList.get(position);
    }
    @Override
    public long getItemId(int position) {
        return 0;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            holder = new ViewHolder(); LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.lv_item, null, true);
            holder.tvname = (TextView) convertView.findViewById(R.id.name);
            holder.iv = (ImageView) convertView.findViewById(R.id.imgView);
            convertView.setTag(holder);
        }else {
            // the getTag returns the viewHolder object set as a tag to the view
            holder = (ViewHolder)convertView.getTag();
        }
        holder.tvname.setText(imageModelArrayList.get(position).getName());
        holder.iv.setImageResource(imageModelArrayList.get(position).getImage_drawable());
        return convertView;
    }
    private class ViewHolder {
        protected TextView tvname;
        private ImageView iv;
    }
}

getView() method will create layout for every listview row item.

Below two lines from getView() method will set the Image and Text.

 holder.tvname.setText(imageModelArrayList.get(position).getName());
 holder.iv.setImageResource(imageModelArrayList.get(position).getImage_drawable());

Compiler will get the appropriate object from the imageModelArrayList using position.

From that object, it will use getName() and getImage_drawable() method to get related text and image resource.

Layout File

While developing listview, we need to create adapter class in which we can define code for each cell of listview.

We need to create one layout resource file(lv_item.xml here in our example, you can name it as you like) in the resource folder.

This file will contain components like TextView,ImageView, etc. as per requirement.

This file represents a single cell of the listview. In our example it contains one ImageView and one TextView.

Thus, every row will contain one image and one text.

In getView() method, lv_item.xml is inflated, and all the components of lv_item can be set here for each cell of listview as per requirement.

Code for lv_item.xml is like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/imgView"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp" />
        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="110dp"
            android:gravity="center_vertical"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:paddingLeft="10dp"
            android:text="Name" />
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/colorAccent"/>
</LinearLayout>


Step 5. Create a class named ImageModel.java

Add following source code in it.

package com.exampledemo.parsaniahardik.listview_with_image_demonuts;
/**
 * Created by Parsania Hardik on 03-Jan-17.
 */
public class ImageModel {
    private String name;
    private int image_drawable;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getImage_drawable() {
        return image_drawable;
    }
    public void setImage_drawable(int image_drawable) {
        this.image_drawable = image_drawable;
    }
}


Step 6. Finally, update MainActivity.java class.

Copy and paste below code in MainActivity.java

package com.exampledemo.parsaniahardik.listview_with_image_demonuts;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;
import android.widget.ListView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    private ListView lv;
    private CustomeAdapter customeAdapter;
    private ArrayList<ImageModel> imageModelArrayList;
    private int[] myImageList = new int[]{R.drawable.benz, R.drawable.bike,
                                            R.drawable.car,R.drawable.carrera
                                           ,R.drawable.ferrari,R.drawable.harly,
                                            R.drawable.lamborghini,R.drawable.silver};
    private String[] myImageNameList = new String[]{"Benz", "Bike",
            "Car","Carrera"
            ,"Ferrari","Harly",
            "Lamborghini","Silver"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv = (ListView) findViewById(R.id.listView);
        imageModelArrayList = populateList();
        Log.d("hjhjh",imageModelArrayList.size()+"");
        customeAdapter = new CustomeAdapter(this,imageModelArrayList);
        lv.setAdapter(customeAdapter);
    }
    private ArrayList<ImageModel> populateList(){
        ArrayList<ImageModel> list = new ArrayList<>();
        for(int i = 0; i < 8; i++){
            ImageModel imageModel = new ImageModel();
            imageModel.setName(myImageNameList[i]);
            imageModel.setImage_drawable(myImageList[i]);
            list.add(imageModel);
        }
        return list;
    }
}

Consider below source code

private int[] myImageList = new int[]{R.drawable.benz, R.drawable.bike,
                                            R.drawable.car,R.drawable.carrera
                                           ,R.drawable.ferrari,R.drawable.harly,
                                            R.drawable.lamborghini,R.drawable.silver};

I have declared one integer array in above code.

This integer array includes the drawable references to the images which are stored in the drawable folder.

We have used this integer reference to set the images in the imageview in adapter class.

private String[] myImageNameList = new String[]{"Benz", "Bike",
            "Car","Carrera"
            ,"Ferrari","Harly",
            "Lamborghini","Silver"};

Above code have declared a string variable. This variable includes the names of the vehicles.

Adapter have used this string array to fill the text in every row of the listview.

Read below code for populateList() method

private ArrayList<ImageModel> populateList(){
        ArrayList<ImageModel> list = new ArrayList<>();
        for(int i = 0; i < 8; i++){
            ImageModel imageModel = new ImageModel();
            imageModel.setName(myImageNameList[i]);
            imageModel.setImage_drawable(myImageList[i]);
            list.add(imageModel);
        }
        return list;
    }


populateList() method will create one arraylist. This arraylist contains the objects of the ImageModel class.

Compiler will create the object of the ImageModel class and will add it into the arraylist in the every iteration of the for loop.

After the successful operation of populateList() method, we will send arraylist to the adapter.

Now run your project, and yes, it will work like shown in the video.

If you have any questions regarding this tutorial, feel free to ask in comment section.