List View with Background selector Color

This is the post used to demonstrate the list view with background selector in android.

Below is the code for android manifest file "AndroidManifest.xml"

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

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

    package="com.example.simplelistview"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="18" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.example.simplelistview.ListViewBgSelector "

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

             

    </application>

</manifest>

Create an android file called "listview_bg_main.xml" under layout folder and add the below code to the file. This code contains list view.

<?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="horizontal"

    android:background="#FFFFFF">

   

    <ListView android:id="@+id/listview_bg_main"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:focusable="true"

        />

</LinearLayout>

Create an android xml file called "listview_bg_selector.xml" under layout folder and add the below code to the file. This code contains a text view and this text view is used to display the list view content.

In the below code “android:text=”@string/list_view” is optional to add in the text view. If user need to add this line also, then string.xml file is required.

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

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

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="@string/list_view"

    android:padding="10dp"

    android:textSize="16sp"

    android:background="@drawable/textbg_gradient_color"

    android:textColor="@drawable/text_color"

    />

Add string.xml file under values directory and below is the code for “string.xml” file.

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

<resources>

    <string name="app_name">simpleListView</string>

    <string name="action_settings">Settings</string>

    <string name="list_view">ListView</string>

</resources>

The above text view uses “android:background=”@drawable/textbg_gradient_color””  for displaying gradient background color of list view content. Add “textbg_gradient_color.xml” file under the drawable folder and below is the code for the xml file.

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

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

      

    <!--  Selected Background Gradient-->

    <item android:state_selected="true">

       <shape>

              <gradient

                  android:angle="90"

              android:gradientRadius="3"

              android:startColor="@color/Dark_Brown"

              android:endColor="@color/Brownish_Orange"

              android:type="radial" />

       </shape>

       </item>

      

   

    <!--  Focused Background Gradient-->

    <item android:state_focused="true">

       <shape>

              <gradient

              android:angle="180"

              android:startColor="@color/Leaves_Green"

              android:endColor="@color/Leaves_Light_Greenish_Yellow"

              android:type="linear" />

       </shape>

       </item>

      

     <!--  Pressed Background Gradient-->

    <item android:state_pressed="true">

       <shape>

              <gradient

              android:angle="225"

              android:startColor="@color/Redish_Orange"

              android:endColor="@color/Light_Orange"

              android:type="linear" />

       </shape>

       </item>

      

    <!--  Normal Background Gradient-->

    <item>

       <shape>

              <gradient

              android:angle="90"               

              android:startColor="@color/Dark_Yellowish_Brown"

              android:endColor="@color/Sandal"

              android:type="linear" />

       </shape>

       </item>

</selector>

Add text_color.xml file under drawable folder and this xml file used to set the color of text. Below is the code for “text_color.xml” file.

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

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

   

    <item android:state_selected="true" android:color="@color/Black" />

    <item android:state_pressed="true" android:color="@color/Black" />

    <item android:state_focused="true" android:color="@color/Yellow" />

    <item android:color="@color/White"/>

</selector>

Add “color.xml” file under values folder and below is the code for color.xml file.

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

<resources>

    <color name="Blue">#0000FF</color>

    <color name="Light_Blue">#ABF0FF</color>

    <color name="Dark_Blue">#00004A</color>

    <color name="Dark_Blue_01">#0C0052</color>

   

    <color name="White">#FFFFFF</color>

    <color name="Black">#000000</color>

    <color name="Yellow">#FFFC40</color>

   

    <!-- Gradient Normal Background Colors  -->

    <color name="Dark_Brown">#732F0A</color>

    <color name="Brownish_Orange">#FF6714</color>

   

    <!-- Gradient for selected background -->

    <color name="Dark_Yellowish_Brown">#B59016</color>

    <color name="Sandal">#FFE48C</color>

   

    <!-- Gradient for focused background -->

    <color name="Leaves_Green">#93A807</color>

    <color name="Leaves_Light_Greenish_Yellow">#E3E37B</color>

   

    <!-- Gradient for pressed background -->

    <color name="Redish_Orange">#FF8400</color>

    <color name="Light_Orange">#FFDD8F</color>

   

</resources>

Create a java file called “ListViewBgSelector.java “ and below is the code for the java file.

package com.example.simplelistview;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.TextView;

import android.widget.Toast;

import android.widget.AdapterView.OnItemClickListener;

public class ListViewBgSelector extends Activity

{

       static final String[] COUNTRIES = new String[] { "Afghanistan", "Albania",

              "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla",

              "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia",

              "Aruba", "Australia", "Austria", "Azerbaijan", "Bahrain",

              "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin",

              "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina",

              "Botswana", "Bouvet Island", "Brazil",

              "British Indian Ocean Territory", "British Virgin Islands",

              "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cote d'Ivoire",

              "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands",

              "Central African Republic", "Chad", "Chile", "China",

              "Christmas Island", "Cocos (Keeling) Islands", "Colombia",

              "Comoros", "Congo", "Cook Islands", "Costa Rica", "Croatia",

              "Cuba", "Cyprus", "Czech Republic",

              "Democratic Republic of the Congo", "Denmark", "Djibouti",

              "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt",

              "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia",

              "Ethiopia", "Faeroe Islands", "Falkland Islands", "Fiji",

              "Finland", "Former Yugoslav Republic of Macedonia", "France",

              "French Guiana", "French Polynesia", "French Southern Territories",

              "Gabon", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece",

              "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala",

              "Guinea", "Guinea-Bissau", "Guyana", "Haiti",

              "Heard Island and McDonald Islands", "Honduras", "Hong Kong",

              "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq",

              "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan",

              "Kazakhstan", "Kenya", "Kiribati", "Kuwait", "Kyrgyzstan", "Laos",

              "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya",

              "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Madagascar",

              "Malawi", "Malaysia", "Maldives", "Mali", "Malta",

              "Marshall Islands", "Martinique", "Mauritania", "Mauritius",

              "Mayotte", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia",

              "Montserrat", "Morocco", "Mozambique", "Myanmar", "Namibia",

              "Nauru", "Nepal", "Netherlands", "Netherlands Antilles",

              "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria",

              "Niue", "Norfolk Island", "North Korea", "Northern Marianas",

              "Norway", "Oman", "Pakistan", "Palau", "Panama",

              "Papua New Guinea", "Paraguay", "Peru", "Philippines",

              "Pitcairn Islands", "Poland", "Portugal", "Puerto Rico", "Qatar",

              "Reunion", "Romania", "Russia", "Rwanda", "Sqo Tome and Principe",

              "Saint Helena", "Saint Kitts and Nevis", "Saint Lucia",

              "Saint Pierre and Miquelon", "Saint Vincent and the Grenadines",

              "Samoa", "San Marino", "Saudi Arabia", "Senegal", "Seychelles",

              "Sierra Leone", "Singapore", "Slovakia", "Slovenia",

              "Solomon Islands", "Somalia", "South Africa",

              "South Georgia and the South Sandwich Islands", "South Korea",

              "Spain", "Sri Lanka", "Sudan", "Suriname",

              "Svalbard and Jan Mayen", "Swaziland", "Sweden", "Switzerland",

              "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand",

              "The Bahamas", "The Gambia", "Togo", "Tokelau", "Tonga",

              "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan",

              "Turks and Caicos Islands", "Tuvalu", "Virgin Islands", "Uganda",

              "Ukraine", "United Arab Emirates", "United Kingdom",

              "United States", "United States Minor Outlying Islands", "Uruguay",

              "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam",

              "Wallis and Futuna", "Western Sahara", "Yemen", "Yugoslavia",

              "Zambia", "Zimbabwe" };

      

              ListView listViewBgSelector = null;

      

              @Override

           protected void onCreate(Bundle savedInstanceState)

           {

               super.onCreate(savedInstanceState);

               setContentView(R.layout.listview_bg_main);

              

               listViewBgSelector = (ListView) findViewById(R.id.listview_bg_main);

               listViewBgSelector.setAdapter(new ArrayAdapter<String>(this, R.layout.listview_bg_selector, COUNTRIES));

              

               listViewBgSelector.setOnItemClickListener(new OnItemClickListener(){

                           @Override

                           public void onItemClick(AdapterView<?> parent, View view, int position,

                                         long id) {

                                  // When clicked, show a toast with the TextView text

                                  Toast.makeText(getApplicationContext(),

                                                ((TextView) view).getText(), Toast.LENGTH_SHORT).show();

                           }

                    

               });

           }

}

Below is the sample output

Listview with backgroung selector.

Listview with background selector selected.