Android CustomListView item higlhight on click

Question

I want to highlight item clicked on custom listview. I tried different options but not of them are working. Can someone tell me what's wrong?

my custom listview com.foo.ViewEditListView extends ListView implements android.widget.AdapterView.OnItemLongClickListener

list_layout.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:layout_alignParentBottom="true"
    android:orientation="vertical"
     >

    <TextView
        android:id="@+id/textView_list_info"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        >
    </TextView>

     <EditText
         android:id="@+id/searchQueryText"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="left"
         android:drawableRight="@drawable/search"
         android:hint="Search Expenses by Amount"        
         android:textColorHint="#5e8e19"
         android:inputType="numberSigned|numberDecimal"
         style="@android:style/TextAppearance.Small"         
          >

        </EditText>

     <com.foo.ViewEditListView
        android:id="@+id/viewExpenseListView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:background="@/drawable/list_selector_bg" //doesn't work
         />

</LinearLayout>

list_row.xml 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@/drawable/list_selector_bg" //doesn't work
    >

 <RelativeLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"

     >

  <TextView
        android:id="@+id/v_row_field1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:textSize="14sp"
        android:textStyle="bold"
        android:textColor="#C11B17"
        android:layout_alignParentLeft="true"
        />


    <TextView
        android:id="@+id/v_row_field2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:textStyle="bold"
        android:layout_marginRight="2dp" />

  </RelativeLayout>  

</LinearLayout>



list_selector_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:state_pressed="true"
    android:drawable="@android:drawable/list_selector_background" />      


</selector>

I also tried to setSelector in Activity but none of them are working. Right now, i am clueless. Can someone help me here?

If i put android:background="@/drawable/list_selector_bg" into RelativeLayout, it highlights only that portion. But i want whole layout to be highlighted.

Thanks CP

Answer 1

Have custom drawable set as background for the layout. Modify the below according to your needs. When pressed you will have different background and on release will return to the default state.

In your list_row.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:layout_alignParentBottom="true"
android:background="@drawable/listbkg" // set backcground
android:orientation="vertical"
 >
....
</LinearLayout>

listbkg.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" 
    android:drawable="@drawable/pressed" /> //pressed state
<item  android:state_focused="false" 
    android:drawable="@drawable/normal" /> // normal state
</selector>

pressed.xml in drawable fodler

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="#FF1A47"/>     //background color 
<stroke android:width="3dp"          // border color
        android:color="#0FECFF"/>
<padding android:left="5dp"
         android:top="5dp"
         android:right="5dp"
         android:bottom="5dp"/> 
<corners android:bottomRightRadius="7dp"  //for rounded corners    
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp"
         android:topRightRadius="7dp"/> 
</shape> 

normal.xml in drawable folder

 <?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="#FFFFFF"/>    //  change olor
<stroke android:width="3dp"   // for border color
        android:color="#0FECFF" />

<padding android:left="5dp"
         android:top="5dp"
         android:right="5dp"
         android:bottom="5dp"/> 
<corners android:bottomRightRadius="7dp"// for rounded corners
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp"
         android:topRightRadius="7dp"/> 
</shape>

Edit:

You can also include gradient as you can see the same in the snap shot.

In getView() of custom adapter

     convertView =mInflater.inflate(R.layout.list_row, parent,false);
     // inflating custom layout

Then in list_row.xml set the background for the root layout.

Resulting Snap Shot

When pressed it highlights the layout and on release will go back to normal state.

Answer 2

1) If you want highlight selected items you can handle it by using your CustomAdapter. But it's not very good way:)

2) I think, the best way is use common Android implementation of Checkable interface for your view (as example):

public class CheckableFrameLayout extends FrameLayout implements Checkable {
    private boolean mChecked;

    public CheckableFrameLayout(Context context) {
        super(context);
    }

    public CheckableFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setChecked(boolean checked) {
        mChecked = checked;
        setBackgroundDrawable(checked ? new ColorDrawable(0xff0000a0) : null);
    }

    public boolean isChecked() {
        return mChecked;
    }

    public void toggle() {
        setChecked(!mChecked);
    }
}

OR

3) Use CheckedTextView

You can found example in Android Samples named as ApiDemos (ListView with multichoice).

UPDATE: Don't forget that your ListView must have ChoiceMode != ListView.CHOICE_MODE_NONE

Put CheckableFrameLayout into your package and rewrite your list_row.xml like this:

<com.foo.CheckableFrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/list_selector_bg"
    >

 <RelativeLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     >

  <TextView
        android:id="@+id/v_row_field1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:textSize="14sp"
        android:textStyle="bold"
        android:textColor="#C11B17"
        android:layout_alignParentLeft="true"
        />


    <TextView
        android:id="@+id/v_row_field2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:textStyle="bold"
        android:layout_marginRight="2dp" />

  </RelativeLayout>  
</com.foo.CheckableFrameLayout>

If you want get states for your CheckableFrameLayout from statelist (be setting it to background), then you need to override your list_selector_bg.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@android:drawable/list_selector_background" />
</selector>

And rewrite CheckableFrameLayout for working with it. I have not done it correctly in haste (I don't know why it change highlight correctly only afer second tap). But you can take this code and improve it (maybe using code of CheckedTextView can help you):

public class CheckableFrameLayout extends FrameLayout implements Checkable {
    private static final int[] CHECKED_STATE_SET = {
        android.R.attr.state_checked
    };

    private boolean mChecked;

    public CheckableFrameLayout(Context context) {
        super(context);
    }

    public CheckableFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected int[] onCreateDrawableState(int extraSpace) {
        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (isChecked()) {
            mergeDrawableStates(drawableState, CHECKED_STATE_SET);
        }
        return drawableState;
    }

    @Override
    public void setChecked(boolean checked) {
        mChecked = checked;
        // setBackgroundDrawable(checked ? new ColorDrawable(0xff0000a0) : null);
    }

    @Override
    public boolean isChecked() {
        return mChecked;
    }

    @Override
    public void toggle() {
        setChecked(!mChecked);
    }
}