Demo: Onboarding

So. many. screens!

This week, we're working on navigating between multiple screens via onClicks and the bottom navigation bar, as well as practicing different types of animations.

This demo was loosely inspired by onboarding screens, which are typically used to set up a user's account the first time they use an app.

We'll have three screens: one for a user to enter their name, one that displays a personalized welcome message, and a how-are-you page.

We'll also have a bottom navigation bar and buttons that will allow us to navigate between these screens!

1) EntryScreen

2) WelcomeScreen

3) MoodScreen

Starter Code:

Here's the textbook's reference for how to set up Navigation.

Download, unzip, and open this file in Android Studio.

113KB

demo3_starter.zip

archive

Open

Screen 1, 2: EntryScreen and WelcomeScreen

The functionalities of these screens are very reminiscent of the first demo: we want to be able to store user input and display it.

However, now that we are working across two different screens, the "ok" button will be responsible for updating the name in data as well as navigating to the next screen.

We'll walkthrough setting up these screens, and they'll be built out for you in the starter code!

Run the project and click around in the emulator to get a general understanding of how the app works. You should be able to navigate between screens using the buttons on the screen and the bottom navigation bar.

Screen 3: MoodScreen

This screen displays four mood options and an emoji. The emoji and background color change according to the selected mood. Click around the MoodScreen UI to see how it works right now. Notice that the emoji and the background color change abruptly when the buttons are clicked.

The starter code already gives you the Buttons and the emojis, so your job is to use animations to make the transitions look smoother.

Remember the three types of animations introduced in lecture:

• animate_AsState()

• Modifier animations

• AnimatedVisibility and AnimatedContent

For reference, here's what the final product should look like.

13MB

demo3.webm

Open

Demo

TODO 0: Add the navigation dependency

In the app build.gradle file, add the necessary dependency for navigation. Feel free to reference docs.

Todo 1: Create a NavController

Todo 2: Navigate to the selected screen

Hint: Use item.screen.

Todo 3: Navigate to WelcomeScreen

Hint: Look at Screen.WelcomeScreen().

Todo 4: Add MoodScreen as a Destination

Follow the rest of the routes to navigate to MoodScreen().

TODO 5: Animate the background color so that it fades into the new color when a different button is clicked.

This animation should last for a duration of 1000ms

• Given that colors are defined on a continuous spectrum (in their hexcode forms), what type of animation should we use here?

• Remember to ask if you're unsure!

TODO 5.5: The animation will handle updating the background color, so the starter code's update in the Button onClick will become redundant. Make sure to delete

backgroundColor = getMoodColor(mood)

from the onClick before attempting to build your project.

Hint: Code structure for background color animation

val backgroundColor by animateColorAsState(
    targetValue = //...
    animationSpec = //...
)

TODO 6: Animate the emoji so that when a different mood button is clicked, the emoji appears to slide horizontally out of view while the next emoji slides horizontally into view from the other side.

The slide-in animation and slide-out animation should each take a duration of 300ms

• This syntax can be tricky so make sure to google things and ask questions

• Given that the emoji changes depending on which mood is chosen, which of the three main types of animations should we use here?

• Feel free to take creative liberties with what colors, emojis, and moods you pick!

Hint: Code structure for emoji animation

AnimatedContent(
            targetState = //...
            transitionSpec = {
                //slide in
                togetherWith
                //slide out
            }
        ) { mood ->
            Text(
                text = getMoodEmoji(mood.first),
                fontSize = 200.sp
            )
        }

Congrats you've finished the demo!