Android App Development 201 4th tutorial; Android and Custom ListViews

In this tutorial, we will take a look at Custom ListViews in android. Android offers several default listviews, however those are not sufficient to achieve custom design. We will create a simple custom listview. Every ListItem row in our listview will have an ImageView and a TextView. The views can be added by adding new items in our custom list item layout. For this project we will have an Activity where ListView is shown and a class that extends BaseAdapter where out list items are inflated. For the images we will use some default android media drawables and the TextView will show the name of the drawable. We will make two arrays containing these item. We will have two layouts, one for the Activity with ListView and another for the ListItem. Here are the layouts

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

  >





<ListView

    android:id="@+id/listview"

    android:layout_height="wrap_content"

    android:layout_width="match_parent"

/>

</LinearLayout>

listviewitems.xml

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout 

    android:id="@+id/relativeLayout1" 

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent" 

    xmlns:android="http://schemas.android.com/apk/res/android" 

    android:padding="5dip"> 

    

    <ImageView 

        android:id="@+id/image"

        android:layout_width="wrap_content" 

        android:layout_height="wrap_content" 

        android:layout_alignParentLeft="true" 

        android:layout_centerInParent="true"

        android:layout_marginLeft="5dip"

        android:layout_marginRight="5dip"

        android:scaleType="centerInside"> 

    </ImageView> 

    

    <TextView 

        android:textAppearance="?android:attr/textAppearanceLarge" 

        android:layout_height="wrap_content" 

        android:layout_width="wrap_content" 

        android:id="@+id/textView" 

     android:layout_toRightOf="@+id/image"

        android:layout_marginRight="5dip"> 

    </TextView> 

      



</RelativeLayout>

As you can see the list item layout contains out ImageView and TextView for each list item in the ListView and the main layout has a ListView.

MainActivity.java

package com.peshal.customlistviewtest;





import java.util.ArrayList;

import java.util.List;

import android.os.Bundle;

import android.widget.ListView;

import android.app.Activity;



public class MainActivity extends Activity {



int cnt=0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ListView lv = (ListView)findViewById(R.id.listview);

List<ListViewItems> items = new ArrayList<MainActivity.ListViewItems>();

final String[] texts = {"play", "pause", "previous", "next",  "forward", "rewind"};

final int[] resourceColl = {android.R.drawable.ic_media_play, android.R.drawable.ic_media_pause, android.R.drawable.ic_media_previous, android.R.drawable.ic_media_next, android.R.drawable.ic_media_ff, android.R.drawable.ic_media_rew};

while(cnt<texts.length) {

items.add(new ListViewItems(){{

bitmap = resourceColl[cnt];

text = texts[cnt];

cnt++;

}});

}

cnt=0;

CustomListViewAdapter adapter = new CustomListViewAdapter(this, items); 

lv.setAdapter(adapter);



}

class ListViewItems {

public int bitmap;

public String text;

}





}

CustomListViewAdapter.java

package com.peshal.customlistviewtest;



import java.util.List;



import com.peshal.customlistviewtest.MainActivity.ListViewItems;



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 CustomListViewAdapter extends BaseAdapter

{ 



LayoutInflater inflater;

List<ListViewItems> items;



    public CustomListViewAdapter(Activity context, List<ListViewItems> items) { 

        super();



        this.items = items;

        this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

  

    @Override 

    public int getCount() { 

        return items.size(); 

    } 



    @Override 

    public Object getItem(int position) { 

        return null; 

    } 



    @Override 

    public long getItemId(int position) { 

        return 0; 

    }

    

    @Override 

    public View getView(final int position, View convertView, ViewGroup parent) { 

    ListViewItems item = items.get(position);

    View vi=convertView;

        

        if(convertView==null)

            vi = inflater.inflate(R.layout.listviewitems, null);

          

        ImageView imgView = (ImageView)vi.findViewById(R.id.image);

        TextView textView = (TextView)vi.findViewById(R.id.textView);



        imgView.setImageResource(item.bitmap);

        textView.setText(item.text);

        return vi; 

    }



}