Animate and change color of icon on click

Question

I have a layout like this for my icon:

<LinearLayout
    android:id="@+id/icon_layout"
    android:layout_width="36dp"
    android:layout_height="36dp"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:background="@drawable/ic_globe"
        />

</LinearLayout>

I want to make it so that if the layout is clicked:

The image "pops" slightly (scales it from 24dp to 32dp and then back to 24dp)
Change (fade in) the color of the icon to red as it's scaling

How can I do this?

score 0 · Answer 1 · answered Oct 21 '15 at 19:41

0

Sounds like you want to set the background of your LinearLayout to a StateListDrawable that emits a "red" drawable in its pressed state. For the animation, you'll have to define an animation in XML, then run that animation with:

ImageView iconLayout = (ImageView) findViewById(R.id.icon_layout);
Animation expandAnimation = AnimationUtils.loadAnimation(this, R.anim.icon_expand);
iconLayout.startAnimation(expandAnimation);

answered Oct 21 '15 at 19:41

Mike Holler

945
2
13
28

What would the animation file look like to do the "pop" that I need? Also, a StateListDrawable would change the color of the icon **immediately**, but is there a way to *fade in* the color to red? – user5473046 Oct 21 '15 at 19:44
For color fade you can use ObjectAnimator as described [here](http://stackoverflow.com/a/14282231/1076585). If you read the android annotation documentation, you should be able to construct your animation based on the examples they give. – Mike Holler Oct 21 '15 at 20:38

score 0 · Answer 2 · answered Oct 21 '15 at 20:20

0

try this:

ImageView imageView = (ImageView) findViewById(R.id.icon);
imageView.animate().scaleX(newScaleX).scaleY(newScaleY).alpha(1).setDuration(300).start();

answered Oct 21 '15 at 20:20

Vitaly Zinchenko

4,871
5
36
52

score 0 · Answer 3 · answered Oct 21 '15 at 20:44

Try this for fade in out

private Animation animation;

animation = new AlphaAnimation(1, 0); // Change alpha from fully visible to invisible
            animation.setDuration(500); // duration - half a second
            animation.setInterpolator(new LinearInterpolator());
            animation.setRepeatCount(Animation.INFINITE); // Repeat animation infinitely
            animation.setRepeatMode(Animation.REVERSE); // Reverse animation at the end so the button will fade back in

            //Use this animation where ever you want to use
            icon.startAnimation(animation);

Animate and change color of icon on click

3 Answers3