Custom ListView is the backbone of android application development. When it comes to show multiple items like images, text and buttons we must need customized solution. Custom ListView BaseAdapter make it possible to show multiple views to be displayed. In this tutorial we will learn to make a ListView with images of countries, names, population and area.
1. activity_main.xml
Add a Custom ListView using BaseAdapter inside activity_main.xml and assign id listView.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.tutorialscache.customlistview.MainActivity" android:background="#e9e9e9"> <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </LinearLayout>
2. Custom Row country_row.xml
Right click on layout and create new > Layout Resource File. This row will used by the adapter to render each country item.

<?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="wrap_content" android:padding="10dp" android:background="#f7f7f7"> <ImageView android:padding="2dp" android:id="@+id/countryFlagIv" android:scaleType="fitXY" android:layout_width="100dp" android:layout_height="80dp" /> <TextView android:id="@+id/countryNameTv" android:layout_toRightOf="@+id/countryFlagIv" android:layout_marginLeft="10dp" android:textSize="22dp" android:textStyle="bold" android:textColor="#000" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/populationTv" android:text="" android:textColor="@color/colorPrimary" android:layout_marginLeft="10dp" android:layout_toRightOf="@+id/countryFlagIv" android:layout_below="@id/countryNameTv" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/areaTv" android:text="" android:textColor="#000" android:layout_marginLeft="10dp" android:layout_alignParentRight="true" android:layout_below="@id/populationTv" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
3. create model CountriesModel.java
3.1 Right click on the Package name > New > Java Class and give model name CountriesModel and click Ok.

3.2 Create Getters and Setters

package com.tutorialscache.customlistview; public class CountriesModel { int id,image; String name; String population; String area; public int getId() { return id; } public void setId(int id) { this.id = id; } public int getImage() { return image; } public void setImage(int image) { this.image = image; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPopulation() { return population; } public void setPopulation(String population) { this.population = population; } public String getArea() { return area; } public void setArea(String area) { this.area = area; } }
4. CustomAdapter.java
Create new java class and name as CustomAdapter by clicking on package name > New > Java Class. Extend with BaseAdapter following cmd+insert to implement methods.

Full CustomAdapter.java code.
package com.tutorialscache.customlistview; 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; public class CustomAdapter extends BaseAdapter { Context context; ArrayList<CountriesModel> countriesData; LayoutInflater layoutInflater; CountriesModel countriesModel; public CustomAdapter(Context context, ArrayList<CountriesModel> countriesData) { this.context = context; this.countriesData = countriesData; layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } @Override public int getCount() { return countriesData.size(); } @Override public Object getItem(int i) { return countriesData.get(i); } @Override public long getItemId(int i) { return countriesData.get(i).getId(); } @Override public View getView(int position, View view, ViewGroup viewGroup) { View rowView = view; if (rowView==null) { rowView = layoutInflater.inflate(R.layout.country_row, null, true); } //link views ImageView countryFlagIv = rowView.findViewById(R.id.countryFlagIv); TextView countryNameTv = rowView.findViewById(R.id.countryNameTv); TextView populationTv = rowView.findViewById(R.id.populationTv); TextView areaTv = rowView.findViewById(R.id.areaTv); countriesModel = countriesData.get(position); countryFlagIv.setImageResource(countriesModel.getImage()); countryNameTv.setText(countriesModel.getName()); populationTv.setText("Population : " + countriesModel.getPopulation()); areaTv.setText("Area : " + countriesModel.getArea()); return rowView; } }