CODEWITHSUNDEEP
androidandroid-layoutanimationandroid-animation
Escobar5
Escobar5

Reputation: 4082

Android concentric circles scale animation

I´m trying to create an animation where two concentric circles scale (with the pivot on its center) up and down.

If I set the animation to any of the two circles it scales correctly on its center, but if I set the animation to both circles, the pivot is wrong.

Here is a screenshot:

Wrong pivot on scale

This is my layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <RelativeLayout
        android:id="@+id/soundCircle"
        android:layout_width="230dp"
        android:layout_height="230dp"
        android:layout_gravity="center">

        <View
            android:id="@+id/soundRipple2"
            android:layout_width="230dp"
            android:layout_height="230dp"
            android:background="@drawable/circle"
            android:alpha="0.08"
            android:layout_centerInParent="true"/>
        <View
            android:id="@+id/soundRipple3"
            android:layout_width="160dp"
            android:layout_height="160dp"
            android:background="@drawable/circle"
            android:alpha="0.08"
            android:layout_centerInParent="true"/>

    </RelativeLayout>
</LinearLayout>

and this is the animation:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toXScale="0.7"
    android:toYScale="0.7" 
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatMode="reverse"
    android:fillAfter="true"
    android:repeatCount="infinite"/>

Upvotes: 3

Views: 4260

Answers (2)

Bhavin Chauhan
Bhavin Chauhan

Reputation: 2010

I have tried this animation and animation works fine. After navigate some website and git repository. I found one best solution, may be it will also help you. You don't need to add multiple views for that animation. Just visit once, I am sure you also like this effect. https://github.com/skyfishjy/android-ripple-background

Upvotes: 0

Lamorak
Lamorak

Reputation: 11137

This is probably caused by the pivot point shared by the two instances of the same animation. After I played with this for a while, I figured out that this works if you assign different instances of the animation to the Views.

This is the code I have used:

Animation pulse = AnimationUtils.loadAnimation(this, R.anim.pulse);
Animation pulse2 = AnimationUtils.loadAnimation(this, R.anim.pulse);

circle1.startAnimation(pulse);
circle2.startAnimation(pulse2);

Upvotes: 1

Related Questions