How to set button click effect in Android

Question

In Android  when I set background image to Button  I can not see any effect on button    I need some effect on button so user can recognize that button is clicked   Button should be dark while a few second when it clicked  so what should I do for this     Thanks

User · Answer

To make your item consistent with the system look and feel try referencing the system attribute android:attr/selectableItemBackground in your desired view's background or foreground tag:

<ImageView
    ...
    android:background="?android:attr/selectableItemBackground"      
    android:foreground="?android:attr/selectableItemBackground"
    ...
/>

Use both attributes to get desired effect before/after API level 23 respectively.

https://stackoverflow.com/a/11513474/4683601

User · Answer

Create your AlphaAnimation Object that decides how much will be the fading effect of the button  then let it start in the onClickListener of your buttons  For example    private AlphaAnimation buttonClick   new AlphaAnimation 1F  0 8F       some code  public void onClick View v        v startAnimation buttonClick       of course this is just a way  not the most preferred one  it s just easier

User · Answer

Use RippleDrawable for Material Design state pressed clicked effect  In order to achieve this  create ripple item as an  xml under  drawable folder and use it in android background for any views     Effect for icon pressed clicked  use circular ripple effect  for example    lt ripple xmlns android  http   schemas android com apk res android      android color   android color darker gray    gt  Effect for view clicked with rectangle boundary  we can add ripple over the existing drawable like bellow   lt  xml version  1 0  encoding  utf-8   gt   lt ripple xmlns android  http   schemas android com apk res android      android color   000000  gt   lt item android drawable   drawable your background drawable   gt   lt  ripple gt

User · Answer

Create bounce xml file for animation  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt set xmlns android  quot http   schemas android com apk res android quot  gt        lt scale         android duration  quot 100 quot          android fromXScale  quot 0 9 quot          android fromYScale  quot 0 9 quot          android pivotX  quot 50  quot          android pivotY  quot 50  quot          android toXScale  quot 1 0 quot          android toYScale  quot 1 0 quot    gt    lt  set gt   Add this line in onClick to initialize  final Animation myAnim   AnimationUtils loadAnimation this  R anim bounce   button startAnimation myAnim    You get the shrink effect in a button click

User · Answer

For all the views android background  quot  android attr selectableItemBackground quot   But for cardview which has elevation use android foreground  quot  android attr selectableItemBackground quot   For Circular click effect as in toolbar android background  quot  android attr actionBarItemBackground quot   Also you need to set  android clickable  quot true quot   android focusable  quot true quot

User · Answer

This can be achieved by creating a drawable xml file containing a list of states for the button  So for example if you create a new xml file called  button xml  with the following code    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state focused  true  android state pressed  false  android drawable   drawable YOURIMAGE    gt       lt item android state focused  true  android state pressed  true  android drawable   drawable gradient    gt       lt item android state focused  false  android state pressed  true  android drawable   drawable gradient    gt       lt item android drawable   drawable YOURIMAGE    gt   lt  selector gt    To keep the background image with a darkened appearance on press  create a second xml file and call it gradient xml with the following code    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 bitmap android src   drawable YOURIMAGE   gt       lt  item gt       lt item gt           lt shape xmlns android  http   schemas android com apk res android  gt               lt gradient android angle  90  android startColor   880f0f10  android centerColor   880d0d0f  android endColor   885d5d5e   gt           lt  shape gt       lt  item gt   lt  layer-list gt    In the xml of your button set the background to be the button xml e g   android background   drawable button    Hope this helps   Edit  Changed the above code to show an image  YOURIMAGE  in the button as opposed to a block colour

User · Answer

Step  set a button in XML with onClick Action     lt Button android id    id btnEditUserInfo  style   android borderlessButtonStyle  android layout width  wrap content  android layout height   dimen txt height  android layout gravity  center  android background   drawable round btn  android contentDescription   string image view  android onClick  edit user info  android text  Edit  android textColor   000  android textSize   dimen login textSize    gt   Step  on button clicked show animation point   pgrm mark ---- ---- ----- ---- ---- ----- ---- ---- -----  ---- ---- -----      public void edit user info View view                show click effect on button pressed         final AlphaAnimation buttonClick   new AlphaAnimation 1F  0 8F           view startAnimation buttonClick            Intent intent   new Intent getApplicationContext     EditUserInfo class           startActivity intent            end edit user info

User · Answer

Or using only one background image you can achive the click effect by using setOnTouchListener  Two ways    Button findViewById R id testBth   setOnTouchListener new OnTouchListener             Override         public boolean onTouch View v  MotionEvent event              switch  event getAction                    case MotionEvent ACTION DOWN                      Button view    Button  v                    view getBackground   setColorFilter 0x77000000  PorterDuff Mode SRC ATOP                     v invalidate                      break                                case MotionEvent ACTION UP                       Your action here on button click               case MotionEvent ACTION CANCEL                      Button view    Button  v                    view getBackground   clearColorFilter                      view invalidate                      break                                        return true                    And if you don t want to use setOnTouchLister  the another way of achieving this is      myButton getBackground   setColorFilter  setColorFilter 0xF00  Mode MULTIPLY        StateListDrawable listDrawable   new StateListDrawable        listDrawable addState new int    android R attr state pressed   drawablePressed       listDrawable addState new int    android R attr defaultValue   myButton        myButton setBackgroundDrawable listDrawable

User · Answer

just wanna add another easy way to do this  If your ImageButton remains its background and you don t set it to null  it will work like a normal button and will show the click animation while clicking exactly like other buttons The way to hide the background while it is still there    lt ImageButton     android id    id imageButton2      android layout width  wrap content      android layout height  wrap content      android paddingBottom  1dp      android paddingLeft  1dp      android paddingRight  1dp      android paddingTop  1dp      android src   drawable squareicon    gt    The paddings won t let the background be visible and make the button act like other buttons

User · Answer

This is the best solution I came up with taking hints from  Vinayak s answer  All the other solutions have different drawbacks   First of all create a function like this   void addClickEffect View view        Drawable drawableNormal   view getBackground         Drawable drawablePressed   view getBackground   getConstantState   newDrawable        drawablePressed mutate        drawablePressed setColorFilter Color argb 50  0  0  0   PorterDuff Mode SRC ATOP        StateListDrawable listDrawable   new StateListDrawable        listDrawable addState new int    android R attr state pressed   drawablePressed       listDrawable addState new int       drawableNormal       view setBackground listDrawable       Explanation   getConstantState   newDrawable   is used to clone the existing Drawable otherwise the same drawable will be used  Read more from here  Android  Cloning a drawable in order to make a StateListDrawable with filters  mutate   is used to make the Drawable clone not share its state with other instances of Drawable  Read more about it here  https   developer android com reference android graphics drawable Drawable html mutate    Usage   You can pass any type of View  Button  ImageButton  View etc  as the parameter to the function and they will get the click effect applied to them   addClickEffect myButton   addClickEffect myImageButton

User · Answer

Making a minor addition to Andr  s answer   You can use postDelayed to make the color filter last for a small period of time to make it more noticeable            Override         public boolean onTouch final View v  MotionEvent event                switch  event getAction                      case MotionEvent ACTION DOWN                        v getBackground   setColorFilter color  PorterDuff Mode SRC ATOP                       v invalidate                        break                                    case MotionEvent ACTION UP                        v postDelayed new Runnable                              Override                         public void run                                 v getBackground   clearColorFilter                                v invalidate                                                     100L                       break                                              return false              You can change the value of the delay 100L to suit your needs

User · Answer

It is simpler when you have a lot of image buttons  and you don t want to write xml-s for every button   Kotlin Version   fun buttonEffect button  View        button setOnTouchListener   v  event - gt          when  event action                MotionEvent ACTION DOWN - gt                    v background setColorFilter -0x1f0b8adf  PorterDuff Mode SRC ATOP                  v invalidate                             MotionEvent ACTION UP - gt                    v background clearColorFilter                   v invalidate                                   false           Java Version   public static void buttonEffect View button       button setOnTouchListener new OnTouchListener              public boolean onTouch View v  MotionEvent event                switch  event getAction                      case MotionEvent ACTION DOWN                        v getBackground   setColorFilter 0xe0f47521 PorterDuff Mode SRC ATOP                       v invalidate                        break                                    case MotionEvent ACTION UP                        v getBackground   clearColorFilter                        v invalidate                        break                                              return false

User · Answer

You can simply use foreground for your View to achieve clickable effect   android foreground   android attr selectableItemBackground      For use with dark theme add also theme to your layout  to clickable effect be clear    android theme   android style ThemeOverlay Material Dark

User · Answer

If you re using xml background instead of IMG  just remove this     lt item gt       lt bitmap android src   drawable YOURIMAGE   gt   lt  item gt    from the 1st answer that  Ljdawson gave us

[android] How to set button click effect in Android?

Examples related to android