Build Zoom Animation App in Android

 Hello Guys ,

    In this tutorial , we are going to create zoom animation on android app. we can make android app more attractive using zoom animation. In this app we create two button Zoom-in and Zoom-out for animation. These animation is used to enlarge and reduce the size of the view in application. 

and

  Feel free to visit my previous Animation tutorial.

     Fade Animation

Zoom Animation App MainScreen looking like below picture : 

Let's implemented Zoom Animation App.

Step 1 : Create a new Project

Step 2 : Create the animation file.

• Go to res folder and create a new Android Resource Directory named "anim". And in the anim resource directory create new animation files. Here We create 2 animation files. Animation files names are zoom_in.xml and zoom_out.xml.
• zoom_in.xml 

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

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2"
        android:toYScale="2"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:duration="1000"/>

</set>

• zoom_out.xml

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

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:duration="1000"/>

</set>

• android:duration : It is used to specify  duration for animation. 
• android:fromXScale : It is used to set initial size of the view in X-axis.
• android:fromYScale : It is used to set initial size of the view in Y-axis.
• android:toXScale : It is used to set final size of the view in X-axis.
• android:toYScale : It is used to set final size of the view in Y-axis.

Step 3 : Edit activity_main.xml file

• Here we added two button and textview for perform zoom animation.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ps_Inf0"
        android:textAllCaps="false"
        android:layout_centerInParent="true"
        android:textSize="30sp"
        android:textColor="@color/design_default_color_secondary"/>


    <Button
        android:id="@+id/btn_zoom_in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="82dp"
        android:textAllCaps="false"
        android:layout_marginBottom="48dp"
        android:text="Zoom In" />

    <Button
        android:id="@+id/btn_zoom_out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="82dp"
        android:layout_marginBottom="48dp"
        android:textAllCaps="false"
        android:text="Zoom Out" />

</RelativeLayout>

Step 4 : Implement MainActivity.java class file.

• In this class we can load animation class using Animation class.

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

import java.util.zip.ZipEntry;

public class MainActivity extends AppCompatActivity {

    Button ZOOMIN , ZOOMOUT;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ZOOMIN = findViewById(R.id.btn_zoom_in);
        ZOOMOUT = findViewById(R.id.btn_zoom_out);
        textView = findViewById(R.id.text);

        ZOOMIN.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation = AnimationUtils.loadAnimation(
                        getApplicationContext() , R.anim.zoom_in);
                textView.startAnimation(animation);

            }
        });

        ZOOMOUT.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation = AnimationUtils.loadAnimation(
                        getApplicationContext() , R.anim.zoom_out);
                textView.startAnimation(animation);
            }
        });
    }
}

Output :

If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support.  🙏