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.

Practice

1. What is the main purpose of using overridePendingTransition in Android Kotlin apps?

easy

A. To apply custom animations when transitioning between activities

B. To change the app's theme dynamically

C. To start a new activity without animation

D. To stop all running animations in the app

Solution

1. Step 1: Understand the role of overridePendingTransition

   This method is called right after starting a new activity to specify the enter and exit animations.

2. Step 2: Identify its effect on activity transitions

   It customizes how the new activity appears and how the old one disappears, improving user experience.

3. Final Answer:

   To apply custom animations when transitioning between activities -> Option A

4. Quick Check:

   overridePendingTransition = custom animations [OK]

Hint: Remember: overridePendingTransition controls activity switch animations [OK]

Common Mistakes:

• Thinking it changes app theme
• Assuming it disables animations
• Confusing it with stopping animations

2. Which of the following is the correct syntax to apply a transition animation after starting a new activity in Kotlin?

easy

A. startActivity(intent)
overridePendingTransition(R.anim.slide_in, R.anim.slide_out)

B. overridePendingTransition(R.anim.slide_in, R.anim.slide_out)
startActivity(intent)

C. startActivity(intent)
setTransition(R.anim.slide_in, R.anim.slide_out)

D. startActivity(intent)
overrideTransition(R.anim.slide_in, R.anim.slide_out)

Solution

1. Step 1: Recall the correct order of method calls

   You must call startActivity(intent) first, then overridePendingTransition immediately after.

2. Step 2: Verify method names and parameters

   The method is overridePendingTransition, taking two animation resource IDs for enter and exit animations.

3. Final Answer:

   startActivity(intent) overridePendingTransition(R.anim.slide_in, R.anim.slide_out) -> Option A

4. Quick Check:

   startActivity then overridePendingTransition [OK]

Hint: Call overridePendingTransition right after startActivity [OK]

Common Mistakes:

• Calling overridePendingTransition before startActivity
• Using wrong method names like setTransition
• Passing incorrect parameters

3. Given the following code snippet in an Android Kotlin app, what animation effect will the user see when transitioning to SecondActivity?

startActivity(Intent(this, SecondActivity::class.java))
overridePendingTransition(R.anim.fade_in, R.anim.fade_out)

medium

A. No animation will occur because fade_in and fade_out are invalid

B. SecondActivity slides in from the right, current activity slides out to the left

C. SecondActivity zooms in while current activity zooms out

D. SecondActivity fades in while the current activity fades out

Solution

1. Step 1: Understand the animation resource names

   Animations named fade_in and fade_out typically cause views to gradually appear or disappear by changing opacity.

2. Step 2: Apply to activity transition

   The new activity will fade in, and the old activity will fade out, creating a smooth crossfade effect.

3. Final Answer:

   SecondActivity fades in while the current activity fades out -> Option D

4. Quick Check:

   fade_in + fade_out = crossfade effect [OK]

Hint: fade_in/out means smooth appearing/disappearing [OK]

Common Mistakes:

• Assuming slide or zoom animations without checking names
• Thinking no animation occurs if unsure about resource validity
• Confusing fade with zoom or slide

4. Identify the error in the following Kotlin code snippet that tries to apply a transition animation:

startActivity(Intent(this, NextActivity::class.java))
overridePendingTransition(R.anim.slide_in_left)

medium

A. Animation resource IDs must be strings, not integers

B. Incorrect method name; should be setPendingTransition

C. Missing second animation resource parameter in overridePendingTransition

D. startActivity should be called after overridePendingTransition

Solution

1. Step 1: Check the method signature of overridePendingTransition

   This method requires two parameters: one for the enter animation and one for the exit animation.

2. Step 2: Identify the missing parameter

   The code only provides one animation resource, causing a compile-time error.

3. Final Answer:

   Missing second animation resource parameter in overridePendingTransition -> Option C

4. Quick Check:

   overridePendingTransition needs two animations [OK]

Hint: overridePendingTransition always needs two animation IDs [OK]

Common Mistakes:

• Providing only one animation resource
• Using wrong method names
• Calling overridePendingTransition before startActivity

5. You want to create a smooth slide transition when moving from MainActivity to DetailActivity. You have two animation XML files: slide_in_right.xml and slide_out_left.xml in res/anim/. Which code snippet correctly applies these animations during the activity transition?

hard

A. overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left)
startActivity(Intent(this, DetailActivity::class.java))

B. startActivity(Intent(this, DetailActivity::class.java))
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left)

C. startActivity(Intent(this, DetailActivity::class.java))
overridePendingTransition(R.anim.slide_out_left, R.anim.slide_in_right)

D. startActivity(Intent(this, DetailActivity::class.java))
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right)

Solution

1. Step 1: Confirm the order of method calls

   You must call startActivity first, then overridePendingTransition immediately after.

2. Step 2: Match animations to correct enter and exit roles

   slide_in_right is the enter animation for the new activity, and slide_out_left is the exit animation for the current activity.

3. Final Answer:

   startActivity(Intent(this, DetailActivity::class.java)) overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left) -> Option B

4. Quick Check:

   startActivity then overridePendingTransition with correct animations [OK]

Hint: Enter animation first, exit animation second after startActivity [OK]

Common Mistakes:

• Swapping enter and exit animations
• Calling overridePendingTransition before startActivity
• Using wrong animation resource names