Making Custom Android ListViews: Part 1

All you android developer out there must be wondering how do I create my own listview? I mean lets face it, the default List View sucks. It is just rendering each line of string in a textview. What we want from our apps is to shine out beautifully. This is why today we are going to look at getting your own Custom Android ListViews.

What we will show you here today will allow you to create listviews with icons and custom header layout. We will be using custom ArrayAdapter to make sure everything gels together. So lets gewt started.

Step 1: Lay Everything Out

Basically we start off by declaring out basic layout. You can go for any layout that pleases you, but for the sake of simplicity we are going to stick with the basic Linear Layout. So we are going to take this in our main.xml aka our default layout file. Now what we are going to do is put a ListView in the layout. Simple enough right? Work along the lines of our code below to get a better idea.

Main.xml

[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">

<ListView
android:id="@+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />

</LinearLayout>
[/code]

The ListView that we put in has vertical orientation and will cover the width and height completely as a result of fill_parent in both attributes.

Step 2: Get the head in the game

We will now make the custom header for our ListView. Create a new XML file listview_header_row.xml in the layout folder. You will be showing a TextView in its Linear Layout with thye properties shown in our code.

 
[code language="xml"]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

     <TextView android:id="@+id/txtHeader"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:textStyle="bold"
        android:textSize="22dp"
        android:textColor="#FFFFFF"
        android:padding="10dp"
        android:text="Weather Photos"
        android:background="#336699" />

</LinearLayout>
[/code]
Step 3: We are gonna row this boat!

Now that we got the header we will be getting to create custom rows for your ListView. Create another xml layout file listview_item_row.xml in the project layout directory. Android will render this file content in every ListView item and you are free to declare any control you want in it. For this tutorial we will be using an ImageView for an icon and a TextView for displaying items titles. Following is the code for listview_item_row.xml file. Once again work along our code.

[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp">

<ImageView android:id="@+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="15dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp" />

<TextView android:id="@+id/txtTitle"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:textStyle="bold"
android:textSize="22dp"
android:textColor="#000000"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp" />

</LinearLayout>

[/code]

Now that you have managed to put all your visual elements together we suggest you give yourself a pat on the back. Now what we need for going ahead are some cool icons. Get yourself some 32×32 pixel icons in png preferably. We will see you next week to see how you can put together all these elements.