Android ripple background color

Question

I am using a ripple effect on my navigation drawer. I have set it like this and applied it to my ListView:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true" android:drawable="@color/black_200" />

    <item android:state_pressed="true" android:color="@color/black_200">
        <ripple android:color="@color/black_400" />
    </item>

    <item android:drawable="@color/white" />
</selector>

I want the ripple background to remain the same like the normal activated state. Even when I define the color to be the same as the activated state, it gets darker and the ripple bubble gets even more dark. How can I color the background to be the same like the activated state and the ripple bubble to be the color I told it to be?

Gerek

Answer 1

You can control the colour of the RippleDrawable by doing the following:

RippleDrawable rippleDrawable = (RippleDrawable)view.getBackground(); // assumes bg is a RippleDrawable

int[][] states = new int[][] { new int[] { android.R.attr.state_enabled} };
int[] colors = new int[] { Color.BLUE }; // sets the ripple color to blue

ColorStateList colorStateList = new ColorStateList(states, colors);
rippleDrawable.setColor(colorStateList);

Or, via XML:

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FFFF0000"> <!-- The ripple will be red -->

    <!-- the normal bg color will be light grey -->
    <item>
        <color android:color="#FFDDDDDD" />
    </item>

    <!-- make sure the ripple doesn't exceed the bounds -->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

EDIT

After seeing @i.shadrin's answer below, I must admit it's a much simpler approach (using styles). If this is an option for you, I would recommend it.

Stockholm

Is that also possible in xml? – Gerek

Thank you. How would I link to this ripple from my already existing selector? – Gerek

I think you can just copy this whole ripple element and replace your ripple element. – Stockholm

you could also replace your drawable xml file with this one, and make the needed adjustments in this xml. it's really a matter of playing around with it and seeing what best suits your needs. – Stockholm

glad to help. Also, if this answer solved your problem, please don't forget to accept it so that it can help other people too. thanks! – Stockholm

can you share your xml solution for backward API's ( before api version 21 ) ? – Endarch

@OmerKarakose You don't use ripple on pre-Lollipop devices. So basically you need two versions of the XML. – Bloodstone

To make this solution work for me, I had to make the background color a shape, not just a color: <item><shape android:shape="rectangle"><solid color="#xxxxxx"></shape></item>. – Logic

Answer 2

It's a lot easier to do with styles:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   ...
   <item name="colorControlHighlight">@color/ripple_material_dark</item>
   ...
</style>

Raynaraynah

As the poster of the accepted answer, I vote this become the accepted answer – Stockholm

Works like a charm in Xamarin.Android too, no surprise of course! – Germiston

easy & best solution – Immaculate

I don't understand your solution. Are you suggesting changing the style value whenever clicking on an element? – Alesiaalessandra

Answer 3

add these two line of code inside of your view to give ripple effect .

android:clickable="true"
android:background="?attr/selectableItemBackground"

Nystrom

Answer 4

If you are using the custom button color then use below code for ripple effect. Save the file in drawable with name my_ripple.xml and set in background of button.

 <?xml version="1.0" encoding="utf-8"?>
 <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/ripple_color"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
     <shape android:shape="rectangle">
        <solid android:color="@color/ripple_color"
            />
    </shape>
  </item>
  <item
    android:id="@android:id/background"
    android:drawable="@color/button_color" />
 </ripple>

Hutchison

Answer 5

An example ripple to use with a selector on api lvl 21 and above

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

    <!-- ripple mask -->
    <item android:id="@+id/mask">
        <color android:color="@android:color/white"/>
    </item>

    <!-- background shape or color -->
    <item android:drawable="@drawable/rectangle_rounded_steel_blue"/>

</ripple>

Dissolve