Transition animations in Android Kotlin - Mini App: Build & Ship

Build: TransitionAnimationScreen

This screen demonstrates a simple transition animation between two screens using Android Kotlin. When the user taps the button, the app navigates to a second screen with a fade animation.

Target UI

---------------------
| Transition Screen  |
|                   |
|   [Go to Next]    |
|                   |
---------------------

Create two screens: MainScreen and SecondScreen

Add a button on MainScreen labeled 'Go to Next'

When the button is tapped, navigate to SecondScreen

Apply a fade transition animation during navigation

SecondScreen should have a back button to return to MainScreen with reverse animation

Starter Code

Android Kotlin

import android.content.Intent
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

class MainScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_screen)

        val button = findViewById<Button>(R.id.goNextButton)
        // TODO: Set button click listener to start SecondScreen with fade animation
    }
}

class SecondScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_second_screen)

        // TODO: Add back button functionality to finish activity with reverse animation
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import android.content.Intent
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

class MainScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_screen)

        val button = findViewById<Button>(R.id.goNextButton)
        button.setOnClickListener {
            val intent = Intent(this, SecondScreen::class.java)
            startActivity(intent)
            overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out)
        }
    }

    override fun onBackPressed() {
        super.onBackPressed()
        overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out)
    }
}

class SecondScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_second_screen)

        val backButton = findViewById<Button>(R.id.backButton)
        backButton.setOnClickListener {
            finish()
            overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out)
        }
    }

    override fun onBackPressed() {
        super.onBackPressed()
        overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out)
    }
}

We added a button click listener in MainScreen that starts SecondScreen. Immediately after starting the activity, overridePendingTransition is called with Android's built-in fade in and fade out animations to create a smooth fade effect.

In SecondScreen, a back button finishes the activity and calls overridePendingTransition again to reverse the fade animation. We also override onBackPressed in both screens to ensure the fade animation plays when the user presses the device back button.

This creates a simple and clean transition animation between the two screens.

Final Result

Completed Screen

---------------------
| Transition Screen  |
|                   |
|   [Go to Next]    |
|                   |
---------------------
         ↓ tap
---------------------
|   Second Screen    |
|                   |
|   [Back] Button   |
|                   |
---------------------

User taps 'Go to Next' button on MainScreen

Screen fades out MainScreen and fades in SecondScreen

User taps 'Back' button on SecondScreen

Screen fades out SecondScreen and fades in MainScreen

Stretch Goal

Add a slide transition animation instead of fade when navigating between screens.

💡 Hint

Use overridePendingTransition() with android.R.anim.slide_in_left and android.R.anim.slide_out_right for slide effect.