Ripple effect on the figure

Question

Trying to do something really simple here looked a bunch of SO-resource, but to no avail. I am trying to get a ripple effect on a button that uses a drawable background of type shape drawable . Relevant files:

background_button:

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <stroke android:width="1px" android:color="#80ffffff" /> <solid android:color="@android:color/transparent" /> </shape> 

ripple.xml in drawable-v21 :

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

Button.xml:

  <Button android:id="@+id/login_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_weight="1" android:paddingTop="10dp" android:paddingBottom="10dp" android:background="@drawable/ripple" /> 

What is wrong here. Thanks!

Answer 1

My advice is not to use the <ripple tag. I have two reasons: to do what you want is not so simple, and you have 2 different .xml for each background. I do not like to have a drawable-v21 .

My solution is to wrap your Button using FrameLayout and use the android:foreground attribute. That way you can have any background you want, and you can keep the ripple effect.

 <FrameLayout android:id="@+id/login_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_weight="1" android:paddingTop="10dp" android:paddingBottom="10dp" android:foreground="?attr/selectableItemBackground"> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/background_button"/> </FrameLayout> 

Please note that I have moved all attributes and id to FrameLayout . You should set onClickListener to FrameLayout instead of Button .

Btw ?attr/selectableItemBackground excellent. Use it as much as possible. It replaces Holo blue with gray for older devices from Android 4.0 to 4.3.

Answer 2

Try it.

ripple_effect.xml

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:color="#2797e0" tools:targetApi="lollipop"> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="#2797e0" /> </shape> </item> 

button.xml

  <Button android:id="@+id/login_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_weight="1" android:paddingTop="10dp" android:paddingBottom="10dp" android:background="@drawable/ripple_effect"/> 

build.gradle

  compile 'com.android.support:appcompat-v7:23.1.1' 

Answer 3

which works for me drawable / rect.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape"> <stroke android:width="1dp" android:color="#FF4C71F5" /> <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> <corners android:radius="5dp" /> <solid android:color="#00000000" /> </shape> 

and for ripples drawable / rip.xml

 <?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="#f816a463" tools:targetApi="lollipop"> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="#f816a463" /> </shape> </item> </ripple> 

and for your button

  <Button android:id="@+id/nm" android:layout_width="80dp" android:layout_height="40dp" android:layout_weight="1" android:background="@drawable/rect" android:enabled="true" android:text="@string/vnm" android:textColor="@color/colorpr" android:textStyle="bold" android:foreground="@drawable/rip"/> 

I hope this help !!!

Answer 4

I had a similar task. Let me explain how I solve this. It displays circular images with shadow and ripple effects that do not go beyond the boundaries of the circle.

 <ImageView android:id="@+id/iv_undo" android:layout_width="@dimen/iv_width_altmenu" android:layout_height="@dimen/iv_height_altmenu" android:src="@drawable/undo" android:elevation="@dimen/elevation_buttons" android:foreground="@drawable/ripple_effect" android:background="@drawable/buttons_inactive_coloring" /> 

The following provides a ripple effect:

 android:foreground="@drawable/ripple_effect" 

Below is the imageView circle.

 android:background="@drawable/buttons_inactive_coloring" 

The following provides the shadow:

 android:foreground="@drawable/ripple_effect" 

Another problem you may encounter is the ripple effect that goes beyond the circle. To solve, use the following file (ripple_effect.xml)

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:color="@color/button_active" tools:targetApi="lollipop"> <item android:id="@android:id/mask"> <shape android:shape="oval"> <solid android:color="@color/button_active" /> </shape> </item> </ripple> 

If you are not using the following:

 <item android:id="@android:id/mask"> <shape android:shape="oval"> <solid android:color="@color/button_active" /> </shape> </item> 

the ripple effect goes beyond the boundaries of the circle, and it does not look beautiful. Be careful and calm down.

Answer 5

This work is for me ..

 <?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/smooth_white" tools:targetApi="lollipop"> <item android:drawable="@drawable/button_green_background" /> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="@color/smooth_white" /> </shape> </item> </ripple> 

Point is a section

 <item android:drawable="@drawable/button_green_background" /> 

Answer 6

A simpler solution is to use this drawable-xml as the value of the "android: background" property of the button:

draw /bkg_ripple.xml:

 <?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight"> <item android:drawable="?attr/colorPrimary"/> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="#000000" /> </shape> </item> </ripple> 

button.xml:

 <Button android:id="@+id/mybutton" android:layout_width="match_parent" android:layout_height="wrap_content" ... android:background="@drawable/bkg_ripple" /> 

Answer 7

It will help

 <com.abcd.ripplebutton.widget.RippleButton android:id="@+id/Summit" android:layout_width="260dp" android:layout_height="50dp" android:text="Login" android:textColor="@color/white" android:textStyle="bold" app:buttonColor="@color/Button" app:rippleColor="@color/white" /> 

Read more ... this

Answer 8

Fast decision

  <?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/blue" tools:targetApi="lollipop"> <item android:id="@android:id/mask" tools:targetApi="lollipop"> <shape android:shape="rectangle"> <solid android:color="@color/blue" /> <corners android:radius="5dp" /> </shape> </item> <item android:id="@android:id/background"> <shape android:shape="rectangle"> <stroke android:width="0.1dp" android:color="#312D2D" /> <solid android:color="#FFF" /> <corners android:radius="50dp" /> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> </shape> </item> </ripple>