I created a button and I want to add ripple effect to that button!
I created a button bg XML file: (bg_btn.xml)
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
And this is my ripple effect file: (ripple_bg.xml)
<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 This is my Button which I want to add ripple effect:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />
But after adding ripple effect button background is transparent, and button display only when clicked,
like this:
Before Click
On Click
But I need both button background color and ripple effect,
I found some of this code in different blogs of Stack Overflow, but still it is not working!
Here is another drawable xml for those who want to add all together gradient background, corner radius and ripple effect:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorPrimaryDark">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark" />
<corners android:radius="@dimen/button_radius_large" />
</shape>
</item>
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="@color/colorPrimaryLight"
android:startColor="@color/colorPrimary"
android:type="linear" />
<corners android:radius="@dimen/button_radius_large" />
</shape>
</item>
</ripple>
Add this to the background of your button.
<Button
...
android:background="@drawable/button_background" />
Answer：
Add the "?attr/selectableItemBackground" to your view’s android:foreground attribute if it already has a background along with android:clickable="true".
Answer：
Add Ripple Effect/Animation to a Android Button
Just replace your button background attribute with android:background=”?attr/selectableItemBackground” and your code looks like this.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:text="New Button" />
Another Way to Add Ripple Effect/Animation to an Android Button
Using this method, you can customize ripple effect color. First, you have to create a xml file in your drawable resource directory. Create a ripple_effect.xml file and add following code.
res/drawable/ripple_effect.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 set background of button to above drawable resource file
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple_effect"
android:padding="16dp"
android:text="New Button" />
Answer：
In addition to Jigar Patel‘s solution, add this to the ripple.xml to avoid transparent background of buttons.
<item
android:id="@android:id/background"
android:drawable="@color/your-color" />
Complete xml :
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/your-color"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/your-color" />
</shape>
</item>
<item
android:id="@android:id/background"
android:drawable="@color/your-color" />
</ripple>
Use this ripple.xml as background in your button :
android:background="@drawable/ripple"
Answer：
When the button has a background from the drawable, we can add ripple effect to the foreground parameter.. Check below code its working for my button with a different background
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:background="@drawable/shape_login_button"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:text="@string/action_button_login"
/>
Add below parameter for the ripple effect
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
For reference refer below link
https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/
Answer：
AppCompat v7+
If you don’t prefix with
?android:your app will crash.
You should use "?android:attr/selectableItemBackground" or "?android:attr/selectableItemBackgroundBorderless", based on your preference. I prefer Borderless.
You can put it either in android:background or android:foreground to keep existing properties.
The element must have android:clickable="true" and android:focusable="true" in order for this to work, but many elements, such as buttons, have them true by default.
<Button
...
android:background="@color/white"
android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
...
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
/>
Programmatically (Java)
TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type
Programmatically (Kotlin)
val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type
Reusable Kotlin Extension Function
myView.ripple()
fun View.ripple(): View {
val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
setBackgroundResource(value.resourceId)
isFocusable = true // Required for some view types
return this
}
Answer：
Adding foreground and clickable attributes worked for me.
<Button
...
android:background="@color/your_color"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true" />
Answer：
In addition to Sudheesh R
Add Ripple Effect/Animation to a Android Button with button rectangle shape with corner
Create xml file res/drawable/your_file_name.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="@color/colorWhite"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark" />
<corners android:radius="50dp" />
</shape>
</item>
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="@color/colorAccent"
android:startColor="@color/colorPrimary"
android:type="linear" />
<corners android:radius="50dp" />
</shape>
</item>
</ripple>
Answer：
When you use android:background, you are replacing much of the styling and look and feel of a button with a blank color.
Update: As of the version 23.0.0 release of AppCompat, there is a new Widget.AppCompat.Button.A colored style which uses your theme’s colorButtonNormal for the disabled color and colorAccent for the enabled color.
This allows you apply it to your button directly via
<Button
...
style="@style/Widget.AppCompat.Button.Colored" />
You can use a drawable in your v21 directory for your background such as:
<?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"/>
</ripple>
This will ensure your background color is ?attr/colorPrimary and has the default ripple animation using the default ?attr/colorControlHighlight (which you can also set in your theme if you’d like).
Note: you’ll have to create a custom selector for less than v21:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/primaryPressed" android:state_pressed="true"/>
<item android:drawable="@color/primaryFocused" android:state_focused="true"/>
<item android:drawable="@color/primary"/>
</selector>
Answer：
try this
<Button
android:id="@+id/btn_location"
android:layout_width="121dp"
android:layout_height="38dp"
android:layout_gravity="center"
android:layout_marginBottom="24dp"
android:layout_marginTop="24dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:background="@drawable/btn_corner"
android:gravity="center_vertical|center_horizontal"
android:paddingLeft="13dp"
android:paddingRight="13dp"
android:text="Save"
android:textColor="@color/color_white" />
Answer：
Just use :
android:backgroundTint="#f816a463"
Instead of:
android:background="#f816a463"
Don’t forget to change your Button to android.support.v7.widget.AppCompatButton
Answer：
An alternative solution to using the <ripple> tag (which I personally prefer not to do, because the colors are not “default”), is the following:
Create a drawable for the button background, and include <item android:drawable="?attr/selectableItemBackground"> in the <layer-list>
Then (and I think this is the important part) programmatically set backgroundResource(R.drawable.custom_button) on your button instance.
Activity/Fragment
Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);
Layout
<Button
android:id="@+id/btn_temp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/custom_button"
android:text="Test" />
custom_button.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="10dp" />
</shape>
</item>
<item android:drawable="?attr/selectableItemBackground" />
</layer-list>
Tags: androidandroid, button
