Skip to content
Related Articles

Related Articles

BungeeAnimation in Android with Example
  • Difficulty Level : Medium
  • Last Updated : 23 Feb, 2021

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.
bungee-animation

Activity transition animations provided by Bungee are:

Transition AnimationsFunctionality
splitStart activity will be split into 2 parts, animate them in the way out and revealing destination activity.
shrinkDestination activity will appear from the center of the screen resulting in shrinking the start activity
cardDestination activity will appear from left and added at the top of start activity
in and outStart activity will go in the left-center of the screen whereas destination activity will appear from the right side of the screen
swipe leftDestination activity will appear from the right side of the screen  and start activity will disappear to the left side of the screen 
swipe rightDestination activity will appear from the left side of the screen  and start activity will disappear to the right side of the screen
slide upDestination activity will appear from the bottom of the screen  and start activity will go to the top of the screen
slide downDestination activity will appear from the top of the screen  and start activity will go to the bottom of the screen
slide leftDestination activity will appear from the right of the screen  and start activity will go to the left of the screen
slide rightDestination activity will appear from the left side of the screen  and start activity will go to the right side of the screen
zoomStart 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
fadeStart activity will disappear slowly resulting in showing the destination activity.
spinStart activity will disappear and destination activity will appear to the user making the transition in a spin.
diagonalDestination activity will appear from the top left corner of the app
windmillStart 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 bigbucket can be directly used in the application.




    allprojects {           
     repositories {           
            maven { url 'https://jitpack.io' }           
         }          
    }           
  • Step 2: Add the support Library in build.gradle file and add dependency in the dependencies section.




    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 version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 
        xmlns:tools="http://schemas.android.com/tools"
        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




    package org.geeksforgeeks.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 animaion 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




    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:tools="http://schemas.android.com/tools"
        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/diagnol_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="open with diagnol 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 corresponding animation will be performed.

    MainActivity.java




    package org.geeksforgeeks.bungee          
      
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.View;
    import androidx.annotation.Nullable;
    import androidx.appcompat.app.AppCompatActivity;
    import spencerstudios.com.bungeelib.Bungee;
      
    public class MainActivity extends AppCompatActivity {
      
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }
      
        // whenever user tap on any button
        // this function will get invoked 
        // automatically and corresponding 
        // case will be executed. 
        public void Open(View v){
            switch(v.getId()){
                case R.id.zoom_button:
                    startActivity(new Intent(this,
                         SecondActivity.class));
                    Bungee.zoom(this);
                    break;
                case R.id.split_button:
                    startActivity(new Intent(this
                         SecondActivity.class));
                    Bungee.split(this);
                    break;
                case R.id.shrink_button:
                    startActivity(new Intent(this
                          SecondActivity.class));
                    Bungee.shrink(this);
                    break;
                case R.id.card_button:
                    startActivity(new Intent(this,
                         SecondActivity.class));
                    Bungee.card(this);
                    break;
                case R.id.fade_button:
                    startActivity(new Intent(this,
                         SecondActivity.class));
                    Bungee.fade(this);
                    break;
                case R.id.diagnol_button:
                    startActivity(new Intent(this,
                         SecondActivity.class));
                    Bungee.diagonal(this);
                    break;
            }
      
        }
    }

Recommended Articles
Page :