All you android developer out there must be wondering how do I create my own listview? I mean let’s face it, the default List View sucks. It is just rendering each line of string in a textview. What we want from our Android application development projects 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 let’s get 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

<?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>

The ListView for Android App Development 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 the properties shown in our code.

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"&gt;

&lt;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" /&gt;

&lt;/LinearLayout&gt;

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.

<?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>

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.

Write to us if you to know more about technology, platforms and cost while going for Android app development. Our business executive will get back to you to help you in the best way possible.

krunal sojitra

Giving up is always an option, but it's never MY CHOICE.

Want to work with us? We're hiring!