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.