Jetpack Compose Crash course for Android with Kotlin

Create a new Android Studio project with an empty compose activity to start a simple text compose app, then update the Kotlin compiler version and fix the text import.

Explore Kotlin basics by building a person class with a constructor, fields, and methods. Learn about variables, val, public scope, and object instantiation, plus simple print output.

Learn how to implement inheritance in Kotlin by making a final class open, overriding methods with super, and extending a person with a teacher that adds age and teaches.

Jetpack compose is built on composables, and setContent expects a composable function that can nest other composables like greeting and text to build the UI.

Explore trailing lambdas in Kotlin by examining the set content method with a default parent and a composable content. See how a greeting composable renders text in Jetpack Compose.

Learn how to use Jetpack Compose preview in Android Studio, including interactive previews and default preview composables, and ensure the preview matches the setContent content for accurate debugging.

Composables are user interface components that start with a capital letter, act as widgets rather than methods, and are decoupled and stored anywhere, including the same file as the activity.

Jetpack Compose previews let you inspect and identify composables by hovering and clicking, showing the composable you selected and the delimiters that outline each layout element.

Learn how to control a composable's size using modifier in Jetpack Compose, with width, height, size, and fill max size options, including DPI, density, and modifier order.

Explore how the order of modifiers in Jetpack Compose—width, height, clickable, and padding—shapes the interactive area and UI output of a text composable, showing that switching order changes behavior.

Explore the core Jetpack Compose UI elements by building flexible layouts with surface, alignment, and row, column, and box composables, learning to wrap content and extract reusable components.

Learn how wrap content size lets a text occupy only the space it needs inside a surface, using the wrap content size modifier on a composable.

Learn how to place multiple composables inside a surface in jetpack compose, avoid the illegal state of multiple direct children, and resolve overlapping text in previews.

Explore column, row, and box in Jetpack Compose to arrange multiple composables: create vertical layouts with column, horizontal layouts with row, and layered placements with box.

Explore how to arrange and align row children in Jetpack Compose using horizontal arrangements and vertical alignments, including center and bottom alignments, while comparing row and column behavior.

Explore the declarative paradigm shift and how Jetpack Compose handles dynamic content as a construction. Learn about the recomposition process, how to trigger composition, and the role of state.

Jetpack Compose shifts Android UI from the imperative to the declarative, enforcing unidirectional data flow: data moves top-down through composables, while events bubble bottom-up to trigger UI redraws.

Jetpack compose centers on dynamic content, letting a composable produce different outputs as input parameters change, demonstrated by a square rendered by a surface composable with red or magenta colors.

Master state management in Jetpack Compose, covering recomposition, lifting state up for lists and text fields, and introducing ViewModel and LiveData for best practice state handling.

Recomposition redraws the screen when inputs change. State for composables drives a unidirectional UI update loop that passes state via observable state holders, boosting testability and UI consistency.

Explore how the ViewModel prepares and manages UI state for fragments and activities, decoupling presentation from the view, and how lifecycle-aware LiveData observes and notifies state updates.

Build a profile card layout in Jetpack Compose with material theme, scaffold and app bar, online status indicators, data model for multiple users, and customizable colors, shapes, elevations, and typography.

Learn to theme Android apps with Jetpack Compose by deriving custom themes from Material Theme, overriding colors, typography, and shapes, and applying them via a theme wrapper around your content.

Learn to add multiple user cards in a Jetpack Compose layout by stacking profile cards in a column, adjust padding, and replace hardcoded values with dynamic parameters.

Display lists of profile cards with images from image URLs, showing online and offline statuses using LazyColumn. Learn asynchronous image loading with Coil to load URLs and render dummy profiles.

Learn to navigate between screens in Jetpack Compose using a navigation graph and backstack, pass arguments, and implement back functionality, while updating Android Studio and Gradle.

Explore how Jetpack navigation orchestrates transitions between composables in a single activity, using a navigation graph and navigation stack to manage destinations and back navigation.

Explore Android presentation patterns mvc, mvp, and mvvm, and understand why viewmodel is central to mvvm while connecting to a meal database api, handling json data with retrofit and coroutines.

Set up a new Meals app project in Android Studio using an empty compose activity, update Gradle, Kotlin, and Compose to newer versions, and validate by running the emulator.

Explore MVC, MVP, and MVVM presentation patterns, compare their decoupling and testability, and learn how MVVM's view model promotes reuse and easier maintenance.

Explore the Mvvm pattern with the Android ViewModel, revealing the three-layer architecture (view, ViewModel, model) and how the ViewModel manages user interface state, presentation logic, and lifecycle for composable screens.

Explore MVVM in Jetpack Compose by implementing a meals categories screen with a view model and repository, connected to a composable view.

Fetch real data for a meal app from the meal database json api, learn the base url and the categories endpoint, and visualize meal categories with PNG images.

Learn how JSON serves as a data format from a web API, using objects, arrays, and nested structures to map data to Kotlin data classes for Android apps.

Model json responses with data classes and serialized names to map api fields, and structure meal items and categories for exposure via a repository and view model.

Explore Retrofit for Android networking in a Kotlin MVVM app, building a meals web service with a JSON converter and proper asynchronous calls.

This lecture teaches replacing retrofit execute with enqueue and a callback to fetch meal category responses asynchronously, updates Jetpack Compose UI with viewmodel state, remember, and lazy column, with coroutines.

Learn how to replace callbacks with Kotlin coroutines for asynchronous work using suspend functions, coroutine builders, scopes, and dispatchers. Transform functions into suspended ones and launch coroutines to handle results.

Explore how suspend functions enable asynchronous data flow within coroutines, using launch, scope management, and dispatchers to control thread usage and lifecycle, including job cancellation to prevent leaks.

Convert the meals API in Retrofit from callbacks to suspend functions using coroutines, updating the repository, view model, and activity, and fetch meals once with launch defect in Compose.

Hoist the meals state to the view model and launch a coroutine in the view model init, using a custom scope with io dispatchers to fetch meals and update state.

Extract the meals category screen into its own composable and prepare for navigation across multiple screens, using a coil-loaded image, a card layout, and typography.

Explore animations in compose, create expanding list items and size changes, compare to the old Android view system, and build collapsing toolbars with column and lazy column to master animations.

Implement expandable list items in a Jetpack Compose Android app by showing meal name and description with ellipsis, toggling expansion via a remembered state and animating height with animateContentSize.

Jetpack Compose navigation in Android with Kotlin demonstrates building a detailed meal screen, wiring composables with a view model, and using a singleton repository for consistent data.

Toggle the profile image size with a button using animate dp as state to smoothly transition between 100 dp and 200 dp, with padding and vertical alignment.

Learn to animate a circle profile image in Jetpack Compose by using an enum state to drive padding, color, size, and a border width with update transitions, including cyan color.

Implement a collapsing toolbar in Jetpack Compose by linking a column's vertical scroll state to an image size, using a min–max offset and constraining 100–200 dips with animation.

Learn to implement a collapsing toolbar with a lazy column in Jetpack Compose, using remember lazy list state and first visible item index to drive scrolling behavior.