Custom ListView with TextViews and ImageView

Tutorial 1 - Creating a custom ListView with unique style and elements

In this tutorial, we're going to go over the basics of Android's ListView container and see how we can customize it so it looks a little less...well..plain. The default layout that ships with the sdk is fine. It's basically just a listed view containing text fields with a black background. You can find out more about creating a standard ListView here See photo below.

 However, if you want to customize your ListView so it looks a little different and contains dynamic data..keep reading. I used this design in an app I wrote called EZ Pics Photo album, basically an easier way to sort/organize your photos on your Android device. We will build this ListView from scratch, see the end result below. 

 Only one caveat; Disregard the ActionBar at the top of this layout, as we will not be building this design pattern in this tutorial. For that, I used the GreenDroid open source library which you can find on GitHub.

Also, There are 2 drawables that I made for the purpose of this project. The photos/camera icon on the left and the blue arrow on the right. I haven't included these files in this tutorial, so feel free to use your own drawables.

Now onto our custom ListView. Let's break down what components make up this viewgroup before we get to writing any code.

1) Notice that each element in the ListView contains 4 pieces of data. ImageView, ImageView, TextView, TextView

2) Notice that there is a space between each view in the list. This space is called a divider.

3) Notice that this ListView contains dynamic data, ie; number of photos is different in each element, as well as the TextView title. The ImageViews on the left and right sides remain the same.

4) The ListView rows have a sort of grey-gradient style to them rather than a flat, solid color that the standard one provides.

Let's set up our files. Create  new project in Eclipse. You will need these 2 files in your res/layout folder.

main.xml

listview_row.xml

In your drawable folder, you will need to create these files

 list_divider.xml

list_item_normal.xml

list_item_pressed.xml

list_item_selected.xml

listview_background.xml

selector.xml

shape_background_grey.xml 

In your res/values folder, create these files.

 styles.xml

These are basically all the resource files you will need. We will break down each in order to fully understand how we couple XML with Java in this project to achieve the desired results.

Ok, so first our main.xml. This file should look like this.

Main.xml

 <?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:background="#708090"
     android:orientation="vertical" >
 
     <ListView
         android:id="@+id/lvAlbumList"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:cacheColorHint="#00000000"
         android:clickable="false"
         android:divider="@drawable/list_divider"
         android:dividerHeight="3dp"
         android:listSelector="@drawable/selector"
         android:drawSelectorOnTop="false"
        
         android:padding="2dp" >
     </ListView>
     
     
      
 
 </LinearLayout>

listview_row.xml 

 Our listview_row.xml will represent each individual row in our list. You'll notice that unlike the default ListView tutorial, we are creating a separate xml file to represent an individual row. Why? This is because we will later create a custom ListAdapter that will be responsible for not only inflating each view in the list, but binding the data to it as well. We want to have total control over how each element in our list is drawn, and also because we will be extending Activity instead of ListActivity.

We use a RelativeLayout as our root view because it gives us more control over how we can position our child views. We will assign a custom background to this layout in a bit. Remember that we have 4 children views(2 TextViews and 2 ImageViews). Play around with the gravity, padding, and position of each of your ImageViews and TextViews in order to get your desired result. The code is below

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/relativeLayout1"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="@drawable/listview_background"
     android:padding="5dip" >
 
     <ImageView
         android:id="@+id/imgViewLogo"
         android:layout_width="50dip"
         android:layout_height="50dip"
         android:layout_alignParentLeft="true"
         android:scaleType="fitXY"
         android:src="@drawable/imgview_drawable" >
     </ImageView>
 
     <TextView
         android:id="@+id/txtViewTitle"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="2dip"
         android:layout_toRightOf="@+id/imgViewLogo"
         android:text="TextView"
         android:textAppearance="?android:attr/textAppearanceLarge"
         android:textColor="#43c6db"
         android:textStyle="bold" >
     </TextView>
 
     <TextView
         android:id="@+id/txtViewDescription"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/txtViewTitle"
         android:layout_marginLeft="2dip"
         android:layout_toRightOf="@+id/imgViewLogo"
         android:text="TextView"
         android:textColor="#000000"
         android:textStyle="bold" >
     </TextView>
 
     <ImageView
         android:id="@+id/imgViewArrow"
         android:layout_width="35dip"
         android:layout_height="35dip"
         android:layout_alignParentRight="true"
         android:layout_marginTop="3dp"
         android:scaleType="fitXY"
         android:src="@drawable/custom_arrow" >
     </ImageView>
 
 </RelativeLayout>

Next, create a res/drawable folder if you don't already have one. This is where we'll define a few more xml files that will make our ListView even more powerful and customized.

listview_background.xml

 This is where we define our background of our list view. This xml file defines a shape object and basically specifies that it will be colored using a gradient. the start, center and end colors. Feel free to play around with this color values as well if you want your background to be a different color. Or maybe you don't want a gradient at all. That's fine. Play around with different values in this file in order to get your list items to look just how you want. 

The <corners> element is what defines the rounded edges of our list items. Remove this if you don't want them to be rounded. I thought it looked cool so that's why I included it in my project.

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle">
 
     <gradient
         android:centerColor="#E6E6E6"
         android:endColor="#CCCCCC"
         android:startColor="#FFFFFF" android:angle="270"/>
     <!--
          <gradient android:startColor="#FF66CFE6" android:centerColor="#FF207FB9" 
         android:endColor="#FF0060B8" android:angle="270"/>
     -->
 
     <stroke
         android:width="2dp"
         android:color="#43c6db" />
 
     <padding
         android:bottom="3dp"
         android:left="3dp"
         android:right="3dp"
         android:top="3dp" />
 
     <corners android:radius="7dp" />
 
 </shape>

selector.xml 

 Now that  we've defined our listview row and it's background style. Let's define a custom selector for when each element in our list is touched.

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle">
 
      <gradient
         android:centerColor="#adff2f"
          android:endColor="#adff2f"
          android:startColor="#adff2f" android:angle="270"/>
      <!--
          <gradient android:startColor="#FF66CFE6" android:centerColor="#FF207FB9" 
         android:endColor="#FF0060B8" android:angle="270"/>
    -->

    <stroke         android:width="2dp"
         android:color="#43c6db" />
 
     <padding
         android:bottom="3dp"
         android:left="3dp"
        android:right="3dp"
        android:top="3dp" />
 
     <corners android:radius="7dp" />
 
 </shape>

list_divider.xml

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 
     <item>
         <shape>
             <gradient
                 android:angle="90"
                 android:endColor="#708090"
                 android:height="2dp"
                 android:startColor="#708090" />
             
             
             <corners android:radius="7dp" />
         </shape>
     </item>
 
 </layer-list>
 

 This is to define our divider between our list elements. The android:height attribute tells us that our space between the list elements will be 2 density independent pixels high. If you don't want the items in your list to have a divider, simply skip creating this file and remove the android:divider tag from the main.xml file that we created above.

If were to run our app now, we should get something like the below result

Ok, so you just set up your project and copied all that code. You define your listview, it's background and even 

 a custom selector. You launched the MainActivity, where's the list?

The ListView contains no elements, you have an empty list. So nothing shows up because you 

didn't feed your list any views to be drawn. We need to do a few more things in order to get our listview up and running.

Let's extract our custom ListView from it's parent in main.xml, inflate it..and fill it with some data.

 This is known as data binding. We'll have to create a custom ListAdapter that will do the binding for us each time our list receives new data.

This is what the MainActivity class should look like as of now

 package com.aquarius.customlistviewproject;
 
 import android.app.Activity;
 import android.os.Bundle;
 
 import android.widget.ListView;
 
 public class MainActivity extends Activity {
 
  ListView albumList;
 
  @Override
  public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
 
   albumList = (ListView) findViewById(R.id.lvAlbumList);
  }
 
 }

We've created a ListView object and then we inflated it using findViewById. 

Next, create another class named ListViewCustomAdapter. The code for that class

looks like this

 package com.jbsoft.TravelAlbums;
 
 import java.util.ArrayList;
 
 
 
 import android.app.Activity;
 import android.content.Context;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.BaseAdapter;
 import android.widget.ImageView;
 import android.widget.TextView;
 
 
 public class ListViewCustomAdapter extends BaseAdapter {
 
  public ArrayList<String> album_names;
 
  public ArrayList<String> photos;
 
  public Activity context;
 
  public LayoutInflater inflater;
 
  public ListViewCustomAdapter(Activity context,
    ArrayList<String> album_names, ArrayList<String> photos) {
   // TODO Auto-generated constructor stub
   super();
   this.context = context;
   this.album_names = album_names;
   this.photos = photos;
 
   this.inflater = (LayoutInflater) context
     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  }
 
  public int getCount() {
   // TODO Auto-generated method stub
   return album_names.size();
  }
 
  public Object getItem(int position) {
   // TODO Auto-generated method stub
   return null;
  }
 
  public long getItemId(int position) {
   // TODO Auto-generated method stub
   return 0;
  }
 
  public class ViewHolder {
   ImageView thumbnail;
   TextView txtViewAlbum;
   TextView txtViewPhotos;
 
  }
 
  public View getView(int position, View convertview, ViewGroup parent) {
   // TODO Auto-generated method stub
 
   ViewHolder holder;
   if (convertview == null) {
    holder = new ViewHolder();
    convertview = inflater.inflate(R.layout.listview_row, null);
 
    
    holder.thumbnail = (ImageView) convertview
      .findViewById(R.id.imgViewLogo);
    holder.txtViewAlbum = (TextView) convertview
      .findViewById(R.id.txtViewTitle);
    holder.txtViewPhotos = (TextView) convertview
      .findViewById(R.id.txtViewDescription);
 
    convertview.setTag(holder);
   }
 
   else
 
    holder = (ViewHolder) convertview.getTag();
 
   holder.thumbnail.setImageResource(R.drawable.imgview_drawable);
   holder.txtViewAlbum.setText(album_names.get(position));
   holder.txtViewPhotos.setText(photos.get(position));
 
   return convertview;
  }
 
 } 

The most important method in this class is the getView() method. It is responsible 

for basically giving us a converView that we can reuse to fill with our data. First, we check

if it's null..and if it is, we attach our default views to it. 

Then we use convertView.setTag(holder) to store our views. If the convertView is not

null, then we get the views that we stored with it and set our data to it.

The final code for the MainActivity class is below.

package com.aquarius.customlistviewproject;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;

import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {

 ListView albumList;
 
 ArrayList<String> albums;
 ArrayList<String> photos;
 
 CustomListViewAdapter adapter;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
     
  albumList = (ListView) findViewById(R.id.lvAlbumList);
  
  
  fillData();
  
  //set up our adapter and attach it to the ListView
  adapter = new CustomListViewAdapter(this, albums, photos);
  albumList.setAdapter(adapter);
 }

 //Fill our arrays with some trivial String data
 private void fillData() {
  
  albums = new ArrayList<String>();
  photos = new ArrayList<String>();
  
  albums.add("Album1");
  albums.add("Album2");
  albums.add("Album3");
  albums.add("Album4");
  albums.add("Album5");
  albums.add("Album6");
  
  photos.add("1 photo");
  photos.add("2 photos");
  photos.add("3 photos");
  photos.add("4 photos");
  photos.add("5 photos");
  photos.add("6 photos");
  
  
 }
 
 
 

}

This should produce the result below. Note that we hardcoded some strings to fill the

ArrayLists, but that you can fill them however you like. Whether you want to get data off a server via XML, JSON or

whatever, just store the strings in an ArrayList and use it the same way. Also, play around 

with the XML files in order to get your listview style to look just how you desire.