Intro to Android Development
  • Welcome
  • Syllabus
  • Hack Challenge
  • Resources
    • Lecture Videos
    • Ed Discussion
    • Git & GitHub Help/How-To
    • Setting up Android Studio
    • Starting an Android Studio Project & Making an Emulator
    • Importing, Exporting, & Submitting Your Projects to CMS
  • SP25 Course Material
    • Week 1 | Course Logistics, Kotlin, & Basic UI
      • Relevant Links
      • Demo/Lecture: Eatery Card
      • A0: Eatery Card (Follow-Along)
    • Week 2 | States, Components, LazyColumn
      • Relevant Links
      • Demo: Todo List
      • A2: Shopping List
    • Week 3 | Navigation & Animations
      • Relevant Links
      • Demo: Onboarding
      • A3: Stock Trading (RobbingGood)
    • Week 4 | MVVM and Flows
      • Relevant Links
      • Demo: Eatery Card 2
      • A4: Chat of a Lifetime
    • Week 5 | Dumb Components & UIEvents
      • Relevant Links
      • Demo: Music Player
      • A5: Rate My Vibe
    • Week 6 | Coroutines, Networking, JSON
      • Relevant Links
      • Demo: Retrofit
      • A6: You Should Even Lift, Bro.
  • Bonus Week | Android Job Search
    • Relevant Links
    • Android Technical Interview Question!
  • Textbook
    • 1. Introduction to the Editor and Views
      • 1.1 Introduction to the Editor
      • 1.2 SDK Management
      • 1.3 Kotlin Overview
      • 1.4 Views
      • 1.5 Android Studio Project Demo + Understanding The Editor
    • 2. Jetpack Compose
      • 2.1 Introduction
      • 2.2 Layouts
      • 2.3 Modifiers
      • 2.4 Animations
      • 2.5 Lazy Lists
      • 2.6 Reactive UI
    • 3. Intents and Manifest
      • 3.1 Activities
      • 3.2 Implicit Intents
      • 3.3 Explicit Intents
      • 3.4 Manifest
      • 3.5 Permissions
      • 3.6 Summary
    • 4. Navigation
      • 4.1 Types of Navigation
      • 4.2 Implementation of the Bottom Navigation Bar
    • 5. Data and Persistent Storage
      • 5.1 Singleton Classes
      • 5.2 Shared Preferences
      • 5.3 Rooms
      • 5.4 Entities
      • 5.5 Data Access Objects
      • 5.6 Databases
    • 5.5 Concurrency
      • 5.5.1 Coroutines
      • 5.5.2 Implementation of Coroutines
      • 5.5.3 Coroutines with Networking Calls
    • 6. Networking and 3rd Party libraries
      • 6.1 HTTP Overview
      • 6.2 3rd Party Libraries
      • 6.3 JSON and Moshi
      • 6.4 Retrofit
      • 6.5 Summary
    • 7. MVVM Design Pattern
      • 7.1 Key Idea
      • 7.2 Implementation Ideas
    • 8. Flows
    • 9. The Art and Ontology of Software
    • 10. 🔥 Firebase
      • 10.1 Setting up Firebase
      • 10.2 Authentication
      • 10.3 Analytics
      • 10.4 Messaging
      • 10.5 Firestore
  • Additional Topics
    • Git and GitHub
    • Exporting to APK
  • Archive
    • Archived Native Android Textbook Pages
      • 1. Layouts and More Views
        • 1.1 File Structure and File Types
        • 1.2 Resource Files
        • 1.3 Button and Input Control
        • 1.4 ViewGroups
        • 1.5 Summary + A Note On Chapter 2 Topics
      • 2. RecyclerViews
        • 2.1 RecyclerViews
        • 2.2 RecyclerView Performance
        • 2.3 Implementation of a Recycler View
        • 2.4 Implementation with Input Controls
        • 2.5 Filtering RecyclerViews
        • 2.6 Recyclerview Demo
      • 3. ListViews and Searching
        • 3.1 ListView vs. RecyclerView
        • 3.2 ListView Performance
        • 3.3 Implementation of a ListView
        • 3.4 Searching in a List View
      • 4. Fragments
        • 4.1 What are Fragments?
        • 4.2 Lifecycle of a Fragment
        • 4.3 Integrating a Fragment into an Activity
        • 4.4 Sharing Data Between Fragments
        • 4.5 Fragment Slide Shows
      • 5. OkHttp
      • 6. Activity Lifecycle
      • 7. Implementation of Tab Layout
    • Fall 2024 Course Material
      • Lecture 1 & Exercise 1: Introduction to Android
      • Lecture 1.5: Beauty of Kotlin
      • Lecture 2 & HW 2: Modifiers, Lazylists and Reactive UI
      • Lecture 3 & HW 3: Animations, Intents and Manifest
      • Lecture 4 & HW 4: Coroutines & Navigation
      • Lecture 5 & HW 5: Persistent Storage, Networking, and JSON Parsing
      • Lecture 6 & HW 6: MVVM, Flows
      • Bonus Lectures & Bonus HW
      • Bonus Lecture: Industry Practice
    • Spring 2024 Course Material
      • Lecture 1 & Exercise 1: Introduction to Android
      • Lecture 4 & HW 4: LazyLists
      • Lecture 6 & HW 6: Networking, Data, and Persistent Storage
    • Spring 2020 Course Material
      • Week 1: Intro to the Editor
      • Week 2: Views and Layouts
      • Week 3: Intent and Manifest
      • Week 4: ListView and RecyclerView
      • Week 5: Fragments
      • Week 6: Networking
    • Spring 2021 Lecture & HW 8: Networking & 3rd Party APIs
    • HackOurCampus Workshop
Powered by GitBook
On this page
  • Starter Code:
  • Screen 1, 2: EntryScreen and WelcomeScreen
  • Screen 3: MoodScreen
  • Congrats you've finished the demo!

Was this helpful?

  1. SP25 Course Material
  2. Week 3 | Navigation & Animations

Demo: Onboarding

So. many. screens!

PreviousRelevant LinksNextA3: Stock Trading (RobbingGood)

Last updated 1 month ago

Was this helpful?

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!

Starter Code:

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

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.

TODO 1: 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 1.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 2: 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!

Navigation can be a hassle to set up, so in the interest of time, we've provided some starter code for this demo. Here's the in case you need it in the future though!

textbook's reference for how to set up Navigation
42MB
demo3_starter.zip
archive
13MB
demo3.webm
Demo
1) EntryScreen
2) WelcomeScreen
3) MoodScreen