Android: Items in lists not turning orange when clicked?

Question

I have a ListView in my app's code, which when clicked uses an AdapterView.OnItemClickListener to detect clicks. The problem is, when I click on an item , that item's background turns to white, instead of the default orange. Like this: enter image description here

Also, when I dont use AdapterView, the clicked items turn orange without any problem. How do I make the clicked item's background orange again?

EDIT:

layout of list: main.xml

    <?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    tools:context=".MainActivity" 
    android:background="#00000000">


        <!-- ListView (grid_items) -->

        <ListView android:id="@+id/listview"
            android:layout_height="fill_parent"
            android:textSize="15px"
            android:layout_width="fill_parent"
            android:background="#00000000">
        </ListView>

</RelativeLayout>

onCreate():

public void onCreate(Bundle savedInstanceState) {try{
    super.onCreate(savedInstanceState);


    setContentView(R.layout.main);
    lv= (ListView)findViewById(R.id.listview);
    lv.setBackgroundColor(Color.TRANSPARENT);
    lv.setCacheColorHint(Color.TRANSPARENT);
    //......calculations
    for(int q = 0; q <v; q++){
        HashMap<String, String> map = new HashMap<String, String>();
        map.put("col_1", array[q]);
        fillMaps.add(map);
        lv.setOnItemClickListener(onListClick);
    }
    //......calculations
    }

AdapterView:

private AdapterView.OnItemClickListener onListClick=new AdapterView.OnItemClickListener(){

public void onItemClick(AdapterView<?> parent,View view, int position, long id)
{

lv.setBackgroundColor(Color.TRANSPARENT);
lv.setCacheColorHint(Color.TRANSPARENT);
//.....calculations
}

Custom theme being used:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomWindowTitleBackground">
        <item name="android:background">#323331</item>
    </style>

    <style name="CustomTheme" parent="android:Theme">
        <item name="android:windowTitleSize">35dip</item>
        <item name="android:windowTitleBackgroundStyle">@style/CustomWindowTitleBackground</item>
    </style>
</resources>

@KaranMer It is a custom theme, I have added code in the question. — vergil corleone, Jun 02 '13 at 18:46
this `android:windowTitleBackgroundStyle` The style resource to use for a window's title area. I think not what you want — karan, Jun 02 '13 at 19:17
@karan Mer I am using a custom title bar, it is done on purpose. — vergil corleone, Jun 02 '13 at 19:20
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31078/discussion-between-karan-mer-and-vergil-corleone) — karan, Jun 02 '13 at 19:27

score 8 · Accepted Answer · edited Sep 14 '13 at 19:01

The best way to customize list view items is to create them in an xml file and then, using a BaseAdapter or whatever kind of list adapter, inflate that .xml layout and fill up with your data. In order to customize a highlight animation, all you need is to create a state Drawable for the different states of an item.

So you go to a "New xml file" -> "resource type drawable" -> "shape" name it and finish you'll see this piece of code:

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


</shape>

Let's create a background for a ListItem pressed state:

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

    <solid android:color="#86d47f" this is your custom color />  

</shape>

and non-pressed state is another file:

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

    <solid android:color="#00000000" />

</shape>

then a list-selector file that will be used as a background of a listview item: go to "new xml file"->"drawable"->"list selector" name it as "item_background"->finish

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"  android:exitFadeDuration="300"  !!this is the fade duration time for your animation>

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

</selector>

then create an xml file for an item, customize it as you want, but for the main layout set

android:background="@drawable/item_background"

here you go, everything works perfect... here is my adapter class:

public class ListAdapter extends ArrayAdapter<String> {
LayoutInflater inflater;

public ListAdapter(Context context, int textViewResourceId,
        List<String> objects) {
    super(context, textViewResourceId, objects);
    inflater = LayoutInflater.from(context);

}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    String str_value = this.getItem(position);
    if (convertView == null) {
        convertView = inflater.inflate(R.layout.list_item, null);
    }
    TextView tv = (TextView) convertView.findViewById(R.id.textView1);
    tv.setText(str_value);
    return convertView;
}

}

and here you are, supposed you'll mark it as an answer.. list

At line `` , what is the hex for android's default orange color? — vergil corleone, Jun 06 '13 at 06:54
In the line `android:exitFadeDuration="300"`, what is the fade duration for android's default click animation? — vergil corleone, Jun 06 '13 at 20:39
Can you elaborate `then create an xml file for an item,`. I added `android:background="@drawable/item_background"` to the ListView, but the problem remains. — vergil corleone, Jun 06 '13 at 20:59
you got to create a layout for your listView item. You got to create an .xml file with a layout and any widgets you need. The, in adapter you gonna inflate that layout and use it as listView items. I gave you a link to the article, where the mechanism of doing it is described — Alex, Jun 07 '13 at 06:04

score 0 · Answer 2 · answered Jun 03 '13 at 10:01

0

so one simple solution is to ste the Color of the View istself in the onClicklistenener itself:

private AdapterView.OnItemClickListener onListClick=new 
AdapterView.OnItemClickListener(){

public void onItemClick(AdapterView<?> parent,View view, int position, long id)
{

   lv.setBackgroundColor(Color.TRANSPARENT);
   lv.setCacheColorHint(Color.TRANSPARENT);
   // I added this
   if(is the item checked ){
      view.setBackgroundColor(Color.BLUE); //or whatever
   }else{
      view.setBackgroundColor(00000000);
   }
   //.....calculations
}

You will need to hold the Information about weather the item is checked or not.

If you what do not want to use the onClickListener but use only styles (which might be the preferable way), I cannot help you furher for the moment.

Edit: By the way I can't see why yout do this in th onClickListener every time:

lv.setBackgroundColor(Color.TRANSPARENT);
lv.setCacheColorHint(Color.TRANSPARENT);

Hope this helps anyway.

answered Jun 03 '13 at 10:01

slevon

329
2
9

Thanks for the answer. How to check whether item is checked or not? And what is view in `view.setBackgroundColor()`? – vergil corleone Jun 03 '13 at 18:12
1

The _view_ is the ListItem that was acutally clicked. On how to check if the item was selected or not, try reading: http://stackoverflow.com/questions/8463373/android-cant-get-listview-item-selected – slevon Jun 04 '13 at 08:44
There is a problem. The default orange highlighting is actually an animation, not a color. And I'll like to point one thing out: Look at the screenshot in the question. `Alabama` is selected and its background is white, but look at the top edge of `Alabama`, there is some orange visible. That's probably the click animation! Does this give you any idea on what might be wrong? – vergil corleone Jun 04 '13 at 09:35

score 0 · Answer 3 · answered Jun 07 '13 at 11:07

Try this to set any custom selector:

In 'styles.xml' create this style:

<style name="MyList">
        <item name="android:drawSelectorOnTop">true</item>
        <item name="android:listSelector">@drawable/my_list_selector</item>
</style>

And in your layout just add this style to the ListView:

<ListView
....
style="@style/MyList"
.... />

And in 'drawable' you can define the 'my_list_selector' with your desired color or Image:

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

    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/state_pressed" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape>
            <solid android:color="@color/state_focused" />
        </shape>
    </item>
    <item android:drawable="@android:color/transparent" />

</selector>

Add these color values to your 'colors.xml' :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="state_pressed">#BB7dbcd3</color>
    <color name="state_focused">#777dbcd3</color>
    <color name="transparent">#00000000</color>
</resources>

score 0 · Answer 4 · answered Jun 09 '13 at 09:43

I had a file called list_selector_background_longpress.9 inside my drawable folder, which had a white photo with an orange line on top. So I changed it with a picture of holo_orange_dark color, and that solved it. What a stupidly simple solution for such a problem.

Android: Items in lists not turning orange when clicked?

4 Answers4