Episode 167: Jetpack Compose Layout

Android Developers Backstage

Episode | Podcast

Date: Mon, 14 Jun 2021 16:08:46 +0000

<p><span style="font-weight: 400;">In this second episode of our mini-series on Jetpack Compose (AD/BC) Nick and Romain are joined by Anastasia Soboleva, George Mount and Mihai Popa to talk about Compose’s layout system. They explain how the Compose layout model works and its benefits, introduce common layout composables, discuss how writing your own layout is far simpler than Views and how you can even animate layout.</span></p> <p><span style="font-weight: 400;"><img alt="" src="https://assets.libsyn.com/secure/show/332855/ADB167_compose_layouts.png" width="360" /></span></p> <p><span style="font-weight: 400;">Hosts Romain and Nick are joined by Anastasia, George and Mihai and producers Daniel and Jessica 👋</span></p> <p> </p> <p><a href="https://developer.android.com/jetpack/compose/layout"><span style="font-weight: 400;">Compose Layouts guide</span></a></p> <p><a href="https://developer.android.com/codelabs/jetpack-compose-layouts"><span style="font-weight: 400;"> Compose Layouts codelab</span></a></p> <p><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)"> <span style="font-weight: 400;">Layout composable</span></a></p> <p><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#(androidx.compose.ui.Modifier).layout(kotlin.Function3)"> <span style="font-weight: 400;">Layout modifier</span></a></p> <p><a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary"> <span style="font-weight: 400;">Foundation Layouts & Modifiers</span></a> <span style="font-weight: 400;">(</span><a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)"><span style="font-weight: 400;">Row</span></a><span style="font-weight: 400;">,</span> <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)"> <span style="font-weight: 400;">Column</span></a><span style="font-weight: 400;">,</span> <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)"> <span style="font-weight: 400;">Box</span></a> <span style="font-weight: 400;">etc)</span></p> <p><a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize)"> <span style="font-weight: 400;">Intrinsic size example</span></a></p> <p><a href="http://goo.gle/compose-pathway"><span style="font-weight: 400;">Compose Learning Pathway</span></a></p> <p> </p> <p><span style="font-weight: 400;">Anastasia:</span> <a href="https://twitter.com/nastia_05"><span style="font-weight: 400;">@nastia_05</span></a></p> <p><span style="font-weight: 400;">George:</span> <a href="https://twitter.com/georgemount1"><span style="font-weight: 400;">@georgemount1</span></a></p> <p><span style="font-weight: 400;">Mihai:</span> <a href="https://twitter.com/mihaipopa12"><span style="font-weight: 400;">@mihaipopa12</span></a></p> <p><span style="font-weight: 400;">Romain:</span> <a href="https://twitter.com/romainguy"><span style="font-weight: 400;">@romainguy</span></a></p> <p><span style="font-weight: 400;">Nick:</span> <a href="https://twitter.com/crafty"><span style="font-weight: 400;">@crafty</span></a></p>