Navigating between composables in Android Kotlin - UI Render Trace

Component - Navigating between composables

This UI component demonstrates how to move from one screen to another using navigation between composables in Android Jetpack Compose. It shows a simple button that, when clicked, takes the user from the first screen to the second screen.

Widget Tree

NavHost
├─ NavGraph
│  ├─ Composable(Screen1)
│  │  └─ Column
│  │     ├─ Text
│  │     └─ Button
│  └─ Composable(Screen2)
│     └─ Column
│        └─ Text

The NavHost holds the navigation graph. The graph has two composable destinations: Screen1 and Screen2. Screen1 contains a vertical column with a text label and a button. Screen2 contains a column with a text label. The button on Screen1 triggers navigation to Screen2.

Render Trace - 4 Steps

Step 1: NavHost

Step 2: Composable(Screen1)

Step 3: Button

Step 4: Composable(Screen2)

State Change - Re-render

Trigger:User taps the 'Go to Screen 2' button on Screen1

Before

Current screen is Screen1 showing welcome text and button

→

After

Current screen changes to Screen2 showing welcome text for Screen2

Re-renders:The NavHost re-renders to display the composable for Screen2

UI Quiz - 3 Questions

What happens when the user taps the button on Screen1?

A The button text changes to 'Clicked'

B The app navigates to Screen2 and shows its content

C The app closes

D Nothing happens

Key Insight

Using a NavHost with a navigation graph lets you easily switch between different composable screens. Buttons can trigger navigation actions to move users through your app smoothly. Organizing UI elements in Columns or Rows helps create clear layouts for each screen.