Instruction

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Layouts in Compose

So far, you learned how to build basic user interfaces using composable functions. The next step is to build a more complex UI by arranging smaller composables and positioning them in a specific way. In XML, you use ViewGroup widgets like LinearLayout, RelativeLayout, or FrameLayout to measure and position children on the screen based on rules.

@Composable  
inline fun Layout(  
  content: @Composable @UiComposable () -> Unit,  
  modifier: Modifier = Modifier,  
  measurePolicy: MeasurePolicy  
)

Exploring Basic Layouts in Compose

Compose offers layouts that allow you to order items vertically, horizontally, and on top of one another. Compose also offers more complex layouts that handle UI elements like navigation drawers, etc. Internally, all these layouts use the measurePolicy property to position items.

Using Row

Row is the LinearLayout counterpart that handles stacking items horizontally. Here’s a look at the signature for Row.

@Composable  
inline fun Row(  
  modifier: Modifier = Modifier,  
  horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,  
  verticalAlignment: Alignment.Vertical = Alignment.Top,  
  content: @Composable RowScope.() -> Unit  
)

@Composable  
fun EmailUi(
  emails: List<Email>,
  selectedEmail: Email
) {
    Row(
      verticalAlignment = Alignment.Start, 
      horizontalArrangement = Arrangement.Top, 
      modifier = Modifier.fillMaxSize()
    ) { 
        EmailList(emails)
        EmailDetail(selectedEmail)
    }
}

Using Column

Column is the LinearLayout counterpart that handles stacking items vertically. Here’s a look at the signature for Column:

@Composable  
inline fun Column(  
  modifier: Modifier = Modifier,  
  verticalArrangement: Arrangement.Vertical = Arrangement.Top,  
  horizontalAlignment: Alignment.Horizontal = Alignment.Start,  
  content: @Composable ColumnScope.() -> Unit  
)

@Composable  
fun UserDetailsCardColumn() {
  Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceEvenly
  ) {
      Text("John Appleseed")
      Text("32 years old")    
      Text("john@example.net")    
  }
}

Using Box

Box is the FrameLayout counterpart and handles stacking items on top of one another relative to the parent. Box is helpful for cases where you need to show overlapping items such as dialogs or cards.

@Composable  
inline fun Box(  
  modifier: Modifier = Modifier,  
  contentAlignment: Alignment = Alignment.TopStart,  
  propagateMinConstraints: Boolean = false,  
  content: @Composable BoxScope.() -> Unit  
)

@Composable  
fun UserAvatar(user: User) {    
  Box {        
    Image(bitmap = user.image, contentDescription = "User image")
    if(user.verified) {
      Icon(Icons.Filled.Check, contentDescription = "Check mark")    
    }          
  }  
}
See forum comments
Download course materials from Github
Previous: Introduction Next: Demo