Android Custom ListView With Image And Text

ListView is one of the frequently used component in Android app development.Today we are going to learn how to implement custom ListView with image and text. ListView is an composite control which groups multiple items and display them in vertical scrollable list. There are two approach to implementing ListView in Android.

Android Default ListView

Custom ListView

Here we are learn how to customizing the ListView and display multiple items such as images and text.

1. Project Overview

In this tutorial we are customizing ListView with image. In each list row we are displaying one image and it’s name. For the simplicity we have added some images in drawable folder under resources directory of the project, so please download some sample images and add the images inside the drawable. This demo contains single activity which display the custom ListView looks like following screen shot.

Now let’s start by creating new project in Android Studio.

2. Create / Setup Project

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from the templates.

2. Open build.gradle under app directory. Add Support design and appcompact library. This both library provides the wide range of classes related user interface widgets.

app.gradle

1

2

3

4

5

6

dependencies{

//..

implementation'com.android.support:appcompat-v7:27.1.1'

implementation'com.android.support:design:27.1.1'

..//

}

Note : Make sure that implementation is new keyword to add library dependency when you use Android Studio version 3.0 or above.

3. Add following code into colors.xml and styles.xml files.

colors.xml

colors.xml

1

2

3

4

5

6

7

8

9

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

<resources>

<color name="colorPrimary">#3F51B5</color>

<color name="colorPrimaryDark">#303F9F</color>

<color name="colorAccent">#FF4081</color>

<color name="colorBlack">#000000</color>

<color name="colorDarkGray">#90000000</color>

</resources>

styles.xml

styles.xml

1

2

3

4

5

6

7

<resources>

<style name="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar">

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

3. Create XML Files

4. Now open the activity_main.xml and add the listview inside the file. Check the following lines of code.

activity_main.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

<android.support.constraint.ConstraintLayout

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="demo.androidfive.customlistview.ui.MainActivity">

<ListView

android:id="@+id/list"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>

5. Next step is to create the list row file. This layout file holds single items in list.. So create new file under layout named row_list_item.xml.

Above code contains ImageView, TextView which display image and it’s name side by side.

4. Create Custom ListView Adapter

6. The above code is designing part now we need some java classes to handle custom listview. Each row of the listview contains Image and Image Name so first create one model class named Image.java under model package. Add the following code into Image.java class.

Image.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

packagedemo.androidfive.customlistview.model;

publicclassImage{

intimage;

Stringname;

publicImage(intimage,Stringname){

this.image=image;

this.name=name;

}

publicintgetImage(){

returnimage;

}

publicStringgetName(){

returnname;

}

}

7. The next step is to create list adapter update the data into listview. So create the new class named ImageListAdapter.java under adapter package and add following lines of code.

Tags

Archives

Get In Touch

Know Us Better

Android 5 is a group of developers who are dedicated to bring the quality tutorials for free to everyone. We are publish tutorials of basic and advance technology for beginners and professionals. We have professionals who are experts in Android, PHP and other programming languages. Our mission is to deliver easy to learning and to-the-point content on programming languages to help the beginners and professionals.

Please enjoy the well built tutorials and give your feedback to help us make it better day by day. If you find something amazing, please share and help us grow.