Lollipop RippleDrawable vs Selector for Pre-Lollipop - android

I have buttons with different draw9patch png as background. Currently the buttons are controlled by selector which look something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/disabled" android:state_enabled="false"/>
<item android:drawable="#drawable/focused" android:state_focused="true"/>
<item android:drawable="#drawable/default"/>
</selector>
For the Android Lollipop they have a RippleDrawable for the touch effect, which goes something like this:
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight">
<item>
...
</item>
</ripple>
Regarding the new touch ripple effect:
1: Can I set draw9patch as background for RippleDrawable?
2: How do I accomodate the above two different xml's I want to follow Material design? Do I have to fork out a new folder/layout xml for the new RippleDrawable?

1) Yes. See the documentation for RippleDrawable for more details on how layers are composited, but basically you want:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:drawable="#drawable/yourninepatch" />
</ripple>
Or to also handle the disabled state in a clean way, you might want:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item>
<selector>
<item android:state_enabled="false">
<nine-patch
android:src="#drawable/yourninepatch"
android:alpha="?android:attr/disabledAlpha" />
</item>
<item>
<nine-patch android:src="#drawable/yourninepatch" />
</item>
</selector>
</item>
</ripple>
2) Yes, you should place your ripple XML in drawable-v21.

Related

Creating a transparent selector for button and shape

I tried to create a selector for my button, using the the following XML codes...
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="true">
<item android:drawable="#drawable/rectangular_transparent" android:state_enabled="true"></item>
<item android:drawable="#drawable/rectangular_grey" android:state_pressed="true"></item>
</selector>
this is the rectangular gray shape I have defined...
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/grey"/>
<stroke android:color="#android:color/transparent"/>
<corners android:radius="1dp"/>
</shape>
and this is the rectangular transparent shape I have defined...
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/transparent"/>
<stroke android:color="#color/grey" android:width="#dimen/_1sdp"/>
<corners android:radius="1dp"/>
</shape>
When I run it into my device, it shows only transparent button but it doesn't change color when i press...
The same approach works when I try to use with other color than transparent, please help...
The order of items in a selector is important. It always picks the first one that applies. So you should swap those items.
In your case, the button is always enabled, no matter what pressed state is, so it always picks the first item.
You need to use selector in right way :
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="true">
<item android:drawable="#drawable/rectangular_transparent" ></item>
<item android:drawable="#drawable/rectangular_grey" android:state_pressed="true"></item>
or
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="true">
<item android:drawable="#drawable/rectangular_transparent" android:state_pressed="true"></item>
<item android:drawable="#drawable/rectangular_grey"></item>

How to highlight pressed items in a ListView?

I am using this code below, but it doesn't work properly: If I select an item, the background is changed. But the background change also if I put only focus on the item without selecting it. Why ?
Added to my listview:
android:listSelector="#drawable/bg_key"
#drawable/bg_key
<?xml version="1.0" encoding="utf-8"?>
<selector
android:id="#+id/myselector"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_activated="false"
android:drawable="#color/activated_color" />
</selector>
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="activated_color">#1d1d1d</color>
</resources>
You can highlight/provide ripple effect to your list items using the following :
Create a selector item_ripple.xml in your drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#color/activated_color"></solid>
</shape>
</item>
<item >
<shape>
<solid android:color="#android:color/transparent"></solid>
</shape>
</item>
</selector>
Create a selector item_ripple.xml in your drawable-v21
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/activated_color">
<item
android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
You need to add these selector as background of your item layout :
android:background="#drawable/item_ripple"
You can use pressed state in your selector file
/drawable/list_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/holo_red_light" android:state_pressed="true"/>
</selector>
then set following attribute in your listView
android:listSelector="#drawable/list_selector"

Android background that ripples when pressed, but solid color when selected?

I'm trying to create a drawable that ripples when it's pressed, but when view.setSelected(true) is called, it holds a solid color for a background.
The following file is placed in my drawable-v21 folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<color android:color="#color/green_primary" />
</item>
<item android:state_pressed="true">
<ripple android:color="#color/green_primary">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/green_selected" />
</shape>
</item>
</ripple>
</item>
</selector>
I've tried the above, and it holds a solid background when it's selected, but there isn't a ripple effect, rather just kind of a fade-in effect. If I just have the ripple with no selector, it ripples correctly when pressed, but obviously then I don't have a selected state. How could I have both baked into a single background drawable?
What you need to do is:
1. Create a ripple_effect.xml file in drawable-v21 folder
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/green_primary">
<item android:drawable="#drawable/green_primary"/>
</ripple>
2. Create button_selector.xml file in drawable folder to set the selected state color.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#color/green_selected"/>
<item android:drawable="#drawable/ripple_effect"/>
</selector>

Selectable/Highlightable List Item with custom background

I have a ListView item which has a set background. This overrides the default blue highlight that appears when the item is pressed/selected. Is there a way to have both the background and the selector?
This is my attempt at merging both a background and selector...
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/red"/>
</selector>
<item>
<shape
android:dither="true"
android:shape="rectangle" >
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape
android:dither="true"
android:shape="rectangle" >
<corners android:radius="6dp" />
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
This is in my drawable folder, and I set it with this in my ListItem xml:
android:background="#drawable/my_background
To have a custom background and the default selector effect (another drawalbe when pressed / selected) is a little difficult, after a few tries, I made it.
You should define two selectors in separated xml file: listitem_background.xml and listitem_selector.xml.
The first one is used to the background of the list item, it will make the effect when the item is pressed and in normal state.
The second one is used to the selector of the list, it will get rid of the default selector of the list view by setting all the state to transparent.
The default selector effect is defined in the first xml file: listitem_background.xml.
First you need a xml file to define some drawable color: color_drawable.xml, in res/values directory:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- The color of the normal state. -->
<drawable name="listitem_normal">#E671B8</drawable>
<!-- The two color below show when the item is pressed, you should change that to the color you want. -->
<drawable name="listitem_pressed">#e7eeab</drawable>
<drawable name="listitem_selected">#e7eeab</drawable>
</resources>
Then, listitem_background.xml in res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/listitem_pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:drawable="#drawable/listitem_selected" android:state_enabled="true" android:state_focused="true"/>
<item android:drawable="#drawable/listitem_selected" android:state_enabled="true" android:state_selected="true"/>
<item android:drawable="#drawable/listitem_normal"/>
</selector>
and, listitem_selector.xml in res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/android:transparent" android:state_enabled="true" android:state_pressed="true"/>
<item android:drawable="#color/android:transparent" android:state_enabled="true" android:state_focused="true"/>
<item android:drawable="#color/android:transparent"/>
</selector>
set listitem_background to listitem:
<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:background="#drawable/listitem_background" >
...
</RelativeLayout>
set listitem_selector to listview:
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:listSelector="#drawable/listitem_selector" />
Seeing as this is getting a bit of attention again, I will post the solution I found (which I had previously mentioned in a comment):
I found android:drawSelectorOnTop="true" in the ListView solved the problem.
Just use of this in ListView to match the color combination
android:cacheColorHint="#e7eeab"

Is there a way to set drawable's Alpha using XML?

Easy like itself . I wanna make an alpha button , which would have a selected drawable this way:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:state_selected="false" android:drawable="#drawable/item" />
<item android:state_selected="true" android:drawable="#drawable/item" />
</selector>
I would wanna make something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:alpha="125" android:state_selected="false" android:drawable="#drawable/item" />
<item android:alpha="255" android:state_selected="true" android:drawable="#drawable/item" />
</selector>
Thanks for all .
It's been a while since the OP, but personally found a solution that worked a lot better for me than the suggested answers. Creating a BitmapDrawable makes is easily possible to set the alpha:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_drawble"
android:alpha="77">
</bitmap>
Alpha can be any value between 0 and 255. Note that it is sort of the inverse of the HEX color value alpha, as for example 70% alpha would be B3 in HEX and 77 in the BitmapDrawable.
I achieved the same using a drawable
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#5000ddff" />
</shape>
Over here used the alpha 50, which sets the opacity level.
I have been looking for the same thing. Even though this is posted over four years ago, this is the top post when googling the issue, so I'll reply here.
This is my solution
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<bitmap android:alpha="#integer/not_pressed_alpha" android:src="#drawable/item"/>
</item>
<item android:state_pressed="true" android:drawable="#drawable/item" />
</selector>
For those who have the same problem as OP, AppCompat now allows you to set 'alpha' parameter, as he wished in his target code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:alpha="125" android:state_selected="false" android:drawable="#drawable/item" />
<item android:alpha="255" android:state_selected="true" android:drawable="#drawable/item" />
</selector>
More info here.
My goal was to make a button have it's selected and pressed states at a different alpha - but using the same (png) resource and affecting as few files as possible.
My solution is similar to altering the alpha in a BitmapDrawable - but it does it from the selector so only one file is affected.
Use the tint function of Bitmap, remember that the tint will color the existing pixels so use a white color.
Eg, #80FFFFFF - to keep color as original but reduce alpha by 50%
This could also be used to change color of the icon when pressed.
This is my drawable XML file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<bitmap
android:src="#drawable/ic_camera"
android:tint="#80FFFFFF">
</bitmap>
</item>
<item android:state_pressed="true">
<bitmap
android:src="#drawable/ic_camera"
android:tint="#80FFFFFF">
</bitmap>
</item>
<item>
<bitmap
android:src="#drawable/ic_camera">
</bitmap>
</item>
</selector>
I'm using the following for a custom radio button which should be diagonally strikethrough when it is disabled.
Example Image of 5 radio buttons where 4 of them are enabled
<item android:state_enabled="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<size
android:height="35dp"
android:width="35dp"/>
<stroke
android:color="#color/someGrey"
android:width="1dp"/>
<corners android:radius="1dp"/>
</shape>
</item>
<item>
<rotate
android:fromDegrees="135"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="135">
<shape android:shape="line">
<stroke
android:color="#color/someGrey"
android:width="1dp"/>
</shape>
</rotate>
</item>
</layer-list>
</item>
I agree with Kasium sugest, so for some Android versions the especification to Alpha is in percent.
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_drawble"
android:alpha="0.5">
</bitmap>
i think you could create your own drawable which could take this argument as a parameter. i've never done such a thing though.
check out this link :
How to set alpha value for drawable in a StateListDrawable?
if that's not possible, you can always do it in code...
here are 2 links i've found about it, in case you wish to use bitmaps instead:
https://plus.google.com/+RomanNurik/posts/FZQcNW8G75K
https://gist.github.com/romannurik/5779875
Its not that simple but its possible:
First you have to define color in color folder of your resources like this:
color/inst_control_pressed_transp.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.5" android:color="?attr/inst_control_pressed" />
</selector>
Now you can reference that color from some shape:
drawable/background_clear_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/inst_control_pressed_transp" />
</shape>
Tha you can use it in drawable:
drawable/background_bordered_clear_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/background_clear_pressed" android:state_pressed="true" android:state_selected="false" />
<item android:drawable="#drawable/background_clear_active" android:state_activated="true" />
<item android:drawable="#drawable/background_clear_selected" android:state_selected="true" />
<item android:drawable="#drawable/background_bordered_clear_round" />
</selector>

Categories

Resources