Android ListView with Alternate list item background and hover.

Now i will show how to make a ListView with Alternate color i.e for odd position having different background and for even position of  List item having different background as well as different hover color.

Screenshots:-

These are the following steps to do show.

Step1.1) Use two selector for odd and even postion list item

artists_list_backgroundcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@color/grey" />
<item android:state_pressed="true"
    android:drawable="@color/itemselected" />
<item android:state_selected="true"
 android:state_pressed="false"
    android:drawable="@color/itemselected" />
</selector>


Step 1.2)
artists_list_background_alternate.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@color/sign_out_color" />
<item android:state_pressed="true"
    android:drawable="@color/login_hover" />
<item android:state_selected="true"
 android:state_pressed="false"
    android:drawable="@color/login_hover" />
</selector>

Step2)
colors.xml

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

    <color name="survey_toplist_item">#EFEDEC</color>
    <color name="survey_alternate_color">#EBE7E6</color>
    <color name="grey">#ffffff</color>
    <color name="itemselected">#EDEDED</color>
    <color name="login_hover">#E5F5FA</color>
    <color name="sign_out_color">#e84040</color>

</resources>

Step 3.1)
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp" />

</RelativeLayout>

Step3.2) res/layout/listitem,xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/heading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:padding="15dp" />

</LinearLayout>

Step4)
MainActivity.java

package com.amit.listalternate;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ListView;

public class MainActivity extends Activity {
    private List<String> data;
    ListAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        data = new ArrayList<String>();
        fillData();
        adapter = new ListAdapter(this, data);
        ListView lvMain = (ListView) findViewById(R.id.list);
        lvMain.setAdapter(adapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    void fillData() {
        for (int i = 1; i <= 20; i++) {
            data.add("Heading" + i);
        }
    }

}

Step 5) Adapter
ListAdapter.java



package com.amit.listalternate;

import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ListAdapter extends BaseAdapter{
    Context ctx;
    LayoutInflater lInflater;
    List<String> data;

    ListAdapter(Context context, List<String> data) {
        ctx = context;
        this.data = data;
        lInflater = (LayoutInflater) ctx
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public Object getItem(int position) {
        return data.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = convertView;
        if (view == null) {
            view = lInflater.inflate(R.layout.listitem, parent, false);
        }

        if (position % 2 == 0) {
            view.setBackgroundResource(R.drawable.artists_list_backgroundcolor);
        } else {
            view.setBackgroundResource(R.drawable.artists_list_background_alternate);
        }

        ((TextView) view.findViewById(R.id.heading)).setText(data.get(position));
       
        return view;
    }
}

Download full source code click ListViewWithAlternateColor