Change padding on Android ImagePadding on pressed

Question

I have an android ImageButton and I can change the background color, tinting and so forth for different states.

What I want is a "slight move" of the image when the user presses the button.

So my idea was to add a different padding for the pressed state, but I don't know how (in xml).

Is there a way to achieve this. I know one way would be to use different images for the states, with transparent images where the "icon" is place different.

But my hope is that I can achieve it without the need for multiple images, just by changing the padding.

rexar5 · Answer 1 · 2018-09-13T19:55:01.257

Try this. It won't quite change your padding, but it will scale the image up a little and then back (or reverse it to 0.9 and 1.0 to scale it down and back). I think this is kind of what you're looking for.

Use an selector under animator resources:

<!-- res/animator/image_button_pressed.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <set>
            <objectAnimator
                android:duration="100"
                android:propertyName="scaleX"
                android:valueTo="1.1"
                android:valueType="floatType"/>
             <objectAnimator
                android:duration="100"
                android:propertyName="scaleY"
                android:valueTo="1.1"
                android:valueType="floatType"/>
        </set>
    </item>
    <item android:state_focused="false">
        <set>
            <objectAnimator
                android:duration="100"
                android:propertyName="scaleX"
                android:valueTo="1.0"
                android:valueType="floatType"/>
             <objectAnimator
                android:duration="100"
                android:propertyName="scaleY"
                android:valueTo="1.0"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

You can have 0 duration for jumping straight to the value or put a duration in there.

Then to use it set android:stateListAnimator on your view:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/your_drawable"
    android:stateListAnimator="@animator/image_button_pressed"/>

You can also add another objectAnimator to the set to alter translationZ to make it rise on press (as per material guidelines)

I tried this - but it doesn't work - I guess you cant animate padding like this because there is no setter for padding. I tried your approach and used translationX - and YES it works so far. BUT - this moves the whole button, not only the image in it. — ManniAT, Sep 12 '18 at 23:20
Oh... Bleh. My bad, I got lazy with testing this. You can probably animate both scaleX and scaleY. tweak the numbers a bit. I'll update the answer — rexar5, Sep 13 '18 at 19:44
Oh, and I think if you want to only move the image, you might need to make a custom view. ImageButton doesn't really expose the info to move the image inside the button. If you attach a screenshot of your button, I can get a better idea how to build a custom view for what you're looking for. Whenever I use an image button, there really isn't a distinction between the image and the button as a whole. — rexar5, Sep 13 '18 at 19:58
padding moves the image inside the button, this works - the problem is that I found no way (except in code) to change padding at runtime. — ManniAT, Sep 13 '18 at 23:05
You could try something like this: https://stackoverflow.com/questions/12247723/padding-image-from-xml-selector Might end up being more complicated than just doing it in code though. Can you add a screenshot describing what you're trying to do? — rexar5, Sep 14 '18 at 21:24

Change padding on Android ImagePadding on pressed

1 Answers1