Jetpack Compose — live coding declarative UI
summary
Live-coding rebuilds a Figma settings/profile screen with Jetpack Compose, producing a working preview and a partial emulator run: uses Scaffold with Row/Column for header, imageResource and clip+shadow for a rounded avatar, IconButton tinting, composable tabs with custom indicator, and a reusable section pattern that renders operation cards and flow row chips. About half the screen finishes in ~30 minutes; code binds hardcoded models to composables and mostly renders correctly, while Compose itself remains alpha for production use.
AI-written summary · about
chapters (7)
- 0:00Introduction
- 2:59Live screen layout start
- 19:20Building screen header
- 37:06Content sections implementation
- 51:23Adding custom elements
- 1:07:09Q&A on customization
- 1:10:42Summary
related talks
41mCompose by Example
44mUnleashing the Power of Jetpack Compose: Revolutionizing Android UI Development
01h 00mJetpack Compose - Next Gen Kotlin UI Toolkit for Android
32mJetpack Compose — Next Gen Kotlin UI Toolkit for Android
48mLearning Jetpack Compose By Example
40mJetpack Compose basics
34mMastering Jetpack Compose Previews - Test your UI before it tests you!
01h 11mCodelab: Jetpack Compose Basics