Add ripple effect with xml (recommended over the RippleDrawable method)

rippleEffect_2.md

Source: Self

Question: How to add ripple effect with xml instead of using RippleDrawable?

Answer:

test_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/tutorial_container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
    
    <TextView
        android:id="@+id/tutorial_login"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/tutorial_login_signup_height"
        app:layout_widthPercent="50%"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="@string/login"
        android:gravity="center"
        android:textSize="@dimen/tutorial_login_signup_text_size"
        android:textColor="@color/white_tint_1"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:background="@drawable/ripple_effect_login"
        android:clickable="true"
        />

    <TextView
        android:id="@+id/tutorial_signup"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/tutorial_login_signup_height"
        app:layout_widthPercent="50%"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="@string/signupBtn"
        android:gravity="center"
        android:textSize="@dimen/tutorial_login_signup_text_size"
        android:textColor="@color/white_tint_1"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:background="@drawable/ripple_effect_signup"
        android:clickable="true"
        />

</android.support.percent.PercentRelativeLayout>

For API version >= 21 add the following files to drawable-v21 folder:

ripple_effect_login.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/dark_gray">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/black_tint_2_85" />
        </shape>
    </item>
</ripple>

ripple_effect_signup.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/shutta_blue_light">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/shutta_blue_85" />
        </shape>
    </item>
</ripple>

For API < 21, add the following files to drawable folder:

ripple_effect_login.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    ​
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/dark_gray" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/black_tint_2_85" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/black_tint_2_85" />
        </shape>
    </item>    ​
</selector>

ripple_effect_signup.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    ​
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/shutta_blue_light" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/shutta_blue_85" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/shutta_blue_85" />
        </shape>
    </item>    ​
</selector>

Sample color codes:

    <color name="dark_gray">#BDBDBD</color>
    <color name="white_tint_1">#e5e5e5</color>
    <color name="black_tint_2">#323232</color>
    <color name="black_tint_2_85">#d9323232</color>
    <color name="shutta_blue">#4c7eed</color>
    <color name="shutta_blue_85">#d94c7eed</color>
    <color name="shutta_blue_light">#FF9DB6ED</color>

Nice 👍 👍