Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ripple effect for lollipop views

Tags:

I have been developing an app for Lollipop (API 21).

When I change the Button color to something, the ripple effect doesn't works.

I found some third party libraries for the ripple effect, but I want to do this with standard API.

This answer didn't help either.

XML:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:id="@+id/button"
    android:layout_below="@+id/textView"
    android:background="@android:color/holo_blue_bright"
    android:layout_alignParentStart="true"
    android:layout_marginTop="76dp"
   />
like image 453
Zain Zafar Avatar asked Nov 21 '14 21:11

Zain Zafar


People also ask

How do I add ripple effect to CardView?

Adding Ripple Effect To enable this behavior, add the following attributes to your CardView . Using the android:foreground="? android:attr/selectableItemBackground" property on a CardView enables the ripple effect to originate from the touch origin.

What is Android ripple?

What is Ripple effect in Android? Ripple effect provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. These UI elements could be any of the View elements. Like – Layouts, Buttons, TextViews, ListViews, etc.

What is touch ripple?

Overview. Ripple touch effect was introduced with material design in Android 5.0 (API level 21). Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact fwith UI elements.


2 Answers

You have to set your button's background to a RippleDrawable which you can define in XML. (I'll name it holo_blue_ripple.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white"> <!-- ripple color -->

    <item android:drawable="@android:color/holo_blue_bright"/> <!-- normal color -->

</ripple>

Then reference it with android:background="@drawable/holo_blue_ripple".

like image 51
Floern Avatar answered Sep 18 '22 21:09

Floern


Try this:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    ...
 />

Based on this tutorial and the official docs

like image 27
kip2 Avatar answered Sep 18 '22 21:09

kip2