Change the background, text color for custom list view on focus and click

Change the background, text color for custom list view on focus and click

In this tutorial we will see how to change the background color on the custom list item, how to change the text style of text view etc.

We will use the same example which we have created in "How to create custom list view in android application" blog.

Once you done with the above custom list creation follow the below steps to achieve this - 

• Create a highlight.png file and put that in drawable folder.
• Create the selector for list item background, text 1 color, and text2 color as shown below under the drawable folder - 

listselector.xml - 

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

    < item android:state_focused="true"

        android:drawable="@drawable/highlight" / >

    < item android:state_pressed="true"

        android:drawable="@drawable/highlight" / >

    < item android:state_selected="true"

        android:drawable="@drawable/highlight" / >

< /selector>

listitemline1_selector.xml - 

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

    < item android:state_focused="true"

        android:color="#0e0c0a"/ >

    < item android:state_pressed="true" android:color="#0e0c0a" /  >

    < item android:state_selected="true" 

        android:color="#0e0c0a" / >

    < item android:color="#b48f53" /  >

< /selector >

listitemline2_selector.xml - 

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

    <item android:state_focused="true"

        android:color="#0e0c0a"/>

    <item android:state_pressed="true" android:color="#0e0c0a"/>

    <item android:state_selected="true" 

        android:color="#0e0c0a"/>

    <item android:color="#725521"/>

selector> 

• Now we need to assign these selector to individual list item and text views created on the hybridlist.xml file as shown below - 

hybridlist.xml - 

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

< LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center_vertical"

    android:descendantFocusability="blocksDescendants"

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

< LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:background="@drawable/listselector"

android:layout_weight="1" >

< TextView

android:id="@+id/text1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="15sp"

android:textStyle="bold"

android:textColor="@drawable/listitemline1_selector" / >

< TextView

android:id="@+id/text2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="11sp"

android:textColor="@drawable/listitemline2_selector" / >

< / LinearLayout>

< / LinearLayout>

• Now run the application and you will see the same output as shown above. Same kind of selector you can apply to any view like Button, ImageView, Spinner etc.