How to code Android Custom ListView with Image and Text

[nguyen ba thanh]

This is a tutorial about customizing listview with an image and text. In this tutorial i explained how to load images from remote url and update into listview. Also explained how to design listview with your custom styles and colors instead of using default listview style.

1. Create new project in your Eclipse IDE and fill all the details. File ⇒ New Project

2. Define gradient style

Create 3 files xml named:
- gradient_bg.xml
- list_selector.xml
- gradient_bg_hover.xml
- image_bg.xml
2.1. gradient_bg.xml – Default Background Gradient Style
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#f1f1f2" android:centerColor="#e7e7e8" android:endColor="#cfcfcf" android:angle="270" /> </shape>

2.2. gradient_bg_hover.xml – Gradient Style for on hover state
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#18d7e5" android:centerColor="#16cedb" android:endColor="#09adb9" android:angle="270" /> </shape>

2.3. list_selector.xml – Actual liststyle which combines the above two styles
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/gradient_bg" /> <item android:state_pressed="true" android:drawable="@drawable/gradient_bg_hover" /> <item android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/gradient_bg_hover" /> </selector>

2.4. image_bg.xml – is for white border around the image in listview
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle"> <stroke android:width="1dp" android:color="#dbdbdc" /> <solid android:color="#FFFFFF" /> </shape> </item> </layer-list>

3. Define a listview: open your main.xml file
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <ListView android:id="@+id/list" android:layout_width="fill_parent" android:layout_height="wrap_content" android:divider="#b5b5b5" android:dividerHeight="1dp" android:listSelector="@drawable/list_selector" /> </LinearLayout>
4. Design single list row:
Create a new XML file under layout folder and name it as list_row.xml for Single ListRow Layout. Right Click ⇒ New ⇒ Android XML File
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/list_selector" android:orientation="horizontal" android:padding="5dip" > <!-- ListRow Left sied Thumbnail image --> <LinearLayout android:id="@+id/thumbnail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dip" android:layout_alignParentLeft="true" android:background="@drawable/image_bg" android:layout_marginRight="5dip"> <ImageView android:id="@+id/list_image" android:layout_width="50dip" android:layout_height="50dip" android:src="@drawable/rihanna"/> </LinearLayout> <!-- Title Of Song--> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/thumbnail" android:layout_toRightOf="@+id/thumbnail" android:text="Rihanna Love the way lie" android:textColor="#040404" android:typeface="sans" android:textSize="15dip" android:textStyle="bold"/> <!-- Artist Name --> <TextView android:id="@+id/artist" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/title" android:textColor="#343434" android:textSize="10dip" android:layout_marginTop="1dip" android:layout_toRightOf="@+id/thumbnail" android:text="Just gona stand there and ..." /> <!-- Rightend Duration --> <TextView android:id="@+id/duration" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignTop="@id/title" android:gravity="right" android:text="5:45" android:layout_marginRight="5dip" android:textSize="10dip" android:textColor="#10bcc9" android:textStyle="bold"/> <!-- Rightend Arrow --> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/arrow" android:layout_alignParentRight="true" android:layout_centerVertical="true"/> </RelativeLayout>

The above XML will provide you output like below



Download sample source: http://www.9android.net/how-to-code-adroid-custom-listview-with-image-and-text/


See more sample source code tutorial: http://www.9android.net/

I think it will be helpfull for beginner.