Basic layouts in Compose
summary
Step‑by‑step build of the MySoothe home screen using Jetpack Compose: implements a TextField with leading icon and Material surface background for the search bar; creates an Align Your Body tile with an 88dp circular image, H3 text and baseline paddings of 24dp/8dp; makes a Favorite Collection card with 56dp image, H3 text and 192dp width; composes a horizontally scrolling list via LazyRow and a two‑row LazyHorizontalGrid (requires Compose 1.2) with spacing 8dp and contentPadding 16dp; adds verticalScroll via rememberScrollState and wraps everything in Scaffold with BottomNavigation — previews and interactive scrolling work as expected.
AI-written summary · about
chapters (37)
- 0:00Start
- 1:35Android Studio
- 3:37Redline Designs
- 3:50Search Bar
- 7:36Fill Max Width Modifier
- 8:20Leading Icon
- 9:17Set a Content Description
- 10:13Adapt the Background Color
- 12:01Baseline Spacings
- 14:51Clip Modifier
- 16:09Codelab
- 16:23Crop
- 17:20Bedding Modifier
- 18:01Horizontal Alignment to the Parent Column
- 21:46Material Surface
- 23:55Rounded Corners
- 25:55Vertical Alignment
- 29:07Recap
- 29:39Align Your Body Row
- 33:40Arrangements
- 34:06Fixed Spacings
- 35:42Content Padding
- 36:07Normal Padding
- 37:35Favorite Collections Grid
- 38:01Adding a Grid
- 43:02Slot Api
- 44:03Add the Content
- 45:27Trailing Lambda
- 47:33Horizontal Padding
- 51:27Preview
- 51:44Animation Inspection
- 52:31Scrolling Behavior
- 55:13Spacers
- 56:00Add the Bottom Navigation
- 56:32Bottom Navigation
- 57:30Icon and a Label
- 59:16Set the Background Color
related talks
07mBasic Layouts in Compose
18mCompose: Implementing responsive UI for larger screens
38mImplementing That Common UI in Jetpack Compose: X Ways
01h 11mCodelab: Jetpack Compose Basics- 18mCompose: Implementing responsive UI for larger screens
15mBuild beautiful Material Design apps with Jetpack Compose
33mBuild adaptive apps with Jetpack Compose
49mBuilding an Android UI using declarative programming in Jetpack Compose