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?

In ListView, display the data in the columns list and it is scrollable. A list view is an adapter view that does not understand the features, such as type and contents, of the views it carries. For that, ListView requests view from ListAdapter for displaying the different views as the user scrolls up and down

What is the Adapter?

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.

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)

You are already know how to create a Custom Toolbar in Android, those who are not, please go through the previous blog “How to create a toolbar in android”.

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:

Now you are going to create a view for the listview. That’s means WHAT YOU SHOULD DISPLAY in the listview, the items that display something inside the listview. For that, you need to create an item layout.

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:

As you noticed, we are using a Custom Font Style. For that go to the Design Tab of the XML file, select the TextView > select your font style from the font family right side of the screen.

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

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.

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:

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. The getCount(), getItem(), getItemId(), and getView() methods are increated automatically after creating adapter class, just click ALT + Enter where you see red marks error sign.

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:

After creating the adapter, you need to initialize the adapter inside onCreate() method and set the adapter with your listView.

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

DOWNLOAD FULL CODE

Quick Recap

• In ListView, display the data in the columns list and it is scrollable.
• 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

• Create Custom Toolbar in Android
• Activity-Lifecycle in Android.