BungeeAnimation is an animation library that helps to gain the attention of the user. As it is known that apps are made up of many activities so it is common for the user to travel between different activities in an app. By adding animation on those transactions it will surely attract users. Activities can switch without using Bungee but as it is known that Bungee is an Animation Library and animations help to gain the attention of the user so it is best to learn it.
Activity transition animations provided by Bungee are:
| Transition Animations | Functionality |
|---|---|
| split | Start activity will be split into 2 parts, animate them in the way out and revealing destination activity. |
| shrink | Destination activity will appear from the center of the screen resulting in shrinking the start activity |
| card | Destination activity will appear from left and added at the top of start activity |
| in and out | Start activity will go in the left-center of the screen whereas destination activity will appear from the right side of the screen |
| swipe left | Destination activity will appear from the right side of the screen and start activity will disappear to the left side of the screen |
| swipe right | Destination activity will appear from the left side of the screen and start activity will disappear to the right side of the screen |
| slide up | Destination activity will appear from the bottom of the screen and start activity will go to the top of the screen |
| slide down | Destination activity will appear from the top of the screen and start activity will go to the bottom of the screen |
| slide left | Destination activity will appear from the right of the screen and start activity will go to the left of the screen |
| slide right | Destination activity will appear from the left side of the screen and start activity will go to the right side of the screen |
| zoom | Start activity will go at the center of the screen i.e. zoom in at the center whereas destination activity will appear from the boundary of the screen |
| fade | Start activity will disappear slowly resulting in showing the destination activity. |
| spin | Start activity will disappear and destination activity will appear to the user making the transition in a spin. |
| diagonal | Destination activity will appear from the top left corner of the app |
| windmill | Start activity will go at the top right screen and destination activity will appear from the top left side of the screen i.e. both activities will act as a fan of the windmill |
Approach
- Step 1: Add the support library in the root build.gradle file (not your module build.gradle file). This library jitpack is a novel package repository. It is made for JVM so that any library which is present in github and bitbucket can be directly used in the application.
XML
- Step 2: Add the support Library in build.gradle file and add dependency in the dependencies section.
XML
implementation 'com.github.Binary-Finery:Bungee:2.0' |
- Step 3: Now create a new empty activity (go to app -> new -> activity -> empty activity) and named it as SecondActivity and also generate the layout file. Add the following code to the activity_second.xml file. In this file add a TextView to the layout.
activity_second.xml
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".SecondActivity"> <TextView android:textStyle="bold" android:textAlignment="center" android:layout_margin="12dp" android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp" android:textColor="@color/colorPrimary" android:text="GeeksForGeeks - A Computer Science Portal For Geeks" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout> |
- Step 4: Now add the following code to the SecondActivity.java file. In this file add a Bungee Animation to onBackPressed() function. So whenever user click back button slideLeft() function will be called.
SecondActivity.java
XML
package org.neveropen.gfgexcuseme;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import spencerstudios.com.bungeelib.Bungee;public class SecondActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); } // whenever user taps on BackButton // slideLeft animation will be // shown to the user @Override public void onBackPressed() { super.onBackPressed(); Bungee.slideLeft(this); }} |
- Step 5: Add the following code in activity_main.xml file. In this file add various Buttons in the layout which will open SecondActivity with different animation when user tap on it.
activity_main.xml
C++
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"> <Button android:layout_marginTop="40dp" android:textAllCaps="false" android:layout_marginBottom="20dp" android:layout_gravity="center" android:id="@+id/zoom_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with zoom animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/split_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with split animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/shrink_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with shrink animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/card_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with card animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/fade_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with fade animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/diagonal_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with diagonal animation" android:onClick="Open" /></LinearLayout> |
- Step 6: Add the following code in MainActivity.java file. Now on clicking any Button the Open() function is started and the corresponding animation will be performed.
MainActivity.java
C++
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"> <Button android:layout_marginTop="40dp" android:textAllCaps="false" android:layout_marginBottom="20dp" android:layout_gravity="center" android:id="@+id/zoom_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with zoom animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/split_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with split animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/shrink_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with shrink animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/card_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with card animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/fade_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with fade animation" android:onClick="Open" /> <Button android:textAllCaps="false" android:layout_margin="20dp" android:layout_gravity="center" android:id="@+id/diagonal_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="open with diagonal animation" android:onClick="Open" /></LinearLayout> |
