Custom Animations in Android Studio
Animation refers to the movement of any object. In Android Studio, animations are broadly of two types,
-Property Animations
-View Animations
We can use animations to provide users with relevant information and also improve the UI. There are many ways to customize our animation.
Firstly, let us look at how we can create animations using the Motion Layout feature. This method is particularly interesting because it involves writing very little code and gives us very interesting outputs. Motion Layout is a special sub-class of the Constraint Layout and helps create a lot of animations.
Flip Animation using Motion Layout:
Flip animations are extremely useful if you want to create an app that manages all your cards or maybe create an educational app where you want to use flip cards to display content.
Step 1:
Add the necessary widgets in your XML(Layout) file and make sure that you are working with Constraint Layout. In this post, we are going to use just two TextViews, one with the text “Front Card” and the other with the text “Back Card”.
Step 2:
This is one of the most important steps in the animating process. Set alpha to 1 in the front card (android:alpha=”1”) and set alpha to 0 in the back card (android:alpha=”0”). The alpha value refers to the opacity and takes a value between 0 and 1, where 1 means fully visible and 0 means completely transparent.
Step 3:
Now, open the XML file and switch to the Design tab. Navigate to the component tree and right click on Constraint Layout. Choose the “Convert to MotionLayout” option from the list. You can see that the Constraint Layout has now been replaced by Motion layout and a new screen will pop up on the right.
A new resource file ending with _scene.xml is created in res>xml. This will be useful later.
Step 4:
Click on the card that says “end”. To set the constraints, open the attributes tab and click on the card front in ConstraintSet. Since we want to display the back of the card after flipping, set the alpha value of the front card to zero and back card to one in the attributes tab.
Step 5:
Click on the arrow from start to end in the motion layout tab. Then, click on the small clock symbol in the top right of the transitions tab. From the drop-down menu, choose the KeyAttribute option and set the values according to the image given below and click on add.
In the attributes tab under Rotations, set rotationY to 180 implying you want to do a 180 degree rotation along the Y-axis.
Step 6:
Finally, click on the third symbol on the top right corner of the motion layout tab. And choose the Click Handler Option from the list. It basically starts the animation once you click on the Text view.
Voila, we are done with the flip card animation.
Splash Screen Animation using Motion Layout
A splash screen is the first screen in your application. It is visible while the app is loading. First impression is the best impression and hence making sure you have an attractive Splash Screen is very important for providing the user with a good UI experience.
Step 1:
In res>drawable, add a new drawable resource file and insert the following code:
In the same folder, insert a new vector asset of your choice.
Step 2:
In the main XML file, set the layout to constraint layout and insert another constraint layout which is centered. Set the background of the constraint layout as the shape drawable we created in step 1. Inside the new constraint layout, add two Image View and set the source for both as the vector asset. Set the tint of one of the Image View the same as the background and the other Image View’s tint as white.
This is the XML file for the splash screen.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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"
app:layoutDescription="@xml/activity_splash_screen_scene"
tools:context=".SplashScreen">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bglayout"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="@drawable/bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="@+id/greenand"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/baseline_android_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/whiteand"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/baseline_android_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="@color/white" />
</androidx.constraintlayout.motion.widget.MotionLayout>Step 3:
Now, navigate to the component tree in the design view and right click on the first constraint layout and click on convert to MotionLayout.
Step 4:
In the motion layout tab, click on start and set the constraint of the background constraint layout(bglayout in this example) with scaleX = 10 and scaleY = 10. Set the scaleX and scaleY of the coloured image view as 0 and alpha also as 0 and set the scaleX and scaleY of the white image view as 1.
Similarly, click on end and set the constraint of the background constraint layout with scaleX = 0 and scaleY = 0. Set the scaleX and scaleY of the coloured image view as 1 and alpha also as 1 and set the scaleX and scaleY of the white image view as 0.
Step 5:
In the _scene.xml file that was created while converting to MotionLayout, make the following changes.
Step 6:
Now, we have created a fully functioning animation. To make it work like a splash screen, we need to add some code in the java file.
//SplashScreen.java
package com.example.animations;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
public class SplashScreen extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash_screen);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
startActivity(new Intent(SplashScreen.this,MainActivity.class));
finish();
}
},3000);
}
}This code essentially displays the splash screen and waits for 3000ms before opening the required activity
Note: If you aren’t using MainActivity as your splash screen then make the splash screen activity as the Landing Page using the Intent filter in the AndroidManifest.xml file.
Activity transition using Motion Layout
Switching between activities is a very common way to keep an app organized and adding a transition between two activities can make an app look better and more visually appealing.
This type of animation is possible in Android 5.0 (API level 21) and higher.
In this section we will go through the process of making a simple transition from one activity to another.
Step 1:
First, we create a second activity, this can be done easily by right clicking on the layout folder and adding a new activity.
Here, we name our second activity “activity_page2” the corresponding xml and java files are created. We rename our java file to page2 for simplicity purposes.
Now a completely separate activity has been created which can be initialized on command from another activity. In our project, we would have only two activities, the default main activity and the newly created activity_page2.
Step2:
Now, let us create a button in the main activity. This button would accept user input to initiate a transition and change of activity. This is purely optional and there are many ways to achieve the same without a button, but for the sake of simplicity we use a button here.
The following are the button properties along with a OnClick method. This will automatically create a function in the corresponding java script to execute code when the button is pressed. We name this function “go”. This is done for no specific reason.
The same can be done in activity_main2 as well to switch back to the main activity.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:background="@color/black"
tools:context=".page2">
<Button
android:id="@+id/button"
android:layout_width="85dp"
android:layout_height="41dp"
android:onClick="back"
android:text="switch!"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.892" />
<ImageView
android:id="@+id/photo"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/animation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button3"
android:layout_width="77dp"
android:layout_height="40dp"
android:onClick="play"
android:text="Play"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.764" />
</androidx.constraintlayout.widget.ConstraintLayout>Step3:
Now for the next step we create animation resource files. One for sliding in animation and one for sliding out animation.
Right click on the res directory to create a new resource directory and make it of type anim and also name it anim for simplicity purposes.
These resource files basically allow us to define certain values which would be used to define what properties we would animate and how we would do it.
For the transition, we would be sliding in one activity while sliding out the other at the same time.
The slide out animation is basically the activity page collapsing along the x axis and the slide in is the second activity page expanding along the x axis.
For the slide out animation, the code is as follows,
For the slide out animation from the second activity,
When these following code blocks are called, the respective changes will take place on the element of choice.
Finally the following code allows us to trigger the animation when a button is pressed.
The function go() is linked to the button present in the main activity. This can be done by adding the XML code for the button.
android:onClick="go"The following code will be seen as an error, but on prompting, Android Studio will create a function for us automatically.
The transition animation is done for the main activity to the second activity as well as the other way around.
The above code first creates an explicit intent to move from the current activity to the second activity, which in our case is called “page2”.
The “page2” activity is started and at the same time, the overridependingTransition() function executes the animation, it takes two parameters, the first being entry animation id and second being exit animation id.
Final output would look something similar to this
Vector animations using AnimatedVectorDrawable
This section will go through the process of creating a vector animation and playing it in Android Studio on command.
First off, we need to create a vector animation,
For this tutorial, we will be making a simple tick mark animation.
There are many ways to make a vector animation. In case, you already have one, you may choose to skip through this section.
Visit the following website to create a simple vector image.
https://vectr.com/design/editor/2bdd812b-2dea-44e0-b4fe-1b90451f918b
Next, we need to animate this vector image.
Visit the following website,
Import your SVG file into shapeshifter, the vector image should be separated into multiple individual components. Play around with the different settings and make the animation of your choice.
Finally, export your work as a Animated Vector Drawable file and save it to your local directory.
Now back to Android Studio.
First we need a placeholder for our animation, this is simply done by adding a ImageView object.
In the res directory, import your Animated Vector Drawable, in the drawable folder.
The file will throw an error as animated vector files are not supported for versions below 21. This can easily be bypassed by right clicking on animated-vector and pressing alt+enter.
Now our animation is inside android studio!
Now we tell the ImageView object to render our animation.
In this case, the XML file is called “animation”. If the file is imported correctly, a small preview should be visible on the far left side of the line that imports the animation.
Now we can return back to our activity page to actually play the animation when a button is pressed, first we add a button with a pre-defined Onclick function called play().
This creates the respective function block in our main java code.
We now give a reference to the image view object, this is basically referring to the animation we just created and linked to the image view. Here, photo is the id of the image view.
After this reference is declared, the actual animation can be played, since we want the animation to play when the “play” button is pressed, we add the following code in the Onclick function of the “play” button which was called play().
A new AnimatedVectorDrawable object called drawable is created and is pointed towards the animated vector drawable file linked to “img” (aka the image view).
The animation will start when the start() member function of the drawable object is called.
That’s it!, this should play the animation whenever the button is clicked, the output should look something like this,
This article has been written in collaboration with Sai Ethihas Chanda.
