The Complete Android 16 Course [Part 2] - Jetpack Compose

Learn how Jetpack Compose offers a declarative, composable approach with composable functions to build native Android UIs using Material Design, rewriting XML layouts with concise code.

Learn how composable functions in Jetpack Compose define modular, reusable UI components that recompose when state changes, with declarative syntax and simple modifiers for styling.

Use the @preview annotation to render a live composable preview in Android Studio's preview pane, enabling rapid UI development with automatic updates and customizable device, theme, background, and preview size.

Discover how modifiers in Jetpack Compose control appearance and behavior, update UI with state, and how chaining and ordering affect padding, background, and layout.

Explore how Jetpack Compose layouts use column, row, and box to arrange, stack, and overlay UI elements with modifiers and constraint layouts for responsive interfaces.

Develop a Jetpack Compose UI featuring a bordered column with red and blue borders, two texts, one with line-through and underline, the other underlined, using start padding and text decoration.

Discover how to create a text field composable with value and onValueChange in Jetpack Compose, using remember and mutable state to preserve text across recompositions.

Learn how state drives the user interface in Jetpack Compose, a reactive, declarative framework that updates the user interface automatically when state changes via a state object and mutableStateOf.

Learn how mutable state drives UI updates in Jetpack Compose by using mutableStateOf to hold a counter and trigger recomposition, connecting UI and data.

Experience how recomposition in Jetpack Compose updates only the affected UI when state changes, and use remember to persist the counter across recompositions.

Learn how Jetpack Compose uses mutableStateOf, remember, and by to declare state, how recomposition refreshes the UI on changes, and how remember prevents state from resetting during recomposition.

Discover how to build stateful composables in Jetpack Compose with a text field, using remember and mutable state to update the UI, and explore centralized state management and performance considerations.

Apply state hoisting in Jetpack Compose by lifting state to a parent, creating a single source of truth with a ViewModel, and passing state and callbacks to stateless composables.

Learn to implement a checkbox in Jetpack Compose, using remember and mutableStateOf to track a boolean checked state, and handle updates with onCheckedChange.

Learn to create a reusable radio button row in Jetpack Compose, placing text beside the button, applying center alignment and padding, and extending the approach to switches and checkboxes.

Practice building stateless composables in Jetpack Compose by creating a linear progress indicator, a progress button, and a text display that updates from 0.0 to 1.0 and resets.

Explore layouts in jetpack compose, from row and column to box stacking, and apply horizontal arrangements, vertical alignments, space evenly, and modifiers like fill max size to build responsive ui.

Explore columns in Jetpack Compose by swapping the row concepts to vertical alignment and arrangement. Define a column with content and a fill max size modifier, and compare to rows.

Explore surface as a central material design layout that holds one child and customize it with modifier, shape, color, elevation, border, and content color to style components in Jetpack Compose.

Explore how Jetpack Compose's scaffold structures ui with top app bar, bottom app bar, and floating action button. Learn customization options to streamline layout and create cohesive Android interfaces.

Create a custom top app bar in Jetpack Compose using the top app bar composable, with a title, left navigation icon, and right action icons, coloring via app bar colors.

Learn to build a bottom app bar in Jetpack Compose, integrate it into a scaffold, and add three icon buttons with toast actions and even spacing using a row.

Learn how to implement and customize a floating action button in Jetpack Compose, including onClick, colors, icons, and scaffold integration, plus displaying a toast on click.

Explore how to add vertical scrolling to a column in Jetpack Compose using a scroll modifier and remember scroll state, enabling scrollable flow of images and introducing lists and cards.

Create a horizontal scrollable row in Jetpack Compose by applying the horizontal scroll modifier to a row, and note it's great for static content but not ideal for dynamic data.

Explore how Jetpack Compose handles large lists with lazy column and lazy row, rendering only visible items to improve performance, and learn to display data via items and text composables.

Learn to implement sticky headers in Jetpack Compose lazy lists using lazy column, with item, items, and stickyHeader, while noting the feature is experimental and not supported in lazy row.

Explore the card composable in Jetpack Compose to create material design cards with elevation, padding, color, borders, and content grouping, and customize with modifier, shapes, and defaults.

We build a grocery application in Jetpack Compose, using card image, text, and sticky headers, introduce composables, and create custom composables and data classes to display items in Android Studio.

Implement a Jetpack Compose data source by building a LazyColumn with a sticky header, using a grouped items map of fruits and vegetables, and accessing items like apple and carrot.

Create custom card items and sticky headers in Jetpack Compose by building a custom item composable with a title, padding, and font size to render fruits and vegetables.

Create a Kotlin data class named item to hold title, description, and image with a primary constructor and automatic properties for use in item cards.

Add the navigation component library to your Jetpack Compose app, configure the compose dependency in build.gradle, sync the project, and enable navigation between composables using the navigation infrastructure.

Create a nav host linked to a single nav controller and navigation graph, define routes for composable destinations, set the start destination, and declare first and second screen composables.

Pass data between screens using the nav graph builder and nav controller by sending a string argument through the route, derived from a text field with mutable state.

Learn to pass a user name between screens in Jetpack Compose by updating routes, defining nav arguments, and retrieving them from the back stack to display a welcome.

Pass multiple arguments between screens in jetpack compose by defining nav arguments, updating routes, and retrieving values from backstack entries; pass name and age from text fields to a screen.

Learn how to pass optional navigation arguments in Jetpack Compose by using query parameter syntax, defaults, and nullable options to prevent crashes.

Build three Jetpack Compose screens—home, profile, and settings—starting a new compose project, arranging a full-width, centered column with profile and settings buttons, and wiring navigation placeholders.

Build a navigation system for home, profile, and settings screens using a nav host controller and a nav graph in Jetpack Compose, with stateless composables and a nav graph builder.

Explore nav routes among home, profile, and settings using lambda expressions to navigate with id and show details parameters, wiring every destination to its two possible routes.

Explore Jetpack Compose navigation by wiring home, profile, and settings screens with routes and parameter passing (id, show details), using the nav controller to navigate to profile and settings.

Master navigating between home, profile, and settings screens in Jetpack Compose by configuring a nav host and passing dynamic arguments like id and show details.

Build a Jetpack Compose bottom navigation bar by defining a Kotlin data class for items, a sealed nav item with home, profile, and settings, and track selection with rememberSaveable.

Fix navigation by passing id and show details to the profile screen from the bottom bar, and use a standalone class to ensure consistent parameters across screens.

Synchronize the current screen with the bottom navigation bar in Jetpack Compose by observing the navigation back stack entry, retrieving the current route, and updating the selected item accordingly.