Kotlin Android Activity Transition Animation Examples

Android Activity Transition

To create a modern app, you may want to use transition animations in your activity. Android Framework provides the capability to induce sleek animated transitions as you open or exit an activity. In this article we want to look at how to include such transitions.

Example 1: Kotlin Android – Activity Transitions without any library

Let’s see an example of how to create animated transitions without using third party library.

Step 1: Dependencies

No third party dependency is needed.

Step 2: Animations

The next step is to actually write these animations in XML and include them in a resource directory named anim. If such a directory doesn’t exist in your app then create it.

After creating the anim directory we will add the following animation files in them:

slide_down.xml

Then we add the following code:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="50"
        android:fromYDelta="0%p"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toYDelta="100%p" />

</set>

slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="100"
        android:fromYDelta="100%"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="0" />

</set>

Step 3: Styles

In the third step we need to actually apply the animations to the activities. However, this is done declaratively at the theme level as opposed to the activity level

So in the styles.xml file create a style as follows:

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

Then apply it to the theme as follows:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

Here’s the full styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

</resources>

Step 4: Activities

We will have three activities:

  1. ActivityA
  2. ActivityB
  3. ActivityC

ActivityA.kt

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityA : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_a)
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }
}

ActivityB

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityB : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_b)
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }
}

ActivityC

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityC : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_c)
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }
}

That’s all the kotlin code we write.

Step 5: Layouts

Find the layout codes in the source code download.

Step 6: Run

Run the project and you will get the following:

Activity Transitions Example

Step 7: Download

Download the source code from here.

Examples with Libraries

To make you app more modern, you can include transition animations between activities. There are different ways this can be done and in this piece we want to examine them.

(a). Use Intent Animation Library

This library is as easy as it gets. You can easily include different type of animations in your activities.

Step 1: Installation

Start by install the library. It is hosted in jitpack:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Then add the implementation statement as a dependency:

implementation 'com.github.hajiyevelnur92:intentanimation:1.0'

Step 2: Code

Here is the code:

import static maes.tech.intentanim.CustomIntent.customType;
//MainActivity or any activity name
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //.....//

        //here is library
        customType(MainActivity.this,"here is animation name");
}
   //Here are the animations
*left-to-right
*right-to-left
*bottom-to-up
*up-to-bottom
*fadein-to-fadeout
*rotateout-to-rotatein

Links

Download the full code here.

(b). Transitions with Bungee

Bungee is a Lightweight Android library for cool activity transition animations.

This solution supports a minimum SDK of 16 (Android Jellybean 4.1).

Bungee has 15 different activity transition animations:

  • split
  • shrink
  • card
  • in and out
  • swipe left
  • swipe right
  • slide up
  • slide down
  • slide left
  • slide right
  • zoom
  • fade
  • spin
  • diagonal
  • windmill

You can download the demo app here to check it in action.

Step 1: Install it

To install it start by registering jitpack as a maven repositort url in your project folder’s build.gradle:

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Then in your app folder’s build.gradle declare the dependency as an implementation statement:

dependencies {
            implementation 'com.github.Binary-Finery:Bungee:3.0'
    }

Step 2: Write Code

Only one line code is needed to use Bungee. For example in this case a zoom animation is fired:

startActivity(new Intent(context, TargetActivity.class));
Bungee.zoom(context);  //fire the zoom animation

Or let;s say you want to fire the animation when the back button is pressed:

@Override
public void onBackPressed(){
  super.onBackPressed();
  Bungee.slideLeft(context); //fire the slide left animation
}

Here are all the available methods:

Bungee.split(context);
Bungee.shrink(content);
Bungee.card(context);
Bungee.inAndOut(context);
Bungee.swipeLeft(context);
Bungee.swiperRight(context);
Bungee.slideLeft(context); 
Bungee.slideRight(context); 
Bungee.slideDown(context);
Bungee.slideUp(context);
Bungee.fade(context);
Bungee.zoom(context);
Bungee.windmill(context);
Bungee.diagonal(context);
Bungee.spin(context);

Run

Run the project.

Reference

Here are the reference links:

No. Link
1. Read more
2. Follow code author

BEFORE YOU GO

YOU'VE BEEN SELECTED FOR A GIFT

Thanks for stopping by. My name is Oclemy(Clement Ochieng) and we have selected you as a recipient of a GIFT you may like ! Together with Skillshare we are offering you PROJECTS and 1000s of PREMIUM COURSES at Skillshare for FREE for 1 MONTH. To be eligible all you need is by sign up right now using my profile .

Related Examples

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code