Custom Listview With Imageview and Textview In Android

Step 1 Add This Code To ActivityMain.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">

    <ListView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    </ListView>


</RelativeLayout>

 

 

Step 2 Create A Layout File From Resource Layout

<?xml version="1.0" encoding="utf-8"?>



<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:orientation="horizontal"

    tools:ignore="UselessParent">



    <ImageView

        android:id="@+id/imageView"

        android:layout_width="84dp"

        android:layout_height="84dp"

        android:padding="16dp"

        tools:ignore="ContentDescription" />



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:gravity="center_vertical"

        android:orientation="vertical">



        <TextView

            android:id="@+id/textView1"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="16dp"

            android:gravity="bottom|left"

            android:textColor="@android:color/black"

            android:textSize="18sp"

            android:textStyle="bold"

            tools:ignore="RtlHardcoded" />



        <TextView

            android:id="@+id/textView2"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginBottom="16dp"

            android:gravity="top|left"

            android:textColor="@android:color/black"

            android:textSize="14sp"

            tools:ignore="RtlHardcoded" />



    </LinearLayout>



</LinearLayout>

 

 

Step 3 Create A Class In Java File

package com.example.dummy;



public class NumbersView {

    // the resource ID for the imageView

    private int ivNumbersImageId;



    // TextView 1

    private String mNumberInDigit;



    // TextView 1

    private String mNumbersInText;



    // create constructor to set the values for all the parameters of the each single view

    public NumbersView(int NumbersImageId, String NumbersInDigit, String NumbersInText) {

        ivNumbersImageId = NumbersImageId;

        mNumberInDigit = NumbersInDigit;

        mNumbersInText = NumbersInText;

    }



    // getter method for returning the ID of the imageview

    public int getNumbersImageId() {

        return ivNumbersImageId;

    }



    // getter method for returning the ID of the TextView 1

    public String getNumberInDigit() {

        return mNumberInDigit;

    }



    // getter method for returning the ID of the TextView 2

    public String getNumbersInText() {

        return mNumbersInText;

    }

}

 

 

Step 4 An Adapter Class NumbersViewAdapter

package com.example.dummy;



import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;



import ndroid.annotation.NonNull;

import ndroid.annotation.Nullable;



import java.util.ArrayList;



public class NumbersViewAdapter extends ArrayAdapter<NumbersView> {



    // invoke the suitable constructor of the ArrayAdapter class

    public NumbersViewAdapter(@NonNull Context context, ArrayList<NumbersView> arrayList) {



        // pass the context and arrayList for the super

        // constructor of the ArrayAdapter class

        super(context, 0, arrayList);

    }



    @NonNull

    @Override

    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {



        // convertView which is recyclable view

        View currentItemView = convertView;



        // of the recyclable view is null then inflate the custom layout for the same

        if (currentItemView == null) {

            currentItemView = LayoutInflater.from(getContext()).inflate(R.layout.row, parent, false);

        }



        // get the position of the view from the ArrayAdapter

        NumbersView currentNumberPosition = getItem(position);



        // then according to the position of the view assign the desired image for the same

        ImageView numbersImage = currentItemView.findViewById(R.id.imageView);

        assert currentNumberPosition != null;

        numbersImage.setImageResource(currentNumberPosition.getNumbersImageId());



        // then according to the position of the view assign the desired TextView 1 for the same

        TextView textView1 = currentItemView.findViewById(R.id.textView1);

        textView1.setText(currentNumberPosition.getNumberInDigit());



        // then according to the position of the view assign the desired TextView 2 for the same

        TextView textView2 = currentItemView.findViewById(R.id.textView2);

        textView2.setText(currentNumberPosition.getNumbersInText());



        // then return the recyclable view

        return currentItemView;

    }

}

 

 

Step 5 Add Code Main Activity

package com.example.dummy;



import androidx.appcompat.app.AppCompatActivity;



import android.os.Bundle;

import android.widget.ListView;



import java.util.ArrayList;



public class MainActivity extends AppCompatActivity {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        final ArrayList<NumbersView> arrayList = new ArrayList<NumbersView>();



        // add all the values from 1 to 15 to the arrayList

        // the items are of the type NumbersView

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "1", "One"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "2", "Two"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "3", "Three"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "4", "Four"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "5", "Five"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "6", "Six"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "7", "Seven"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "8", "Eight"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "9", "Nine"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "10", "Ten"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "11", "Eleven"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "12", "Twelve"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "13", "Thirteen"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "14", "Fourteen"));

        arrayList.add(new NumbersView(R.drawable.geeks_logo, "15", "Fifteen"));



        // Now create the instance of the NumebrsViewAdapter and pass

        // the context and arrayList created above

        NumbersViewAdapter numbersArrayAdapter = new NumbersViewAdapter(this, arrayList);



        // create the instance of the ListView to set the numbersViewAdapter

        ListView numbersListView = findViewById(R.id.listView);



        // set the numbersViewAdapter for ListView

        numbersListView.setAdapter(numbersArrayAdapter);

    }

}

 

Step 6 Add Image In Your Drawable File