Deep dive in Compose Layout Column Row Box Constraint Layout @Composable fun SearchResult(result: SearchResult, modifier: Modifier = Modifier) { Row(modifier = modifier .padding(8.dp) .background(MaterialTheme.colors.surface) ) { Image(modifier = Modifier.size(72.dp)) Column(modifier = Modifier .padding(16.dp) .align(Alignment.CenterVertically) ) { Text(result.title) Text(result.subtitle) } } } Easy Powerful Performant Layout Model UI State Layout UI Composition Drawing Layout Drawing Composition @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } Layout Drawing Composition SearchResult Row Image Column Text Text Measure children Drawing Composition Layout Decide own size Place children SearchResult Row Image Column Text Text @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } place place place place place Drawing Composition Layout 1 measure 2 measure 4 measure 5 measure 6 size 7 measure 8 size 9 size 10 size 3 size @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } SearchResult Row Image Column Text Text 1 measure 2 measure 4 measure 5 measure 6 size 7 measure 8 size 9 size 10 size 3 size place place place place place Drawing Composition Layout Measure Place Modifiers Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) Box( modifier = Modifier .size(50.dp) .background(Color.Blue) ) Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) w: 0–200, h: 0–300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) measure w: 0–200, h: 0–300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) measure w: 0–200, h: 0–300 val childConstraints = Constraints( minWidth = outerConstraints.maxWidth, maxWidth = outerConstraints.maxWidth, minHeight = outerConstraints.maxHeight, maxHeight = outerConstraints.maxHeight, )