Add ripple effect to my button with button background color

Question

I created a button and I want to add ripple effect to that button   I created a button bg XML file   bg btn xml    lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt   lt gradient android startColor   FFFFFF  android endColor   00FF00  android angle  270    gt   lt corners android radius  3dp    gt   lt stroke android width  5px  android color   000000    gt   lt  shape gt    And this is my ripple effect file   ripple bg xml    lt ripple xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android color   f816a463      tools targetApi  lollipop  gt       lt item android id   android id mask  gt           lt shape android shape  rectangle  gt               lt solid android color   f816a463    gt           lt  shape gt       lt  item gt   lt  ripple gt    And This is my Button which I want to add ripple effect    lt 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    gt    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

User · Answer

A simple approach is to set a view theme as outlined here.

some_view.xml

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="?attr/selectableItemBackgroundBorderless"
   android:focusable="true"
   android:src="@drawable/up_arrow"
   android:theme="@style/SomeButtonTheme"/>

some_style.xml

<style name="SomeButtonTheme" >
   <item name="colorControlHighlight">@color/someColor</item>
</style>

User · 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   lt Button      style   style Widget AppCompat Button Colored    gt    You can use a drawable in your v21 directory for your background such as    lt  xml version  1 0  encoding  utf-8   gt   lt ripple xmlns android  http   schemas android com apk res android      android color   attr colorControlHighlight  gt   lt item android drawable   attr colorPrimary   gt   lt  ripple gt    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    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt   lt item android drawable   color primaryPressed             android state pressed  true   gt   lt item android drawable   color primaryFocused  android state focused  true   gt   lt item android drawable   color primary   gt   lt  selector gt

User · Answer

In addition to Jigar Patel s solution  add this to the ripple xml to avoid transparent background of buttons    lt item     android id   android id background      android drawable   color your-color    gt    Complete xml     lt 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  gt       lt item android id   android id mask  gt           lt shape android shape  rectangle  gt               lt solid android color   color your-color    gt           lt  shape gt       lt  item gt       lt item         android id   android id background          android drawable   color your-color    gt   lt  ripple gt    Use this ripple xml as background in your button     android background   drawable ripple

User · Answer

Just use    android backgroundTint   f816a463    Instead of   android background   f816a463    Don t forget to change your Button to android support v7 widget AppCompatButton

User · 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          lt Button         android layout width  match parent          android layout height  wrap content          android background   attr selectableItemBackground          android text  New Button    gt    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   lt  xml version  1 0  encoding  utf-8   gt   lt ripple xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android color   f816a463      tools targetApi  lollipop  gt       lt item android id   android id mask  gt           lt shape android shape  rectangle  gt               lt solid android color   f816a463    gt           lt  shape gt       lt  item gt   lt  ripple gt    And set background of button to above drawable resource file   lt Button     android layout width  match parent      android layout height  wrap content      android background   drawable ripple effect      android padding  16dp      android text  New Button    gt

User · Answer

Adding foreground and clickable attributes worked for me    lt Button              android background   color your color      android foreground   attr selectableItemBackgroundBorderless      android clickable  true    gt

User · Answer

setForeground is added in API level 23  Leverage the power of RevealAnimator in case u need to relay on foreground property     lt View    android id  quot   id circular reveal quot     android layout width  quot match parent quot     android layout height  quot match parent quot     android background  quot  color primaryMilk 22 quot     android elevation  quot  dimen margin 20 quot     android visibility  quot invisible quot    gt    With kotlin ext function  it s way osm    fun View circularReveal         val cx  Int   width   2     val cy  Int   height   2     val finalRadius  Int           width coerceAtLeast height      val anim  Animator   ViewAnimationUtils createCircularReveal          this          cx          cy          0f          finalRadius toFloat             anim interpolator   AccelerateDecelerateInterpolator       anim duration   400     isVisible   true     anim start       anim doOnEnd           isVisible   false

User · Answer

try this   lt 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    gt

User · Answer

Here is another drawable xml for those who want to add all together gradient background  corner radius and ripple effect   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt ripple xmlns android  quot http   schemas android com apk res android quot      android color  quot  color colorPrimaryDark quot  gt       lt item android id  quot  android id mask quot  gt           lt shape android shape  quot rectangle quot  gt               lt solid android color  quot  color colorPrimaryDark quot    gt               lt corners android radius  quot  dimen button radius large quot    gt           lt  shape gt       lt  item gt        lt item android id  quot  android id background quot  gt           lt shape android shape  quot rectangle quot  gt               lt gradient                 android angle  quot 90 quot                  android endColor  quot  color colorPrimaryLight quot                  android startColor  quot  color colorPrimary quot                  android type  quot linear quot    gt               lt corners android radius  quot  dimen button radius large quot    gt           lt  shape gt       lt  item gt   lt  ripple gt   Add this to the background of your button   lt Button             android background  quot  drawable button background quot    gt   PS  this answer works for android api 21 and above

User · Answer

An alternative solution to using the  lt ripple gt  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  lt item android drawable   attr selectableItemBackground  gt  in the  lt layer-list gt   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   lt Button     android id    id btn temp      android layout width  wrap content      android layout height  wrap content      android background   drawable custom button      android text  Test    gt    custom button xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item gt           lt shape android shape  rectangle  gt               lt solid android color   android color white    gt               lt corners android radius  10dp    gt           lt  shape gt       lt  item gt       lt item android drawable   attr selectableItemBackground    gt   lt  layer-list gt

User · 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       lt 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         gt    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

User · Answer

Add the   attr selectableItemBackground  to your view s android foreground attribute if it already has a background along with android clickable  true

User · 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    lt Button             android background   color white      android foreground   android attr selectableItemBackgroundBorderless    gt   lt TextView             android background   android attr selectableItemBackgroundBorderless      android clickable  true      android focusable  true    gt    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

User · 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       lt  xml version  1 0  encoding  utf-8   gt   lt ripple xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android color   color colorWhite      tools targetApi  lollipop  gt       lt item android id   android id mask  gt           lt shape android shape  rectangle  gt               lt solid android color   color colorPrimaryDark    gt               lt corners android radius  50dp    gt           lt  shape gt       lt  item gt        lt item android id   android id background  gt           lt shape android shape  rectangle  gt               lt gradient                 android angle  90                  android endColor   color colorAccent                  android startColor   color colorPrimary                  android type  linear    gt               lt corners android radius  50dp    gt           lt  shape gt       lt  item gt   lt  ripple gt

User · Answer

Now we need to create a drawable resource file and name it ripple effect as shown below ripple effect xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt    lt ripple      xmlns android  quot http   schemas android com apk res android quot       android color  quot  color colorRipple quot  gt       lt  -- ripple color -- gt        lt  -- for Button -- gt        lt item gt            lt shape android shape  quot rectangle quot  gt                lt corners android radius  quot 3dp quot    gt                lt solid android color  quot  color colorPrimary quot   gt            lt  shape gt        lt  item gt    lt  ripple gt   Source Full  https   code-android-example blogspot com 2020 11 ripple-effect-in-android-for-button html

[android] Add ripple effect to my button with button background color?

A simple approach is to set a view theme as outlined here.

Examples related to android

Examples related to android-layout

Examples related to android-drawable

Examples related to rippledrawable