Android Custom ListView Texts and Images Tutorial

In this tutorial, you will learn how to create a custom listview with texts and images in your Android Application. Using a custom listview adapter allows to you to customize listview item layouts. We will create a listview to show texts and images and on listview item click will show the selected results in a new activity. So lets begin…

Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project CustomImageListView.

Application Name : CustomImageListView

Project Name : CustomImageListView

Package Name : com.androidbegin.customimagelistview

Open your MainActivity.java and paste the following code.

MainActivity.java

In this activity, we have created string arrays with sample data and pass it into the ListViewAdapter class. On listview item click will pass the selected position and string arrays to a new activity.

We have prepared some sample images for this tutorial. Insert your downloaded sample images into your res > drawable-hdpi.

Sample Images

Flag (16.7 KiB, 3153 downloads)

Next, create an XML graphical layout for your MainActivity. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file listview_main.xml and paste the following code.

listview_main.xml

Output:

CustomImageListView Main Graphical Layout

Next, create a custom listview adapter. Go to File > New > Class and name it ListViewAdapter.java. Select your package named com.androidbegin.customimagelistview and click Finish.

Open your ListViewAdapter.java and paste the following code.

ListViewAdapter.java

In this custom listview adapter class, string arrays are passed into the ListViewAdapter and set into the TextViews  and ImageViews followed by the positions.

Next, create an XML graphical layout for your listview item. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file listview_item.xml and paste the following code.

listview_item.xml

Output:

CustomImageListView Item Graphical Layout

Next, create a new activity to show results on listview item click. Go to File > New > Class and name it SingleItemView.java. Select your package named com.androidbegin.customimagelistview and click Finish.

Open your SingleItemView.java and paste the following code.

SingleItemView.java

In this activity, strings and integer are retrieved from the ListViewAdapter by using Intent and sets into the TextViews and ImageView.

Next, create an XML graphical layout for your SingleItemView. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file singleitemview.xml and paste the following code.

singleitemview.xml

Next, change the application name and texts. Open your strings.xml in your res > values folder and paste the following code.

strings.xml

In your AndroidManifest.xml, we need to declare an activity. Open your AndroidManifest.xml and paste the following code.

AndroidManifest.xml

Output:

CustomImageListView ScreenShot

Source Code

CustomImageListView (598.6 KiB, 1168 downloads)
  • Ricardo Molinari

    Uol, that was just what i needed