I'm a bit lost about how to properly use Ripple Drawable.
Let's say I have this drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="false" android:state_focused="true" android:drawable="#color/accent_color_light" />
<item android:state_pressed="true" android:drawable="#color/accent_color_light" />
<item android:drawable="#android:color/white" />
</selector>
So it is a plain white background which changes to a light blue when it is focused or pressed.
How can I get the same colors but with a ripple effect ?
I think I need to use a mask to prevent it from getting outside the bounds of the view ?
Forgot to answer my own question.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="#color/my_color" >
<item android:id="#android:id/mask">
<shape android:shape="rectangle" >
<solid android:color="#android:color/holo_green_light" />
</shape>
</item>
</ripple>
The color in the item with the id "mask" is not displayed. It is used to tell the shape and bounds of the ripple effect. Without it, it can go outside the bounds of the view.
RippleDrawable is already a StateListDrawable (ie selector) - so you can just use a ripple drawable as your background (with a default state) - something like this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/accent_color_light">
<item android:id="#android:id/mask">
<color android:color="#android:color/white" />
</item>
<item android:drawable="#android:color/white" />
</ripple>
the mask piece bounds the ripple (and, in reality, the above snippet, minus the colors and the last android:drawable which sets the non-pressed background) is the default list selector used in lollipop.
Related
I'm using tablayout and I don't know how to change the color of wave effect when I click on a tab of tablayout. How can i do that ?
Thanks you!!
Default Wave Effect Of Android Studio
Try this :
tab_color_selector.xml drawable add ripple.xml to state_pressed
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/blue_selected_tab"
android:state_selected="true"/>
<item android:drawable="#drawable/ripple" android:state_pressed="true"/>
<item android:drawable="#color/colorPrimary"/>
</selector>
ripple.xml drawable
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/blue_selected_tab"
tools:targetApi="lollipop"> <!-- ripple effect color -->
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<solid android:color="#color/blue_selected" /> <!-- background color -->
</shape>
</item>
enter image description here#ripple_bg.xml#
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorAccent" />
Set is as tabbackground !
Here is my custom ripple
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#color/white" />
</ripple>
How do I make it borderless?
As per the RippleDrawable documentation, a ripple will be masked against the composite of its child layers.
In this case, your drawable will be masked by the only item in your ripple.
To have a ripple with no mask, you can define your ripple like so:
<ripple android:color="?android:colorControlHighlight" />
I had the same problem, while I stumbled upon this question. I have solved my problem easily and there is a code
Btw it works only for cases when height equals width. Else it will be not ?attr/selectableItemBackgroundBorderless, but ripple oval
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="#color/grayPrimary" xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#000000"/>
</shape>
</item>
</ripple>
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>
Something like the following, but it doesn't work. If I switch the drawable color to something like blue, it works.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#android:color/transparent"/>
</ripple>
It's necessary to add a mask:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<color android:color="#android:color/white" />
</item>
</ripple>
Somehow, the #JMPergar 's answer didn't work for me.
However, I was able to think of this workaround: if a colour behind your transparent button is solid (not a gradient or a speckled picture) - you can use that color as a main button's unpressed one.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/profile_transparent_button_pressed"
>
<item>
<shape>
<corners android:radius="#dimen/profile_transparent_button_corner_radius" />
<solid android:color="#color/profile_background" />
</shape>
</item>
</ripple>
where #color/profile_transparent_button_pressed is a colour to highlight a button, and #color/profile_background - the colour of a layout behind this button. It works exactly as expected, but still definitely is a workaround so you go try #JMPergar 's answer first.
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.