I've created a list view and set up a selector for it so that it has a background on it. I did the same for the list item elements in it.
http://dl.dropbox.com/u/67419/list.png
The list itself is grey and has the dark grey border on the right side. When a list item is activated, I have the background of the list item changed to white via its own selector. However, I can't seem to get the white background to take up the entire space of the listview and it leaves a few pixels to the right (just enough to only show the border from the background). Is there a way to make it extend all of the way? To the right of the list is a white fragment so I want the white from the list item to connect to the white of the fragment.
my list_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_activated="true"
android:drawable="#color/white" />
<item android:state_selected="true"
android:drawable="#color/grey" />
<item android:state_pressed="true"
android:drawable="#color/grey" />
</selector>
and my list_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/rightborder" />
</selector>
Have you tried: android:constantSize="true" in the selector attributes?
Related
I'm trying to achieve something similar to this image, where the selected navigation drawer item has a rounded rectangular background, but I can't seem to find the code that does this. This is from Android Studio's pre-made "Navigation Drawer" Activity.
For reference, here's what the default drawer selected item background looks like.
I tried creating a custom drawer_selected_item xml and drawer_item_bg xml, but I couldn't figure out how to adjust margins if I did it this way. The background width stretches across the entire drawer width, unlike the first image.
drawer_selected_item.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/drawer_item_bg" android:state_checked="true" />
<item android:drawable="#android:color/transparent" />
</selector>
drawer_item_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/purple_200" />
<corners android:radius="45dp" />
</shape>
I have a ListView and each row uses a custom background color. I'd like to ensure that the default highlight is shown when the user touches a row, so I've defined a drawable with a selector, like this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/clear" android:state_selected="true"/>
<item android:drawable="#color/clear" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#color/clear" android:state_pressed="true"/>
<item android:drawable="#color/white"/>
</selector>
</item>
</ripple>
At first glance, it seems to work. However, if I scroll to a row that wasn't previously on the screen, the first time I tap the row, I don't get a ripple. But then if I tap it again, I do see the ripple. If I scroll the row off the screen and then back on again, same thing keeps happening.
Any ideas??
Thanks!!
I want to create a button animation like nexus back button in below image.
When it's clicked, it's highlighted with oval shape and then bending the transparency of background color smoothly.
Approximately similar effect you can achive by selector like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="false" android:state_focused="true" android:drawable="#color/red" />
<item android:state_pressed="true" android:drawable="#color/dark_red" />
<item android:drawable="#color/red" />
</selector>
add this selector as bg_selector.xml in your res/draweble folder.
And then set it is as background of TextView(or other View):
android:background="#drawable/bg_selector"
P.S: All magic in android:exitFadeDuration
I cannot wrap my head around this, I want to set the initial background color of my list view items to grey, but they only take the right background color after I have selected them (and deselected) the first time. Which attributes are not configured properly in the first item definition?
<?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/red"/>
</selector>
Also tried to set the background of the list view item directly, but then the selector does not have any effect anymore.
For list items define a selector drawable:
res/drawable/list_item_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:state_pressed="true" android:drawable="#color/red" /> <!-- Pressed state -->
<item android:state_enabled="true" android:state_focused="true" android:drawable="#color/black" /> <!-- Focused state -->
<item android:state_enabled="true" android:state_selected="true" android:drawable="#color/orange" /> <!-- Selected state -->
<item android:drawable="#color/gray" /> <!-- Default state -->
</selector>
Set the above drawable as background for individual list item:
res/layout/list_item.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="?android:attr/listPreferredItemHeight"
android:background="#drawable/list_item_background" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listitem" />
</LinearLayout>
Use the above custom layout for creating the list items:
String[] mStrings = {"One", "Two", "Three", "Four"};
ListView list = (ListView) rootView.findViewById(R.id.list);
list.setAdapter(new ArrayAdapter<String>(this.getActivity(), R.layout.list_item, R.id.listitem ,mStrings));
I would suggest trying with the following definition:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/red"/>
<item android:drawable="#color/grey" />
</selector>
State List Drawables try matching in order. If you want a "default" drawable for many cases, it should be the last one, with no state flags. From docs:
During each state change, the state list is traversed top to bottom
and the first item that matches the current state is used—the
selection is not based on the "best match," but simply the first item
that meets the minimum criteria of the state.
Also tried to set the background of the list view item directly, but then the selector does not have any effect anymore.
If I am not mistaken, selector is drawn behind the list item(by default). Since you set solid grey color to your list item, the red color from the selector doesn't show. You can confirm this by changing the way you have defined #color/grey - try adding a low alpha value to it. In this case the red color should come through.
You can of course change this behavior by setting android:drawSelectorOnTop="true" - default is false. The list item will however be hidden when the selector is drawn on top.
Anyway - from what you have said, you want the items to have #color/red background when pressed and #color/grey background otherwise.
See if the following satisfies your requirements:
Selector drawable for list item views:
<?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:color/transparent"/>
<item android:drawable="color/grey" />
</selector>
For the listSelector attribute, only provide the color value:
<ListView
....
....
android:listSelector="#color/red" >
</ListView>
In a few words, the item background color is transparent when the list item is pressed - allowing the listSelector red color to be visible. In all other cases, the grey color is visible.
You need to create a listselector.xml under your drawable folder
<?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="#drawable/gradient_bg" />
<item android:state_pressed="true"
android:drawable="#drawable/gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg_hover" />
</selector>
Then inside your listview add :
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:listSelector="#drawable/listselector" />
The selector should be similar to the one below:
List_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg" />
<item android:state_pressed="true"
android:drawable="#drawable/gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg_hover" />
</selector>
Then in the drawables folder, you need to create the following 2 files:
gradient_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#cfcfcf"
android:centerColor="#737374"
android:endColor="##3e3e3e"
android:angle="270" />
</shape>
gradient_bg_hover.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#7f0000"
android:centerColor="#660000"
android:endColor="#4c0000"
android:angle="270" />
</shape>
Finally, in the listview, you need to add the following line of code:
android:background="#drawable/list_selector"
Hope this helps :)
The following problem is driving me crazy. I've defined an xml fragment, using this code:
<fragment class="host.helperclass.ServiceListFragment"
android:id="#+id/titles"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="0px"/>
Then I've implemented ServiceListFragment class which extends SherlockListFragment.
I've overridden the onActivityCreated method, with this code:
getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
getListView().setDividerHeight(2);
getListView().setBackgroundColor(Color.parseColor("#EEEEEE"));
getListView().setCacheColorHint(Color.parseColor("#00000000"));
getListView().setSelector(R.drawable.list_selector);
Where list_selector.xml is very simple:
<?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/green"/>
<item android:state_focused="true"
android:drawable="#drawable/green"/>
<item android:state_selected="true"
android:drawable="#drawable/green"/>
</selector>
But the green background for an item is added only when I press the button. When I release it the green background is removed. It seems like the state_selected is not recognized.
Is this possible? If so, is there any way for enable the selection of items inside ListView?
NOTE:
I've also tried to use a selctor with only one item:
<item android:state_focused="true"
android:drawable="#drawable/green" />
And as result I obtaint that, when I press the ListView item the background become green, but when I release it the green background is removed. It seems that my item lost focus when I pull off my finger from item.
EDIT:
I have made another attempt.
I've added inside the onListItemClick method this line of code:
getListView().setItemChecked(index, true);
and in my xml selector I have put only this item:
<item android:state_checked="true"
android:drawable="#drawable/green" />
But strangely this does not work.
I believe the correct state for single choice mode is android:state_activated.
I noticed you are using the selector for the list.
You should use it as the background of the list row (the one you use in the adapter).
For example:
row_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true"
android:drawable="#drawable/green"/>
</selector>
row_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/row_background">
<!-- your views -->
</LinearLayout>
Try this.
Add this item to selector
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/green" />
and remove
<item android:state_selected="true"
android:drawable="#drawable/green"/>
I found the problem.
Defining the xml layout for the row used in the custom adapter, I needed to add this row, to the root element:
android:background="?android:attr/activatedBackgroundIndicator"
But, the attribute activatedBackgroundIndicator has been introduced since API level 11, so I have put the previous version of my xml in layout folder, and the new one in the layout-v11 folder.
Also the following statement is required, inside the onListItemClick method:
getListView().setItemChecked(position, true);