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
  • Imperative vs. Declarative Programming
  • What is Reactive UI?
  • States in Jetpack Compose
  • Why Use States?

Was this helpful?

  1. Textbook
  2. 2. Jetpack Compose

2.6 Reactive UI

Reactive UI falls under the category of declarative programming, allowing developers to focus on what the UI should accomplish rather than how to achieve it. Let's explore the key concepts behind Reactive UI and how it leverages states to simplify UI development.

Imperative vs. Declarative Programming

Before diving into reactive principles, it’s important to understand the difference between imperative and declarative programming paradigms.

  • Imperative programming describes the steps necessary to achieve a particular result. You explicitly instruct the program on how to perform tasks.

    For example:

var greeting = "Hello"
Text(text = greeting)
greeting = "Goodbye"
// The UI won't change unless you manually update it
Text(text = greeting)
  • Declarative programming describes what the program should accomplish, but not the specific steps to achieve it. The framework takes care of rendering changes as necessary.

    In declarative programming, the UI reacts to changes in data automatically:

var greeting by remember { mutableStateOf("Hello") }
Text(text = greeting)
greeting = "Goodbye"
// The UI will update automatically

What is Reactive UI?

Declarative programming is a broader concept that focuses on what the program should accomplish. Reactive UI falls under declarative programming, and it is about responding to changes in data over time.

A Reactive UI automatically reacts to changes in underlying data, reducing the need for manual UI updates. Instead of explicitly triggering updates for UI components when data changes, the system handles recomposition behind the scenes.

In Jetpack Compose, the UI reacts to changes in state variables, which means the UI components tied to these state variables will automatically recompose (redraw) when the state changes.

In the example for declarative programming, greeting is a state variable. When its value changes, any composable that reads this value automatically updates, reflecting the new data.

States in Jetpack Compose

In Compose, states are used to manage the UI’s reactive data flow. Instead of creating plain variables, you define state variables using mutableStateOf().

var name by remember { mutableStateOf("") }

Let's break it down:

  • by allows name to be used as a regular variable instead of accessing the state explicitly.

  • remember ensures the state is preserved across recompositions. When the composable function recomposes (redraws the UI), remember ensures that the state value isn't reset.

  • mutableStateOf("") initializes the state with an empty string, which can be updated.

Why Use States?

Using state variables provides a powerful way to handle dynamic UI changes. Here’s why:

  • Automatic UI updates: Using regular variables can be problematic, as whenever a variable changes you have to call all the UI components that depend on it to change them. However, when a state variable changes, the UI components that depend on that state automatically recompose, so you don't need to manually update the UI.

  • Cleaner code: Instead of explicitly calling functions to update the UI when a value changes, state variables allow for automatic synchronization between data and UI.

Here's another example of when states are useful:

var count by remember {mutableStateOf(0)}

//UI that reacts to the state
Column(
    modifier = Modifier.padding(16.dp)
){
    Text(text = "Count: $count"
    Spacer(modifier = Modifier.height(16.dp))
    Button(onClick = {count++}){
        Text("Increment")
    }
}

In imperative programming, you would have to manually update the UI each time the count increments, by calling methods to refresh or redraw components

With this reactive approach, whenever count changes, the UI automatically recomposes without any manual intervention.

Reactive UI in Jetpack Compose works hand-in-hand with reactive data flow. The idea is that you define how the UI looks based on the current state, and then pipeline the data in. The framework takes care of updating the UI whenever the state changes. This leads to more intuitive, easier-to-maintain code, especially as your apps grow in size and complexity.

Previous2.5 Lazy ListsNext3. Intents and Manifest

Last updated 7 months ago

Was this helpful?