Animation: In android how to scale & fade a view consisting of multiple lines of text from a central point

Question

I want to animate a view consisting of multiple lines of text as shown in link https://dl.dropboxusercontent.com/u/8003415/animation.gif . This view consists of two TextViews enclosed in a parent view.

This parent view, contains two sets of animation.

1) the first set of view contains multiple lines of text which gets scaled from normal to large and then fades out.

2) second set of view contains another set of multiple text which fades and scales from small to normal.

please note that scaling and fading should happen simultaneously.

for the first set I designed the below animation set.This animation set scales((1,1)to (1.5,1.5))) and fades the text block from centre.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/custom_decelerator" >

    <scale
        android:duration="50"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />

    <alpha
        android:duration="2000"
        android:fromAlpha="2.0"
        android:toAlpha="0.0" />

</set> 

and for the second set also scales ((-1,-1)to (1,1)))and fades the text block from centre

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/custom_decelerator" >

    <alpha
        android:duration="50"
        android:fromAlpha="0.0"
        android:toAlpha="0.2" />

    <scale
        android:duration="3000"
        android:fromXScale="-1"
        android:fromYScale="-1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

</set>

The problem is that, the two sets of animation is exactly not matching the animation specified in above link.

The animation doesn’t seem to originate from the dead centre of the text blocks.

Answer 1

I haven`t really worked with the animations, so thought to give it a try. Trial and error led to POC level app. Hence the bunch of code.

Note that i have used some static views and repeated the animations on them.That can be polished for the expected output mentioned.

There were some minor problems in the animation example, i have fixed that. Code snippets are as follows.

anim/zoom_to_medium.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<scale
    android:duration="1000"
    android:fromXScale="0"
    android:fromYScale="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatMode="restart"
    android:toXScale="1.0"
    android:toYScale="1.0" />

<alpha
    android:duration="50"
    android:fromAlpha="0.0"
    android:toAlpha="0.2" />
</set>

anim\zoom_to_full.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<scale
    android:duration="1000"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatMode="restart"
    android:toXScale="2"
    android:toYScale="2" />

<alpha
    android:duration="1000"
    android:fromAlpha="2.0"
    android:toAlpha="0.0" />
</set>

activity_main.xml

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/border_circle"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/llFish"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="36%"
                android:textColor="@android:color/black"
                android:textSize="42dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:includeFontPadding="false"
                android:text="Cat \n owners"
                android:textColor="@android:color/black"
                android:textSize="42dp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/llDog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="54%"
                android:textColor="@android:color/black"
                android:textSize="42dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:includeFontPadding="false"
                android:text="Fish \n owners"
                android:textColor="@android:color/black"
                android:textSize="42dp" />

        </LinearLayout>

      </RelativeLayout>

        <Button
        android:id="@+id/btnToggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Click Me" />
  </RelativeLayout>

MainActivity.java

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private LinearLayout llDog;
    private LinearLayout llFish;
    private Animation zoomToMed, zoomToFull;
    private Button btnToggle;
    private boolean isRunning;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        llDog = (LinearLayout) findViewById(R.id.llDog);
        llFish = (LinearLayout) findViewById(R.id.llFish);

        zoomToMed = AnimationUtils.loadAnimation(this, R.anim.zoom_to_medium);
        zoomToFull = AnimationUtils.loadAnimation(this, R.anim.zoom_to_full);

        zoomToFull.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                hideViews();
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        startAnimations();
                    }
                }, 1000);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });


        btnToggle = (Button) findViewById(R.id.btnToggle);
        btnToggle.setOnClickListener(this);
    }

    private void hideViews() {
        llDog.setVisibility(View.GONE);
        llDog.setVisibility(View.GONE);
    }

    private void startAnimations() {
        llDog.setVisibility(View.VISIBLE);
        llFish.setVisibility(View.VISIBLE);
        llDog.startAnimation(zoomToMed);
        llFish.startAnimation(zoomToFull);
    }


    @Override
    public void onClick(View view) {
        isRunning = !isRunning;
        if (isRunning) {
            startAnimations();
        } else {
            hideViews();

        }
    }
 }

and the bonus shape drawable for the red circle.

border_circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_red_dark"></stroke>
    <size android:width="250dp" android:height="250dp" />
</shape>