CODEWITHSUNDEEP
androidbuttonandroid-animation
Lena Bru
Lena Bru

Reputation: 13947

How to programatically scale up a button or view after tapping on it

I have some buttons in my app that i want to scale up when they are clicked

for that i created a selector

selector_sms_button.xml

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

    <item android:drawable="@drawable/ic_sms_big" android:state_pressed="true"></item>
    <item android:drawable="@drawable/ic_sms" android:state_pressed="false"></item>

</selector>

and declared my button as follows

  <Button
        android:id="@+id/sms"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_sms_button" />

the problem is - the button does not grow on click at all
the size of ic_sms_big is 300x300dp and the size of ic_sms is 72x72dp

I don't want to create an animation file for them if i absolutely don't have to. the problem is the button should grow to at least 3 times its size when clicked, and it doesn't.

What can I do to fix it ?

EDIT : my request "I don't want to create an animation file" means not that i don't want to create an XML file for it, but i don't want to create a reference for it in code at all. I have 6 buttons that are supposed to do that

Upvotes: 3

Views: 4634

Answers (7)

IVAN BOLTYSHEV
IVAN BOLTYSHEV

Reputation: 1

Animation anim = new ScaleAnimation(
                    1f, 0.7f, // Start and end values for the X axis scaling
                    1f, 0.7f, // Start and end values for the Y axis scaling
                    Animation.RELATIVE_TO_SELF, 0.5f, // Pivot point of X scaling
                    Animation.RELATIVE_TO_SELF, 0.5f); // Pivot point of Y scaling
            anim.setFillAfter(false); // Needed to keep the result of the animation
            anim.setDuration(300);
            iv_logo.startAnimation(anim);

I have achieved the desired result using this. The zoomed out will be strictly in the center of the view.

Upvotes: 0

shollmann
shollmann

Reputation: 307

To implement it programmatically you could you the following code:

private void animateView() {
    AnimationSet animationSet = new AnimationSet(true);

    ScaleAnimation growAnimation = new ScaleAnimation(1.0f, 3.0f, 1.0f, 3.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    ScaleAnimation shrinkAnimation = new ScaleAnimation(3.0f, 1.0f, 3.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

    animationSet.addAnimation(growAnimation);
    animationSet.addAnimation(shrinkAnimation);
    animationSet.setDuration(200);

    viewToAnimate.startAnimation(animationSet);
}

Upvotes: 1

Lena Bru
Lena Bru

Reputation: 13947

The solution is to add padding to the smaller version of the button have it take the exact same amount of pixels as the bigger image, but have lots of padding, and then on click the image changes and the icon appears to grow

Upvotes: 1

Rohit Sharma
Rohit Sharma

Reputation: 13815

Try something like this on your button

button.animate()
      .setDuration(2000)
      .scaleX(3.0f)
      .scaleY(3.0f);

Upvotes: 0

&#193;lvaro P&#233;rez Soria
&#193;lvaro P&#233;rez Soria

Reputation: 1543

Try removing android:state_pressed="false" on the smaller button:

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

    <item android:drawable="@drawable/ic_sms_big" android:state_pressed="true"></item>
    <item android:drawable="@drawable/ic_sms" ></item>

</selector>

And also you should consider this:

  • state_selected is used when an item is selected using a keyboard/dpad/trackball/etc.
  • state_activated is used when View.setActivated(true) is called. This is used for "persistent selection" (see Settings on tablet for instance)
  • state_pressed is used when the user is pressing the item either through touch or a keyboard or a mouse
  • state_focused is used if the item is marked focusable and it receives focus either through the user of a keyboard/dpad/trackball/etc. or if the item is focusable in touch mode

Upvotes: 0

grig
grig

Reputation: 847

You should change the size of your button in onClick method:

button.setLayoutParams (new LayoutParams(width, height));

Upvotes: 0

Pierfrancesco Soffritti
Pierfrancesco Soffritti

Reputation: 1738

if you don't want to add a file, you could do it programmatically

Animation anim = new ScaleAnimation(
        1f, 1f, // Start and end values for the X axis scaling
        startScale, endScale, // Start and end values for the Y axis scaling
        Animation.RELATIVE_TO_SELF, 0f, // Pivot point of X scaling
        Animation.RELATIVE_TO_SELF, 1f); // Pivot point of Y scaling
anim.setFillAfter(true); // Needed to keep the result of the animation
v.startAnimation(anim);

Upvotes: 2

Related Questions