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?

Mr Zorn · Answer 1 · 2016-10-10T00:26:11.837

79

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.

edited Oct 10 '16 at 00:26

answered Jan 23 '13 at 15:45

Mr Zorn

1,903
1
14
25

2

I also added a case for ACTION_CANCEL, it works great, thanks! – Alan Apr 25 '13 at 18:59
Good call - I had added that myself in my own code but will update it here too. – Mr Zorn Apr 26 '13 at 02:08
1

This may be another question, but how would I cancel after ACTION_UP? Specifically... User hits image. User drags finger off image to cancel. But action is not canceled with this code – sudocoder Jan 23 '14 at 00:19
I'll also add MotionEvent.ACTION_OUTSIDE ;) – bonnyz Apr 30 '15 at 13:52
3

you might want to return `false`, otherwise the view's actual `onClick()` event won't be fired – Nimrod Dayan Jun 20 '15 at 09:29
Thank you, this helped me resolve my need for button onclick, offclick. – wesley franks Jan 09 '16 at 08:58
only worked for me when I changed `return false;` to `return true;` – CHarris Sep 30 '18 at 23:50
Would be nice if you updated the answer since setColorFilter is deprecated! – Leonardo Rick May 04 '21 at 21:45
Thx so much, this is also working on ShapeableImageView. But any idea if I am using CircleImageView from https://github.com/hdodenhof/CircleImageView? – ahmfarisi Feb 23 '22 at 00:51

score 54 · Accepted Answer · answered Jan 06 '11 at 18:11

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"   
        android:drawable="@drawable/img_down" />
    <item android:state_selected="false"   
        android:drawable="@drawable/img_up" />
</selector>

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;
            }
        });

v.setSelected will only == true once, immediately moving to false due to MotionEvent.ACTION_MOVE. Once the finger is released, then MotionEvent.ACTION_UP occurs. If using the selector method, use separate logic to setSelected or setPressed. if (arg1.getAction() == MotionEvent.ACTION_DOWN) { v.setPressed(true); } else if (arg1.getAction() == MotionEvent.ACTION_UP) { v.setPressed(false); } — Adam Denoon, Jan 20 '16 at 21:58
Better be `MotionEvent.ACTION_DOWN || MotionEvent.ACTION_MOVE` to keep the image showing as long as we're pressing. — Alaa M., Dec 07 '16 at 20:30
You don't need to `setOnTouchListener(...`. You can simply create the `` and then set the ImageView clickable in XML like `` — Pierre, Mar 09 '20 at 14:16

justasm · Answer 3 · 2015-06-07T17:21:53.033

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:

<FrameLayout
    android:id="@+id/imageButton"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="?android:attr/selectableItemBackground" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/yourImageFile" />

</FrameLayout>

(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!
    }
});

Great ! This is a very good solution. Same solution used in contacts application for SMS or Call actions. — Jerry, Apr 26 '14 at 08:50
Wont work in API < 11. ?android:attr/selectableItemBackground requires API level 11 (current min is 8) — MSaudi, Aug 10 '14 at 21:15
The `selectableItemBackground` attribute was only added in API level 11, so you must use another selector if you want to use this solution for older API levels. For example, for one of my applications that supports API level 7, I use the `@drawable/list_selector_holo_light` resource generated using the [Android Holo Colors Generator tool](http://android-holo-colors.com/). — justasm, Aug 10 '14 at 21:24
You can achieve the same behavior using only 1 `` with selectableItemBackground ! — Yohan Dahmani, May 03 '17 at 14:14

score 30 · Answer 4 · edited Oct 28 '16 at 21:46

30

Use style="?android:borderlessButtonStyle" in the XML file. It will show the Android default click effect.

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" 
    style="?android:borderlessButtonStyle"
/>

edited Oct 28 '16 at 21:46

Peter Mortensen

30,738
21
105
131

answered Jun 15 '14 at 16:09

Anjula

1,690
23
29

1

This is actually the best answer, a LOT easier – FrankMonza Jun 27 '16 at 09:22
1

This sets padding, and even if you set the padding to 0, if the image you give it takes the whole imageView, you won't see any effect of clicking. – android developer Jan 03 '17 at 18:45
2

@androiddeveloper use `android:adjustViewBounds="true"` to unset padding. – Hafez Divandari Jun 28 '18 at 20:04
1

It's recommended to use `style="?android:attr/borderlessButtonStyle"`: https://developer.android.com/guide/topics/ui/controls/button#Borderless – Hafez Divandari Jun 28 '18 at 20:05
Use `style="?android:actionButtonStyle"` for a clickable ImageView on an ActionBar or ToolBar. – palindrom Dec 20 '20 at 18:16

score 21 · Answer 5 · edited Oct 27 '16 at 23:50

21

Simply just use an ImageButton.

edited Oct 27 '16 at 23:50

Peter Mortensen

30,738
21
105
131

answered Jan 06 '11 at 18:01

Kevin Coppock

133,643
45
263
274

3

I personally cannot make it look like ImageView. No border, stretch the image to the size of ImageButton etc. If you can give this border and stretch issue, and update your post. Mine some reputation goes to you as bounty =) – totten Feb 05 '15 at 07:45

score 15 · Answer 6 · edited Oct 28 '16 at 21:48

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:

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:fillAfter="true" >

<alpha
    android:duration="100"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" />
 </set>

Great solution - thanks! I scrolled through this post trying all the concise ones - and no success. Finally I got here and it worked for me. One observation - if you have 2+ buttons you want to apply the animation toward .. for my code, I found I need to create a unique instance of Animation object for each button I wanted to apply the effect for. Reusing the same instance made all the buttons flicker when 1 was clicked. — Gene Bo, Mar 24 '15 at 22:56

score 11 · Answer 7 · answered Jun 14 '17 at 23:15

If you want ripple when tapped, it can be given by this code :

<ImageView
    ...
    android:background="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    ...
</ImageView>

Similarly, you can implement click effect for TextView

<TextView
    ...
    android:background="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    ...
</TextView>

score 9 · Answer 8 · answered Nov 09 '15 at 13:54

9

Set the selectable background to the ImageView and add some padding. Then attach the OnClickListener.

<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"/>

answered Nov 09 '15 at 13:54

Oliver Kranz

3,741
2
26
31

Is there a way to use it without setting padding, and make the entire ImageView have the effect and not just the empty area? – android developer Jan 03 '17 at 18:46
This will show ripple in cubic, we need center ripple – Kishan Solanki May 01 '20 at 14:45

score 8 · Answer 9 · answered May 09 '11 at 23:02

For defining the selector drawable choice

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"   
        android:drawable="@drawable/img_down" />
    <item android:state_selected="false"   
        android:drawable="@drawable/img_up" />
</selector>

I have to use android:state_pressed instead of android:state_selected

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed ="true"   
        android:drawable="@drawable/img_down" />
    <item android:state_pressed ="false"   
        android:drawable="@drawable/img_up" />
</selector>

Altynbek Usenbekov · Answer 10 · 2012-12-06T06:15:01.383

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() > 0 && event.getX() < v.getWidth() && event.getY() > 0 && event.getY() < 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 > 15)
        {
            img.setImageAlpha(alpha);
        }
        else
        {
            img.setAlpha(alpha);
        }
    }

setImageAlpha requires API level 16. Therefore, for backward compatible apps its not possible to use it — Gunhan, Dec 04 '12 at 17:19
@Gunhan actually, you can use "nineOldAndroids" library which allows using alpha even on older APIs. just use: ViewHelper.setAlpha(view,alpha); — android developer, Mar 17 '14 at 12:58

score 5 · Answer 11 · edited Oct 27 '16 at 23:51

5

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).

edited Oct 27 '16 at 23:51

Peter Mortensen

30,738
21
105
131

answered Jan 29 '11 at 19:56

Marco Bettiol

531
3
12

score 4 · Answer 12 · answered Jan 07 '14 at 12:14

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

score 4 · Answer 13 · edited Feb 08 '14 at 01:05

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) < 15)
                    && ((Math.abs(f.x - p.x) < 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.

by adding case `MotionEvent.ACTION_CANCEL` with the same functionality as `MotionEvent.ACTION_UP` then it is possible to "clear" the view if the users performs a "drag" which is not a click action. — madlymad, May 12 '14 at 13:24

score 4 · Answer 14 · answered Sep 15 '14 at 17:12

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();
    }
}

score 4 · Answer 15 · edited May 23 '17 at 12:10

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.

score 3 · Answer 16 · answered May 30 '17 at 12:14

3

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

answered May 30 '17 at 12:14

thanhbinh84

17,876
6
62
69

score 3 · Answer 17 · answered Jan 06 '11 at 18:01

3

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.

answered Jan 06 '11 at 18:01

Ozone

579
2
5

Dan Alboteanu · Answer 18 · 2018-12-04T09:38:18.850

3

I think ImageButton is a better solution

<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" />

edited Dec 04 '18 at 09:38

answered Oct 08 '18 at 09:05

Dan Alboteanu

9,404
1
52
40

András · Answer 19 · 2015-06-08T13:37:59.013

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;
        }
    });
}

android developer · Answer 20 · 2017-01-03T18:52:50.760

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.

@madlymad thank you for fixing the code formatting, though I think something went wrong with indentation. Anyway, it's good enough to be able to read it... — android developer, May 12 '14 at 12:45

score 2 · Answer 21 · edited Oct 28 '16 at 21:51

OR:

You can use this form, with Image Button.

Create file res/drawable/btn_video.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image"
        android:state_pressed="true" />
    <item android:drawable="@drawable/ico2"
        android:state_focused="true" />
    <item android:drawable="@drawable/ico2" />
</selector>

And res/layout/activity_main.xml:

<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"
/>

Your image change with a click, and you can adjust with a linear layout:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/menu_item_background">

        <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">


            <LinearLayout android:layout_weight="2.50" android:background="#ff56cfcd" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" >

                <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"
                />
            </LinearLayout>

            <LinearLayout android:layout_weight="0.50" android:layout_height="0dp" android:background="#ffffffff" android:orientation="vertical" android:layout_width="fill_parent" >
            </LinearLayout>

            <LinearLayout android:layout_weight="4.50" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" android:background="#ff8aa5ff">
            </LinearLayout>

            <LinearLayout android:layout_weight="0.50" android:layout_height="0dp" android:background="#ffffffff" android:orientation="vertical" android:layout_width="fill_parent" >
            </LinearLayout>

            <LinearLayout android:layout_weight="2.00" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" android:background="#ffff7d1a" >
            </LinearLayout>

        </LinearLayout>
    </LinearLayout>
</ScrollView>

score 1 · Answer 22 · answered Feb 27 '13 at 05:13

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() > 0 && event.getX() < v.getWidth() && event.getY() > 0
                && event.getY() < v.getHeight();
    }
}

score 1 · Answer 23 · edited May 23 '17 at 11:54

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));

score 1 · Answer 24 · edited Oct 28 '16 at 21:44

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:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/blue"
          android:state_pressed="true" />

</selector>

But before that you have to set the colors in the colors.xml file, in the values folder, like this:

<resources>
    <color name="blue">#0000FF</color>
</resources>

That made, you just set the Button / ImageButton to use the new layout, like this:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/example"
/>

Then when you click that image, it will change to the color set in

<item android:drawable="@color/blue"
      android:state_pressed="true" />

giving the feedback that you want...

score 1 · Answer 25 · answered Nov 13 '15 at 04:41

I tried with:

<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" />

and this worked. Please note on the line: style="?android:borderlessButtonStyle"

This doesn't work in the case of 0 padding and the image takes entire area of the view. — android developer, Jan 03 '17 at 18:48

score 0 · Answer 26 · edited Jan 03 '20 at 13:48

0

This is the best solution I ever seen. Its more generic.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true" >

    <alpha
        android:duration="100"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

edited Jan 03 '20 at 13:48

Nipun

990
1
16
25

answered Dec 11 '16 at 19:29

Nilesh

237
1
3
13

2

In which place and file it should be injected? – NoWar Jan 30 '18 at 08:13

Mohsents · Answer 27 · 2021-06-26T14:01:52.030

You can made a simple ripple effect for ImageView. This is great for icons.

In res/drawable create circular_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item>
    <shape android:shape="oval">
        <solid android:color="@android:color/white"/>
    </shape>
  </item>

In res/drawable create a drawable res file ripple_effect_iv.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">

 <item
    android:id="@android:id/mask"
    android:drawable="@drawable/circular_shape" />

</ripple>

Set it as background for ImageView also you can consider padding for showing ripple natural:

     <ImageView
        android:background="@drawable/ripple_effect_iv"
        android:padding="10dp"/>

yes your ImageView become small but you can simply increase the android:layout_width and android:layout_height.

score -1 · Answer 28 · edited Oct 28 '16 at 22:08

-1

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

edited Oct 28 '16 at 22:08

Peter Mortensen

30,738
21
105
131

answered Dec 05 '15 at 17:04

stuckedunderflow

3,551
8
46
63

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

28 Answers28

Linked