Tuesday 3 April 2012

Custom ListView with Image and text views


This Post explains custom listview in android.
Step 1:

add an listview to your res/layout:

main.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="#21415A" android:orientation="vertical">
   
     <ListView
     android:id="@id/android:list"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="#F0F0F0"
     android:drawSelectorOnTop="false">
</ListView>

</RelativeLayout>



Please Don’t change

“android:id="@id/android:list”(will be used by ListActivity" later)

Step2: add an custom layout for list items in res/layout:


“customrow.xml”


 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dip"
    android:background="#00578C"
>
    <ImageView
        android:id="@+id/contact_photo"
        android:layout_width="48dip"
        android:layout_height="48dip"
        android:src="@drawable/default_document" />
    <TextView
        android:id="@+id/text1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/contact_photo"
        android:paddingBottom="5dip"
        android:textSize="18dip"
        android:textColor="#fff" />
    <TextView
        android:id="@+id/text2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/contact_photo"
        android:layout_below="@id/text1"
        android:textSize="14dip"
        android:textColor="#fff" />
    <TextView
        android:id="@+id/text3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/contact_photo"
        android:layout_below="@id/text2"
        android:textSize="14dip"
        android:textColor="#fff" />
    <TextView
        android:id="@+id/text4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/contact_photo"
        android:layout_below="@id/text3"
        android:textSize="14dip"
        android:textColor="#fff" />

</RelativeLayout>


Step3: Create your activity class that extends ListActivity class:


in Oncreate()


setContentView(R.layout.main);


Step 4: Binding Data with Custom listView:


in actuvity class bind data with listview with adapter:


SimpleAdapter adapter = new SimpleAdapter(
                                YourListActivity.this,
                                (List<? extends Map<String, ?>>) array_list,
                                R.layout.customrow,
                                new String[] { "Object Rid", "Description",
                                        "Title", "Owner" }, new int[] {
                                        R.id.text1, R.id.text2, R.id.text3,
                                        R.id.text4 });
                        setListAdapter(adapter);

Thank you.

No comments:

Post a Comment