Animation in Android with Example - Software Development PDF Download

Animation in Android with Example

• Animation is the technique of introducing a motion effect to various elements like views, images, or text. It enhances user experience by adding dynamic visual elements to the user interface.
• Animations in Android serve to enrich the look and feel of the UI, making it more engaging and interactive.
• There are three main types of animations commonly used in Android:
• Property Animation
• View Animation
• Drawable Animation

Property Animation

• Property Animation stands out as a robust framework within Android, offering extensive capabilities for animating various UI elements.
• This animation framework, introduced in Android 3.0, provides powerful and flexible tools for creating dynamic visual effects.
• Property Animation is versatile, allowing animations to be applied not only to views but also to components like CheckBoxes, RadioButtons, and other widgets.

Below is an illustration showcasing a Property Animation in action:

By leveraging Property Animation, developers can create visually appealing and interactive elements within their Android applications, enhancing user engagement and overall user experience.

Animation Types

• View Animation

  View Animation involves adding animation to a specific view to execute tweened animation on views. Tweened animation calculates information like size, rotation, start point, and endpoint. These animations are relatively slower and less flexible.

  For instance, View Animation is suitable for expanding a particular layout. An example of this can be observed in the Expandable RecyclerView.

  

• Drawable Animation

  Drawable Animation is utilized when animating one image over another. This animation method involves loading a series of drawables sequentially to create an animation effect.

  For example, many apps feature a Splash screen with an animated logo, showcasing a simple instance of drawable animation.

  

Important Methods of Animation

Clear all your Software Development doubts with EduRev Join for Free

Join for Free

Example

Now let's explore a straightforward illustration of incorporating animations into an ImageView. It's important to note that we'll be utilizing Java for this project.

Step 1: Initiating a Fresh Project

If you wish to commence a new project in Android Studio, kindly follow the guidelines on initiating a new project in Android Studio. Ensure that you opt for Java as the programming language.

Step 2: Managing the strings.xml File

The strings.xml file can be located at app > res > values > strings.xml. Below is a snippet of the strings.xml file:

• <resources>
• <string name=\"app_name\">GFG App</string>
• <string name=\"blink\">BLINK</string>
• <string name=\"clockwise\">ROTATE</string>
• <string name=\"fade\">FADE</string>
• <string name=\"move\">MOVE</string>
• <string name=\"slide\">SLIDE</string>
• <string name=\"zoom\">ZOOM</string>
• <string name=\"stop_animation\">STOP ANIMATION</string>
• <string name=\"course_rating\">Course Rating</string>
• <string name=\"course_name\">Course Name</string>
• </resources>

Step 3: Integrating Google Repository in the build.gradle File

If the Google repository is not present by default in the build.gradle file of your application project, you should add it.

Exploring Android Animation Components

Android applications often include animations to enhance user experience. Let's delve into the process of integrating animations into your Android app.

Setting Up Your Project

• Ensure that you have the necessary repositories in your build.gradle file to access Jetpack components.
• All Jetpack components are conveniently available in the Google Maven repository.

Working with activity_main.xml

To add animations to your app, you'll be working with the activity_main.xml file. Here's how you can create different types of animations:

• Create an ImageView within the activity_main.xml layout.
• Add buttons to trigger various animations like blinking, rotating, fading, moving, sliding, and zooming.
• Ensure proper layout and alignment within the XML file for a seamless user interface.

Code Snippet for activity_main.xml

Creating Different Animations

Let's explore various animations you can implement for the ImageView:

• Blink Animation: Make the image rapidly switch between visible and invisible states.
• Rotate Animation: Rotate the image along a specified axis.
• Fade Animation: Gradually change the opacity of the image.
• Move Animation: Shift the position of the image on the screen.
• Slide Animation: Move the image in a specific direction across the screen.
• Zoom Animation: Scale the size of the image to create a zoom-in effect.

By incorporating these animations, you can elevate the visual appeal and interactivity of your Android application.

Creating New Animations

• To create new animations, a new directory named "anim" needs to be created to store all animations.
• Navigate to app > res > Right-Click on res >> New >> Directory and name the directory as "anim".
• Inside the "anim" directory, animations will be created by adding Animation Resource files.
• For each new animation, right-click on the "anim" directory and create a new Animation Resource file.
• Below is the code snippet for 6 different animations:

Blink Animation

Fade Animation

Move Animation

• Move Animation involves animating the movement of an object from one position to another.
• It is commonly used to create dynamic and engaging user interfaces in applications.
• Example: A button sliding in from the side of the screen when a user performs a specific action.

Animations in Android

• Translate Animation:

  Translate Animation moves a view from one position to another within the layout.

  Example: A button sliding in from the left side of the screen.

• Rotate Animation:

  Rotate Animation spins a view around a pivot point.

  Example: An image rotating 360 degrees.

• Slide Animation:

  Slide Animation scales a view up or down to make it appear or disappear.

  Example: A panel sliding in from the top of the screen.

• Zoom Animation:

  Zoom Animation enlarges or shrinks a view.

  Example: An icon expanding when tapped.

Animation Details

Download the notes Animation in Android with Example

Download as PDF

Download as PDF

Understanding Android Animation in MainActivity.java

• Working with the MainActivity.java file:
• Add animation to the ImageView by clicking a specific Button. Navigate to the app > java > your apps package name >> MainActivity.java.

Code Snippet for Animation in MainActivity.java

Steps to Implement Different Animations

• Implementing Blink Animation:
• To make the ImageView blink, an animation is loaded and applied when a specific Button is clicked.
• Implementing Rotate Animation:
• Rotation animation is added to the ImageView upon clicking a designated Button.
• Implementing Fade Animation:
• Adding a fade animation effect to the ImageView triggered by a Button press.
• Implementing Move Animation:
• Movement animation is incorporated for the ImageView upon interaction with a Button.
• Implementing Slide Animation:
• Slide animation is applied to the ImageView following a Button click event.
• Implementing Zoom Animation:
• Zoom animation effect is implemented on the ImageView when a specific Button is activated.
• Stopping an Animation:
• To halt any ongoing animation on the ImageView, a stop Button is provided for user interaction.

Additional Note on Resources

• Note:
• Drawables and strings are accessible in the drawable folder and strings.xml file. Drawables can be located at app > res > drawable.

Take a Practice Test Test yourself on topics from Software Development exam

Practice Now

Practice Now

Key Concepts and Examples

• Note: Drawables and strings are located in the drawable folder and strings.xml file.

Output

• Video Player
• 00:00
• 00:12
• Use Up/Down Arrow keys to increase or decrease volume.

Please Login to comment...

• Login
• Like