Animations in Android play an important role in the user experience. This makes the user focus on the main content, which they want. And also helps in user interactivity. Animations communicate with the user to really get engaged in application usage. So in this article, one of the animations in android which is the most popular one, Circular reveal animation is discussed. Have a look at the following image to get an idea of how the circular animation looks like. Note that we are going to implement this project using the Kotlin language.
Steps to Implement the Circular Animation in Android
Step 1: Create an empty activity project
- Create an empty activity Android Studio Project. Or refer to Android | How to Create/Start a New Project in Android Studio? to know how to create an empty activity Android Studio project. Note that select Kotlin as the programming language.
Step 2: Working with the activity_main.xml file
- To implement the application’s main layout in which includes only a single button, which when clicked on it triggers the Circular reveal animation.
- To implement the UI invoke the following code inside the activity_main.xml file.
Now revealing the same layout from the bottom of the screen
Step 3: Working with the MainActivity.kt file
- Firstly, the code is for the circular reveal animation from the right bottom of the screen.
- Invoke the following code and refer to its output for better understanding, the comments are added for better understanding.
Now revealing the same layout from the center of the screen
Note: The layout of the application remains same only the code from the MainActivity.kt file are changed.
- Invoke the following code inside the MainActivity.kt file to reveal the same layout from the center of the screen.