Skip to content

Instantly share code, notes, and snippets.

@cutiko
Last active April 27, 2021 15:27
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cutiko/56018d9a6cea2170ee3b4640ccf58bca to your computer and use it in GitHub Desktop.
Save cutiko/56018d9a6cea2170ee3b4640ccf58bca to your computer and use it in GitHub Desktop.
Ripple Effect Android
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:clickable="true"/>
<!--The properties you need are:
android:background="?attr/selectableItemBackground"
android:clickable="true"
Make any view have ripple effect-->
<!--
This are other ways to create cool buttons
style="@style/Base.Widget.AppCompat.Button.Colored"
style="@style/Base.Widget.AppCompat.Button.Borderless"
style="@style/Base.Widget.AppCompat.Button.Borderless.Colored"
-->
</LinearLayout>
<!--This will create a button background but override the ripple effect-->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="@color/colorAccentDark"/>
</item>
<item>
<color android:color="@color/colorAccent"/>
</item>
</selector>
<!--This will create a plain background for previous to 21 but for other ripple will be custom.
Save the first in the normal drawable folder but the other in the drawable-v21 (create it if needed, same location original drawable)-->
<!--drawable-->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item>
<color android:color="@color/colorAccent"/>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<gradient
android:type="linear"
android:startColor="@android:color/white"
android:endColor="@color/colorPrimary"
android:angle="315"/>
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<item>
<color android:color="@android:color/darker_gray"/>
</item>
<item android:bottom="1dp">
<color android:color="@android:color/white"/>
</item>
</layer-list>
</item>
</selector>
<!--drawable-v21-->
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorPrimaryDarker">
<item>
<color android:color="@android:color/darker_gray"/>
</item>
<item android:bottom="1dp">
<color android:color="@android:color/white"/>
</item>
</ripple>
<!--This change button color and keeps default ripple effect-->
<!--styles-->
<style name="AccentButton" parent="AppTheme">
<item name="colorButtonNormal">@color/colorAccent</item>
</style>
<!--styles v21-->
<style name="AccentButton" parent="AppTheme">
<item name="android:colorButtonNormal">@color/colorAccent</item>
</style>
@cutiko
Copy link
Author

cutiko commented Feb 18, 2017

Thanks to Francisco Berrios for his great contribution to extra styles, check his github https://github.com/azhagthott

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment