Feb 10, 2022

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 

Share:

0 Comments: