Build Together Animation App in Android

Hello Guys ,

    In this tutorial , we are going to create together animation on android app. In this app we create one textview and one button. Button is used to perform together animation on textview. In this animation text are rotate 360 degrees and size are large whenever button was clicked.

and

  Feel free to visit my previous Animation tutorial.

     Blink Animation

Together Animation App MainScreen looking like below picture : 



Let's implemented Together 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. Animation file name is together.xml.
  • together.xml 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator">

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

<rotate android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50"
android:pivotY="50"
android:duration="500"
android:repeatMode="restart"
android:repeatCount="infinite"/>

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

</set>
  • android:duration : It is used to specify  duration for animation. 
  • android:repeatMode : It is used to define how to animation behave.
  • android:repeatCount : It is used to define how many times animation is repeat.
  • 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 button and textview for perform together 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:textSize="30sp"
    android:textColor="@color/teal_200"
    android:layout_centerInParent="true"
    />


    <Button
    android:id="@+id/btn_together_animation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Together"
    android:textAllCaps="false"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"
    android:layout_marginBottom="70dp"/>

    </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;

    public class MainActivity extends AppCompatActivity {

    Button together;
    TextView textView;

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

    together = findViewById(R.id.btn_together_animation);
    textView = findViewById(R.id.text);

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

    Output :


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

    Post a Comment

    0 Comments