Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Android Animations Tutorial

Hello, Developers,
Hope you are having a great time learning with AndroidtutorialPoint. In this tutorial, we will learn how to do Animations. You must have seen Animations a lot of time, for ex: while boosting your junk files using Clean Master App and in different Splash Screens of Android apps. Almost every app which offers a good mobile experience is having Animated content. It doesn’t only makes your app attractive and interacting, but also enhances UI significantly. If you are new to Android Animations, don’t worry, we will guide you step-by-step how to do it, and yes…you are at the right place!

Creating a Project

  1. Open Android Studio & Create a New Project.
  2. We used our domain androdtutorialpoint.com, kept everything by default and hit Finish.

After gradle dependencies get resolved. you may continue

BackGround Color Animations

In this Part, we will change the Background color of our Activity, we are using 5 color combinations, which will occur one after another. Sounds cool? Well, working on it is even amazing. So let’s get started!

Creating Layouts

backcolor_animation.xml

This is our base layout. Whatever happens, happens behind the stuff present on this screen. We are showing our website logo over here. The animation begins when the user clicks on the screen(anywhere). So we took a FrameLayout and will use it’s id in future.
The colors that should appear in the background should be defined now.

colors.xml

Add this in your code

    #2F312E#CB16C8#607d8b#ff9e80#00838f

Creating Logics

BackColor_AnimationActivity.java

//higher the value, Slower the animation will be
public static final long DEFAULT_ANIMATION_DURATION = 2500L;

The Entire File looks like this:

package androidtutorialpoint.myanimations;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.View;

public abstract class BackColor_AnimationActivity extends AppCompatActivity {
    public static final long DEFAULT_ANIMATION_DURATION = 2500L;
    protected View Icon;
    protected View mFrameLayout;
    protected float mScreenHeight;

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

        Icon = findViewById(R.id.img_atp);
        mFrameLayout = findViewById(R.id.container1);
        mFrameLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onStartAnimation();
            }
        });
    }

    @Override
    protected void onResume() {
        super.onResume();
        DisplayMetrics displaymetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        mScreenHeight = displaymetrics.heightPixels;
    }

    protected abstract void onStartAnimation();
}

When the user clicks on the Screen/FrameLayout, the Animations start so we are using onStartAnimation(). We will now write the Logic in Animator File. Which we will create in next step.

BackColorAnimator.java

This will inherit our previously made class and here we will define what the onStartAnimation() will do.We are using ObjectAnimator which is a subclass of ValueAnimator. It provides support for animating properties on target objects. Here or target is…any guesses? yes! the FrameLayout. All the colors we have taken have been predefined in our colors.xml , we fetch them and pass all of them in this ObjectAnimator object. Remember the DEFAULT_ANIMATION_DURATION variable we created earlier. Use it’s value in setDuration() which can be accessed using ObjectAnimator object.
Entire File looks like this:

 
package androidtutorialpoint.myanimations;

import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.support.v4.content.ContextCompat;

public class BackColorAnimator extends BackColor_AnimationActivity {

    @Override
    protected void onStartAnimation() {
        ObjectAnimator objectAnimator = ObjectAnimator.ofObject(mFrameLayout, "backgroundColor",
                new ArgbEvaluator(),
                ContextCompat.getColor(this, R.color.backcolor_1),
                ContextCompat.getColor(this, R.color.backcolor_2),
                ContextCompat.getColor(this, R.color.backcolor_3),
                ContextCompat.getColor(this, R.color.backcolor_4),
                ContextCompat.getColor(this, R.color.backcolor_5));


        objectAnimator.setDuration(DEFAULT_ANIMATION_DURATION);
        objectAnimator.setRepeatCount(1);
        objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
        objectAnimator.start();
    }
}

This is how this Module Looks like:

Simple isn’t? Well wait, we got some more!

Animation to Send Money!

You must have seen those Gaming apps where we send free coins/gifts to our friends. This part of the app is inspired by that feature only
Here, we are creating an animation, to send money to your Friend. As you know, we need a base layout first so let’s create one!

Creating Layout

coin_base_animation.xml

Now again we need an Animation Activity, to write the Logic.

Creating Logics

SendCoin_AnimationActivity.java

Sending Money at slower speed won’t look cool, so we reduced the Animation duration in this part.
DisplayMetrics have the ability to provide us some information about a display, such as its size, density, and font scaling.
To access the DisplayMetrics members, we initialize an object like this:

DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
mScreenHeight = displaymetrics.heightPixels;

Entire File looks like this:

package androidtutorialpoint.myanimations;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.View;

public abstract class SendCoin_AnimationActivity extends AppCompatActivity {
    public static final long DEFAULT_ANIMATION_DURATION = 2000L;
    protected View Coin;
    protected View mFrameLayout;
    protected float mScreenHeight;

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

        Coin = findViewById(R.id.coin);
        mFrameLayout = findViewById(R.id.container2);
        mFrameLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onStartAnimation();
            }
        });
    }

    @Override
    protected void onResume() {
        super.onResume();
        DisplayMetrics displaymetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        mScreenHeight = displaymetrics.heightPixels;
    }

    protected abstract void onStartAnimation();
}

Now let’s jump to our Animator File.

SendCoinAnimator.java

While Sending money and after the money is Sent, we are informing user using Toasts.

package androidtutorialpoint.myanimations;

import android.widget.Toast;

public class SendCoinAnimator extends SendCoin_AnimationActivity {
    @Override
    protected void onStartAnimation() {
        Toast.makeText(SendCoinAnimator.this, "Please Wait...", Toast.LENGTH_SHORT).show();
        Coin.animate().translationY(-mScreenHeight)
                .rotationBy(360f)
                .setDuration(DEFAULT_ANIMATION_DURATION)
                .start();
        Toast.makeText(SendCoinAnimator.this, "Your Friend Recieved Money! :)", Toast.LENGTH_SHORT).show();
    }
}

This is how this Module Appears like:

Dual Animation – Animating two Objects

Creating Layouts

dual_animation.xml

Creating Logic

Dual_AnimationActivity.java

By now you may have noticed this is the part, where we are having two Layouts to Animate. We took two ImageView in our XML file above.

package androidtutorialpoint.myanimations;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.View;

public abstract class Dual_AnimationActivity extends AppCompatActivity {
    public static final long DEFAULT_ANIMATION_DURATION = 2500L;
    protected View MJ;
    protected View Hat;
    protected View mFrameLayout;
    protected float mScreenHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.dual_animation);

        MJ = findViewById(R.id.Michael);
        Hat = findViewById(R.id.Hat);

        mFrameLayout = findViewById(R.id.container3);
        mFrameLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onStartAnimation();
            }
        });
    }

    @Override
    protected void onResume() {
        super.onResume();
        DisplayMetrics displaymetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        mScreenHeight = displaymetrics.heightPixels;
    }

    protected abstract void onStartAnimation();
}

Dual_Animator.java

package androidtutorialpoint.myanimations;

import android.animation.AnimatorSet;
import android.animation.ValueAnimator;

public class Dual_Animator extends Dual_AnimationActivity {
    @Override
    protected void onStartAnimation() {
        ValueAnimator positionAnimator = ValueAnimator.ofFloat(0, -mScreenHeight);
        positionAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                MJ.setTranslationY(value);
                Hat.setTranslationY(value);
            }
        });

        ValueAnimator rotationAnimator = ValueAnimator.ofFloat(0, 360);
        rotationAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                Hat.setRotation(value);
            }
        });

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(positionAnimator).with(rotationAnimator);
        animatorSet.setDuration(DEFAULT_ANIMATION_DURATION);
        animatorSet.start();
    }
}

This is how the UI of this Part looks like:

Finishing the Application

Creating Layout – activity_main.xml

As you might have already seen, the app is divided into three parts. We need to show that now to the user.



        

        

    

Creating Logic – MainActivity.java

The Code is pretty simple, but in case of any queries feel free to comment below

package androidtutorialpoint.myanimations;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    Button btnBackcolor, btnSendCoin, btnDual;
    Intent intent;

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

        btnBackcolor = (Button) findViewById(R.id.backcolor);
        btnSendCoin = (Button) findViewById(R.id.sendcoin);
        btnDual = (Button) findViewById(R.id.btnDual);

        btnBackcolor.setOnClickListener(this);
        btnSendCoin.setOnClickListener(this);
        btnDual.setOnClickListener(this);
    }

    public void onClick(View v) {
        int id = v.getId();
        switch (id) {
            case R.id.backcolor:
                intent = new Intent(getApplicationContext(), BackColorAnimator.class);
                startActivity(intent);
                Toast.makeText(getApplicationContext(), "Touch Anywhere on Screen!", Toast.LENGTH_SHORT).show();
                break;
            case R.id.sendcoin:
                intent = new Intent(getApplicationContext(), SendCoinAnimator.class);
                startActivity(intent);
                Toast.makeText(getApplicationContext(), "Want to Send Money?", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btnDual:
                intent = new Intent(getApplicationContext(), Dual_Animator.class);
                startActivity(intent);
                Toast.makeText(getApplicationContext(), "Let's Fly & Spin Together! :D", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

The Main Screen

This was it! Now user can choose any of these 3 options to launch the corresponding Animation. Now as you are familiar with Android Animations, you can keep exploring more and more and check out our other tutorials too! In case of any queries make sure you comment. Thankyou!

The post Android Animations Tutorial appeared first on Android tutorials for hassle-free android development and programming.



This post first appeared on Android Tutorial Point, please read the originial post: here

Share the post

Android Animations Tutorial

×

Subscribe to Android Tutorial Point

Get updates delivered right to your inbox!

Thank you for your subscription

×