Add ripple effect with xml (recommended over the RippleDrawable method)
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>