Kotlin Android app development course, creating an intro screen for a messenger app

Hello! In this tutorial, I will explain in detail how to create an intro screen for an Android messenger app using Kotlin. The intro screen is what the user sees when they first launch the app, typically containing a logo or slogan. It’s an important element that builds expectations for the app.

1. Create a Project

After launching Android Studio, create a new project. Select ‘Empty Activity’ from the suggested templates, and name the project ‘MessengerApp’. Then select Kotlin as the language.

2. Gradle Configuration

Since we plan to use Jetpack Compose, we need to add the necessary dependencies to the Gradle file. Write the following in the build.gradle (Module: app) file:

dependencies {
    implementation "androidx.compose.ui:ui:1.1.0"
    implementation "androidx.compose.material:material:1.1.0"
    implementation "androidx.compose.ui:ui-tooling-preview:1.1.0"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.5.0"
    implementation "androidx.activity:activity-compose:1.5.0"
}

This configuration brings in libraries related to Jetpack Compose. Now sync Gradle to complete the setup.

3. Structure Intro Screen UI

The intro screen of the messenger app will include a logo and a slogan. To build the intro screen, we need to create a new Composable function. Open the MainActivity.kt file and add the following code:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            IntroScreen()
        }
    }
}

@Composable
fun IntroScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.logo),
            contentDescription = null,
            Modifier.size(128.dp)
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(
            text = "Connecting your messages!",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

@Preview
@Composable
fun PreviewIntroScreen() {
    IntroScreen()
}

Here we created a Composable function called IntroScreen to structure the intro screen. We used Column to vertically arrange the logo image and the slogan text. The logo is used by adding a logo.png file to the drawable folder, and the slogan can be changed to any desired message.

4. Add Animation Effects

Instead of simply displaying the logo and text on the intro screen, we can add animation effects to make it visually more appealing for the user. Let’s add animations using the androidx.compose.animation library.

You can implement a Fade-in animation by adding the following code inside the IntroScreen function:

import androidx.compose.animation.core.*
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun IntroScreen() {
    val transition = rememberInfiniteTransition()
    val alpha by transition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 2000, easing = FastOutSlowInEasing)
        )
    )

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .graphicsLayer(alpha = alpha),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.logo),
            contentDescription = null,
            Modifier.size(128.dp)
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(
            text = "Connecting your messages!",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

In the above code, we defined the animation using rememberInfiniteTransition(). We apply the Fade effect by adjusting the alpha value through the animateFloat function.

5. Set Intro Duration and Transition to Next Screen

You can set it so that the user moves to the next screen after a certain time on the intro screen. To do this, we add a delay using LaunchedEffect. Add the following code to the IntroScreen function:

import androidx.compose.runtime.rememberCoroutineScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@Composable
fun IntroScreen() {
    val coroutineScope = rememberCoroutineScope()
    
    LaunchedEffect(Unit) {
        delay(3000) // Wait for 3 seconds
        // Add logic to transition to the next screen
    }
    // Remaining code ...
}

Here, you need to add logic to transition to the next screen after waiting for 3 seconds. For example, you can transition to a function called MainScreen. Write the MainScreen function and modify it to call that function after the intro screen is finished.

6. Organize Complete Code

Let’s put everything together to complete the MainActivity.kt file.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.animation.core.*
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            IntroScreen()
        }
    }
}

@Composable
fun IntroScreen() {
    val coroutineScope = rememberCoroutineScope()
    val transition = rememberInfiniteTransition()
    val alpha by transition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 2000, easing = FastOutSlowInEasing)
        )
    )

    LaunchedEffect(Unit) {
        delay(3000)
        // Add logic to transition to the next screen
    }
    
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .graphicsLayer(alpha = alpha),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.logo),
            contentDescription = null,
            Modifier.size(128.dp)
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(
            text = "Connecting your messages!",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

@Composable
fun MainScreen() {
    // Structure the next screen UI
}

@Preview
@Composable
fun PreviewIntroScreen() {
    IntroScreen()
}

7. Structure the Next Screen

Structure the MainScreen function that will be used after the intro screen is finished. Essentially, you need to design the main screen UI for the messenger app. Here’s an example of a simple main screen structure:

@Composable
fun MainScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Welcome to the Messenger App!",
            fontSize = 32.sp,
            fontWeight = FontWeight.Bold
        )
        // Additional UI structure
    }
}

Now, you need to add the logic to transition from IntroScreen to MainScreen. Modify the setContent function to switch to the main screen after the intro screen:

super.onCreate(savedInstanceState)
setContent {
    var isIntroVisible by remember { mutableStateOf(true) }
    if (isIntroVisible) {
        IntroScreen { isIntroVisible = false }
    } else {
        MainScreen()
    }
}

And add a lambda function as a parameter to the IntroScreen function to facilitate the transition to the main screen:

@Composable
fun IntroScreen(onFinish: () -> Unit) {
    // ...
    LaunchedEffect(Unit) {
        delay(3000)
        onFinish()
    }
}

8. Folder Structure and Image Addition

You need to add the logo image that will be used on the intro screen to the res/drawable folder of the project. The image should be named logo.png. This way, you can retrieve the logo with painterResource(id = R.drawable.logo).

9. Final Testing

After all the setups and configurations, test the app to see if the intro screen and main screen transition smoothly. The intro screen should display the logo and slogan for 3 seconds before transitioning smoothly to the main screen.

10. Conclusion

In this tutorial, we learned how to create an intro screen for a messenger app using Kotlin and Jetpack Compose. By implementing the design and animation effects of the intro screen, as well as the transition logic to the next screen, we gained a foundational understanding of effectively structuring UI elements.

Going forward, explore more topics in Android app development and implement rich and diverse features. I hope this becomes a valuable experience in your development journey!