How can I give an imageview click effect like a button on Android

Question

I have imageview in my Android app that I am using like a button with the onClick event given  but as you might guess it is not giving imageview a clickable effect when clicked  How can I achieve that

User · Answer

Simply just use an ImageButton

User · Answer

I think ImageButton is a better solution   lt ImageButton     android layout width  96dp      android layout height  56dp      android src   mipmap ic launcher      android adjustViewBounds  true      android background   android color transparent      android foreground   drawable selector    gt

User · Answer

I did as follows in XML - with 0 padding around the image and ripple ontop of the image    lt ImageView     android layout width  100dp      android layout height  100dp      android background   drawable my image      android clickable  true      android focusable  true      android src   android attr selectableItemBackground    gt

User · Answer

EDIT  Although the original answer below works and is easy to set up  refer to this post by an Android Developer Advocate at Google if you want   need a more efficient implementation  Also note that the android foreground attribute is coming to all Views  including ImageView  by default in Android M     The problem with using a selector for an ImageView is that you can only set it as the view s background - as long as your image is opaque  you will not see the selector s effect behind it   The trick is to wrap your ImageView in a FrameLayout with the attribute android foreground which allows us to define an overlay for its content  If we set android foregroundto a selector  e g  android attr selectableItemBackground for API level 11   and attach the OnClickListener to the FrameLayout instead of the ImageView  the image will be overlaid with our selector s drawable - the click effect we desire   Behold    lt FrameLayout     android id    id imageButton      android layout width  match parent      android layout height  match parent      android foreground   android attr selectableItemBackground   gt        lt ImageView         android layout width  match parent          android layout height  match parent          android src   drawable yourImageFile    gt    lt  FrameLayout gt     Note this should be placed within your parent layout    final View imageButton   findViewById R id imageButton   imageButton setOnClickListener new OnClickListener         Override     public void onClick View view               do whatever we wish

User · Answer

Here is my code  The idea is that ImageView gets color filter when user touches it  and color filter is removed when user stops touching it   Martin Booka Weser  Andr  s  Ah Lam  altosh   solution doesn t work when ImageView has also onClickEvent  worawee s and kcoppock  with ImageButton  solution requires background  which has no sense when ImageView is not transparent   This one is extension of AZ  idea about color filter   class PressedEffectStateListDrawable extends StateListDrawable        private int selectionColor       public PressedEffectStateListDrawable Drawable drawable  int selectionColor            super            this selectionColor   selectionColor          addState new int     android R attr state pressed    drawable           addState new int       drawable               Override     protected boolean onStateChange int   states            boolean isStatePressedInArray   false          for  int state   states                if  state    android R attr state pressed                    isStatePressedInArray   true                                  if  isStatePressedInArray                super setColorFilter selectionColor  PorterDuff Mode MULTIPLY             else               super clearColorFilter                      return super onStateChange states               Override     public boolean isStateful             return true            usage   Drawable drawable   new FastBitmapDrawable bm   imageView setImageDrawable new PressedEffectStateListDrawable drawable  0xFF33b5e5

User · Answer

As for now  we should develop Material Design practice  In this case you could add a ripple effect on an ImageView

User · Answer

If you want ripple when tapped  it can be given by this code     lt ImageView             android background   attr selectableItemBackgroundBorderless      android clickable  true           lt  ImageView gt    Similarly  you can implement click effect for TextView   lt TextView             android background   attr selectableItemBackgroundBorderless      android clickable  true           lt  TextView gt

User · Answer

Thanks for the help on this thread  However  you missed one thing   you need to handle the ACTION CANCEL as well  If you don t then you might not properly restore the alpha value of the ImageView in the event that a parent view in the view hierarchy intercepts a touch event  think a ScrollView wrapping you ImageView    Here is a complete class that is based off the above class but takes care of the ACTION CANCEL as well  It uses an ImageViewCompat helper class to abstract the differences in the pre-post JellyBean API   public class ChangeAlphaOnPressedTouchListener implements OnTouchListener        private final float pressedAlpha       public ChangeAlphaOnPressedTouchListener float pressedAlpha            this pressedAlpha   pressedAlpha              Override     public boolean onTouch View v  MotionEvent event            ImageView iv    ImageView  v          switch  event getAction              case MotionEvent ACTION DOWN              ImageViewCompat setAlpha iv  pressedAlpha               break           case MotionEvent ACTION MOVE              if  isInsideViewBounds v  event                     ImageViewCompat setAlpha iv  pressedAlpha                 else                   ImageViewCompat setAlpha iv  1f                             break          case MotionEvent ACTION UP              ImageViewCompat setAlpha iv  1f               break          case MotionEvent ACTION CANCEL              ImageViewCompat setAlpha iv  1f                     return false             private static boolean isInsideViewBounds View v  MotionEvent event            return event getX    gt  0  amp  amp  event getX    lt  v getWidth    amp  amp  event getY    gt  0                  amp  amp  event getY    lt  v getHeight

User · Answer

Use an android widget Button  and set its background property to an android graphics drawable StateListDrawable  This can all be done in XML  or programmatically  See the Custom Button section of the Form Stuff tutorial

User · Answer

Based on Mr Zorn s answer  I use a static method in my abstract Utility class   public abstract class Utility            public static View OnTouchListener imgPress            return imgPress 0x77eeddff     DEFAULT color            public static View OnTouchListener imgPress final int color           return new View OnTouchListener                   Override             public boolean onTouch View v  MotionEvent event                     switch event getAction                           case MotionEvent ACTION DOWN                            ImageView view    ImageView  v                          view getDrawable   setColorFilter color  PorterDuff Mode SRC ATOP                           view invalidate                            break                                             case MotionEvent ACTION UP                          v performClick                         case MotionEvent ACTION CANCEL                            ImageView view    ImageView  v                             Clear the overlay                         view getDrawable   clearColorFilter                            view invalidate                            break                                                           return true                                              Then I use it with onTouchListener   ImageView img  ImageView  view findViewById R id image   img setOnClickListener new View OnClickListener          Override     public void onClick View v       Your click action          img zc setOnTouchListener Utility imgPress       Or Utility imgPress int color with alpha    It is very simple if you have a lot of images  and you want a simple onTouch effect  without any XML drawable and only one image

User · Answer

You could try with android background   android drawable list selector background  to get the same effect as the  Add alarm  in the default  Alarm Clock   now Desk Clock

User · Answer

I tried with    lt ImageButton         android layout width  wrap content          android layout height  wrap content          android contentDescription   string get started          android src   drawable home started          style   android borderlessButtonStyle          android adjustViewBounds  true          android clickable  true          android elevation  5dp          android longClickable  true    gt    and this worked  Please note on the line  style   android borderlessButtonStyle

User · Answer

OR   You can use this form  with Image Button   Create file res drawable btn video xml    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   drawable image          android state pressed  true    gt       lt item android drawable   drawable ico2          android state focused  true    gt       lt item android drawable   drawable ico2    gt   lt  selector gt    And res layout activity main xml    lt ImageButton     android layout width  match parent      android layout height  match parent      android id    id imageButton      android layout gravity  center horizontal      android onClick  eventImageBtn      android background   drawable btn video      android adjustViewBounds  true      android scaleType  fitXY    gt    Your image change with a click  and you can adjust with a linear layout    lt  xml version  1 0  encoding  utf-8   gt   lt ScrollView xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android fillViewport  true  gt        lt LinearLayout         android layout width  match parent          android layout height  match parent          android orientation  vertical          android background   color menu item background  gt            lt LinearLayout android layout width  match parent  android layout height  match parent  android orientation  vertical                        android paddingLeft   dimen main screen side padding  android paddingRight   dimen main screen side padding  android paddingTop   dimen main screen side padding  android paddingBottom   dimen main screen side padding                        android background   ffb3ff13  android weightSum  10 00  gt                 lt LinearLayout android layout weight  2 50  android background   ff56cfcd  android orientation  vertical  android layout width  fill parent  android layout height  0dp   gt                    lt ImageButton                     android layout width  match parent                      android layout height  match parent                      android id    id imageButton                      android layout gravity  center horizontal                      android onClick  eventImageBtn                      android background   drawable btn video                      android adjustViewBounds  true                      android scaleType  fitXY                    gt               lt  LinearLayout gt                lt LinearLayout android layout weight  0 50  android layout height  0dp  android background   ffffffff  android orientation  vertical  android layout width  fill parent   gt               lt  LinearLayout gt                lt LinearLayout android layout weight  4 50  android orientation  vertical  android layout width  fill parent  android layout height  0dp  android background   ff8aa5ff  gt               lt  LinearLayout gt                lt LinearLayout android layout weight  0 50  android layout height  0dp  android background   ffffffff  android orientation  vertical  android layout width  fill parent   gt               lt  LinearLayout gt                lt LinearLayout android layout weight  2 00  android orientation  vertical  android layout width  fill parent  android layout height  0dp  android background   ffff7d1a   gt               lt  LinearLayout gt            lt  LinearLayout gt       lt  LinearLayout gt   lt  ScrollView gt

User · Answer

Use style   android borderlessButtonStyle  in the XML file   It will show the Android default click effect     lt ImageView     android id    id imageView1      android layout width  wrap content      android layout height  wrap content      android src   drawable ic launcher       style   android borderlessButtonStyle    gt

User · Answer

It s possible to do with just one image file using the ColorFilter method  However  ColorFilter expects to work with ImageViews and not Buttons  so you have to transform your buttons into ImageViews  This isn t a problem if you re using images as your buttons anyway  but it s more annoying if you had text    Anyway  assuming you find a way around the problem with text  here s the code to use   ImageView button    ImageView  findViewById R id button   button setColorFilter 0xFFFF0000  PorterDuff Mode MULTIPLY     That applies a red overlay to the button  the color code is the hex code for fully opaque red - first two digits are transparency  then it s RR GG BB

User · Answer

For defining the selector drawable choice   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state selected  true             android drawable   drawable img down    gt       lt item android state selected  false             android drawable   drawable img up    gt   lt  selector gt    I have to use android state pressed instead of android state selected   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state pressed   true             android drawable   drawable img down    gt       lt item android state pressed   false             android drawable   drawable img up    gt   lt  selector gt

User · Answer

Here s my solution  which  using  nineOldAndroids  library  supports old APIs too   rootView setOnTouchListener new OnTouchListener           Override     public boolean onTouch final View v  final MotionEvent event             switch  event getAction                   case MotionEvent ACTION UP              case MotionEvent ACTION CANCEL                  v setBackgroundResource R drawable listview normal                   ViewHelper setAlpha imageView  1                   break               case MotionEvent ACTION DOWN                  v setBackgroundResource 0                   v setBackgroundColor getResources   getColor R color listview pressed                    ViewHelper setAlpha imageView  0 75f                   break                    return false              It assumes the rootView is the cell itself  the layout   and that it has a single imageView that you wish to be affected by the color that you wish to apply to the whole cell     EDIT  if you wish  you can also extend ImageView to handle foreground  and set it to   android attr selectableItemBackground   There is a library for this here and a tutorial on how to do it for any view you wish  here

User · Answer

Set the selectable background to the ImageView and add some padding  Then attach the OnClickListener    lt ImageView     android id    id your image view      android layout width  wrap content      android layout height  wrap content      android src   drawable your image      android padding  10dp      android background   android attr selectableItemBackground   gt

User · Answer

I do some similar things  See suitable for you or not  View Press Effect Helper    usage   do some simple press effect like iOS  Simple Usage   ImageView img    ImageView  findViewById R id img   ViewPressEffectHelper attach img    https   gist github com extralam 7489370

User · Answer

In combination with all the answers above  I wanted the ImageView to be pressed and changed state but if the user moved then  cancel  and not perform an onClickListener   I ended up making a Point object within the class and setting its coordinates according to when the user pushed down on the ImageView  On the MotionEvent ACTION UP I recording a new point and compared the points   I can only explain it so well  but here is what I did      set the ontouch listener weatherView setOnTouchListener new OnTouchListener           Override     public boolean onTouch View v  MotionEvent event               Determine what action with a switch statement         switch  event getAction                  User presses down on the ImageView  record the original point            and set the color filter         case MotionEvent ACTION DOWN                ImageView view    ImageView  v                  overlay is black with transparency of 0x77  119              view getDrawable   setColorFilter 0x77000000                      PorterDuff Mode SRC ATOP               view invalidate                 p   new Point  int  event getX     int  event getY                 break                        Once the user releases  record new point then compare the            difference  if within a certain range perform onCLick            and or otherwise clear the color filter         case MotionEvent ACTION UP                ImageView view    ImageView  v              Point f   new Point  int  event getX     int  event getY                 if   Math abs f x - p x   lt  15                       amp  amp    Math abs f x - p x   lt  15                      view performClick                                 clear the overlay             view getDrawable   clearColorFilter                view invalidate                break                              return true              I have an onClickListener set on the imageView  but this can be an method

User · Answer

You can design different images for clicked not clicked states and set them in the onTouchListener as follows  final ImageView v    ImageView  findViewById R id button0           v setOnTouchListener new OnTouchListener                  Override             public boolean onTouch View arg0  MotionEvent arg1                    switch  arg1 getAction                      case MotionEvent ACTION DOWN                        v setImageBitmap res getDrawable R drawable img down                        break                                    case MotionEvent ACTION CANCEL                       v setImageBitmap res getDrawable R drawable img up                        break                                                      return true                              The better choice is that you define a selector as follows   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state selected  true             android drawable   drawable img down    gt       lt item android state selected  false             android drawable   drawable img up    gt   lt  selector gt    and select the image in the event   v setOnTouchListener new OnTouchListener                  Override             public boolean onTouch View arg0  MotionEvent arg1                    v setSelected arg1 getAction    MotionEvent ACTION DOWN                   return true

User · Answer

I create sample here  just change ImageView into ClickableImageView from your layout  Hope it help

User · Answer

You can Override setPressed in the ImageView and do the color filtering there  instead of creating onTouchEvent listeners     Override public void setPressed boolean pressed        super setPressed pressed        if getDrawable      null          return       if pressed            getDrawable   setColorFilter 0x44000000  PorterDuff Mode SRC ATOP           invalidate              else           getDrawable   clearColorFilter            invalidate

User · Answer

This worked for me   img setOnTouchListener new OnTouchListener                  Override             public boolean onTouch View v  MotionEvent event                    switch  event getAction                                          case MotionEvent ACTION DOWN                                                  ImageView v  setImageAlpha 200                           break                                            case MotionEvent ACTION MOVE                                                   if inside bounds                         if event getX    gt  0  amp  amp  event getX    lt  v getWidth    amp  amp  event getY    gt  0  amp  amp  event getY    lt  v getHeight                                                            ImageView v  setImageAlpha 200                                                     else                                                         ImageView v  setImageAlpha 255                                                      break                                            case MotionEvent ACTION UP                                                  ImageView v  setImageAlpha 255                                                           return true                                Edit  As Gunhan said there will be backward compatibility problem with setImageAlpha method   I used this method   public static void setImageAlpha ImageView img  int alpha                if Build VERSION SDK INT  gt  15                        img setImageAlpha alpha                     else                       img setAlpha alpha

User · Answer

I think the easiest way is creating a new XML file  In this case  let s call it  example xml  in the drawable folder  and put in the follow code    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   color blue            android state pressed  true    gt    lt  selector gt    But before that you have to set the colors in the colors xml file  in the values folder  like this    lt resources gt       lt color name  blue  gt  0000FF lt  color gt   lt  resources gt    That made  you just set the Button   ImageButton to use the new layout  like this    lt ImageView     android layout width  wrap content      android layout height  wrap content      android background   drawable example    gt    Then when you click that image  it will change to the color set in   lt item android drawable   color blue        android state pressed  true    gt    giving the feedback that you want

User · Answer

I have a more beauty solution if you use background images     public static void blackButton View button       button setOnTouchListener new OnTouchListener              public boolean onTouch View v  MotionEvent event                switch  event getAction                      case MotionEvent ACTION DOWN                        v getBackground   setColorFilter 0xf0f47521 PorterDuff Mode SRC ATOP                       v invalidate                        break                                    case MotionEvent ACTION UP                        v getBackground   clearColorFilter                        v invalidate                        break                                              return false

User · Answer

This is the best solution I ever seen  Its more generic    lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android       android fillAfter  true   gt        lt alpha         android duration  100          android fromAlpha  0 0          android interpolator   android anim accelerate interpolator          android toAlpha  1 0    gt   lt  set gt

User · Answer

You can do that by adding this attr  android background  quot  android attr selectableItemBackground quot    into your

User · Answer

Here is my simple way to solve that   ImageView iv    ImageView  findViewById R id imageView    iv setOnClickListener new OnClickListener           Override     public void onClick View arg0               TODO Auto-generated method stub           Agrega porcentajes de cada fraccion de grafica pastel          Animation animFadein   AnimationUtils loadAnimation getApplicationContext   R anim fade in            iv startAnimation animFadein             In file res anim fade in xml    lt  xml version  1 0  encoding  utf-8   gt       lt set xmlns android  http   schemas android com apk res android           android fillAfter  true   gt    lt alpha     android duration  100      android fromAlpha  0 0      android interpolator   android anim accelerate interpolator      android toAlpha  1 0    gt    lt  set gt

User · Answer

You can do this with a single image using something like this          get the image view     ImageView imageView    ImageView findViewById R id ImageView          set the ontouch listener     imageView setOnTouchListener new OnTouchListener               Override         public boolean onTouch View v  MotionEvent event                 switch  event getAction                      case MotionEvent ACTION DOWN                        ImageView view    ImageView  v                        overlay is black with transparency of 0x77  119                      view getDrawable   setColorFilter 0x77000000 PorterDuff Mode SRC ATOP                       view invalidate                        break                                    case MotionEvent ACTION UP                  case MotionEvent ACTION CANCEL                        ImageView view    ImageView  v                        clear the overlay                     view getDrawable   clearColorFilter                        view invalidate                        break                                               return false                      I will probably be making this into a subclass of ImageView  or ImageButton as it is also a subclass of ImageView  for easier re-usability  but this should allow you to apply a  selected  look to an imageview

[java] How can I give an imageview click effect like a button on Android?

Examples related to java

Examples related to android

Examples related to button

Examples related to imageview