ListView using Custom Adapter in Android

ListView using Custom Adapter in Android

In this blog of Android UI, we have discussed How to create a ListView using Custom Adapter. In this blog, you are also going to learn how to add images and text in listview.

What is ListView?

What is the Adapter?

There are different types of Adapters available in Android. Base Adapter, Array Adapter, Cursor Adapter, Custom Array Adapter, Simple Adapter, Custom Simple Adapter are the types of the Adapter.

Here we used the Custom Adapter that extends the Base Adapter.

There are some layouts like ListView and GridView for which you need to use an Adapter. “Because these layouts are changing, you can’t plan for these layouts.” For that, you need to use a subclass of the AdapterView class an Adapter. The Adapter holds the data in the form of an array or database query and converts data into a view.

Creating ListView using Custom Adapter in Android (Design Part)

After creating the toolbar, you are now going to create a ListView. For that go to the main XML file. Below the toolbar, inside Relative Layout create a Linear Layout as a child and inside Linear Layout add your ListView.

File: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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=".MainActivity">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="@android:color/black"
android:theme="@style/ThemeOverlay.AppCompat.DayNight.ActionBar"/>

<LinearLayout
android:layout_below="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ListView
android:background="#fff"
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>

</LinearLayout>

</RelativeLayout>

the output of the above code snippet:

1. Create an item list for the ListView:

Go to the res/layout directory and add a new Android Resource File.

File: item_layout.xml

<?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="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="15dp"
android:gravity="center"
android:padding="5dp"
android:background="@drawable/camera_ripple"
android:orientation="horizontal"
android:elevation="5dp">

<ImageView
android:id="@+id/listview_images"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="7dp"
android:transitionName="imageTransition"
android:src="@drawable/apple" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp"
android:gravity="center"
android:orientation="vertical">

<TextView
android:id="@+id/Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/architects_daughter"
android:text="Title"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold"
android:transitionName="titleTransition" />

<TextView
android:id="@+id/Description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/architects_daughter"
android:text="Description"
android:textColor="@android:color/black"
android:textSize="15sp"
android:transitionName="descTransition" />
</LinearLayout>

</LinearLayout>

Here, as you see one ImageView and two TextView are used. For images copy your images and paste in the res/drawable folder. You can change the view of the item layout as per your requirements. It is just a demo for you.

[CLICK HERE to download images]

Here, the root element is the Horizontal Linear Layout that holds two columns. One is ImageView and another is Vertical Linear Layout. Make it all center, set gravity as “center”. The vertical linear layout holds two TextView that include your Title and Description.

**Make sure you add the minimum information. Do not add more information to the item layout.

2. Adding Font in the TextView:

Creating ListView using Custom Adapter in Android (Add Functionality Part)

Here, as you see we have created three arrays and stored it into listview (Titles, Descriptions, and Images). And create the hooks for the ListView inside onCreate () callback method. We already discuss how these callbacks methods are used during the activity lifecycle. Go through it, if you don’t know about the different callback methods of activity lifecycle. Activity-Lifecycle in Android.

1. Create a custom adapter:

Inside the getView() method, you need to initialize and set the values of the String arrays which you created earlier inside the item layout.

2. Call Adapter:

File: MainActivity.java

package com.example.demoo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.app.ActivityOptions;
import android.os.Bundle;
import android.util.Pair;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;

// we will create array data and store to listview
// title
String[] ListviewTitle = new String[]{
"Apple", "Ball", "Cat", "Donkey", "Elephant",
"Fish", "Goat", "Hat", "Ink", "Jug",
"Kite", "Lion", "Monkey", "Nose", "Orange",
"Potato", "Queen", "Rose", "Sun", "Tree"
};
// description
String[] ListviewDescription = new String[]{
"Listview Description 1", "Listview Description 2", "Listview Description 3", "Listview Description 4",
"Listview Description 5", "Listview Description 6", "Listview Description 7", "Listview Description 8",
"Listview Description 9", "Listview Description 10", "Listview Description 11", "Listview Description 12",
"Listview Description 13", "Listview Description 14", "Listview Description 15", "Listview Description 16",
"Listview Description 17", "Listview Description 18", "Listview Description 19", "Listview Description 20"
};
// images
int[] ListviewImages = new int[]{
R.drawable.apple, R.drawable.ball, R.drawable.cat, R.drawable.donkey,
R.drawable.elephant, R.drawable.fish, R.drawable.goat, R.drawable.hat,
R.drawable.ink, R.drawable.jug, R.drawable.kite, R.drawable.lion,
R.drawable.monkey, R.drawable.nose, R.drawable.orange, R.drawable.potato,
R.drawable.queen, R.drawable.rose, R.drawable.sun, R.drawable.tree
};


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

//set the toolbar
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("ListView using Adapter");


//hooks for listView
ListView simpleListview = (ListView) findViewById(R.id.listView);

//call the adapter
CustomAdapter adapter = new CustomAdapter();
simpleListview.setAdapter(adapter);

}

private class CustomAdapter extends BaseAdapter {

@Override
public int getCount() {
return ListviewImages.length;
}

@Override
public Object getItem(int i) {
return null;
}

@Override
public long getItemId(int i) {
return 0;
}

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
View view1 = getLayoutInflater().inflate(R.layout.item_list, null);

//getting view in row_data
TextView name = view1.findViewById(R.id.Title);
TextView desc = view1.findViewById(R.id.Description);
ImageView image = view1.findViewById(R.id.listview_images);

name.setText(ListviewTitle[i]);
desc.setText(ListviewDescription[i]);
image.setImageResource(ListviewImages[i]);


return view1;
}
}

}

Output

Quick Recap

  • ListView requests view from ListAdapter for displaying the different views as the user scrolls up and down
  • Adapters are like the bridge or string that attached between the Data Source and the UI components. It converts the data items into view items so that they can display them in the UI components.
  • go to the main XML file. Below the toolbar, inside Relative Layout create a Linear Layout as a child and inside Linear Layout add your ListView.
  • create a view for the listview inside res/layout directory
  • Here we are are not using any database from where you can fetch your data, all are static for now. So you need to first create the array data and store it into ListView.
  • Outside the onCreate() method, create a CustomAdapter class as extend BaseAdapter to hold these data and convert it into views so that users can scrolls it up and down.

You can also see

Hi everyone, myself Golap an Android app developer with UI/UX designer.