Weights in Jetpack compose tutorial 2022

In this Topic, i share the Answer to the Question Weights in Jetpack compose. Jetpack Compose can you do weights? It would be great if one item was weighted at 1/3 of the layout and the other took up the 2/3.This can be achieved in the XML/ViewGroup styling by using ConstraintLayouts or LinearLayouts. Jetpack Compose, however, doesn’t seem to be able to do this, much to my dismay.

You can use the “0.1.0-dev09” modifiers since they are moved on an interface.Divide the horizontal/vertical space left after measuring unweighted children elements and then distribute it according to that weight.

Weights in Jetpack compose

Row {
    Card(modifier = LayoutFlexible(1f), color = Color.Red) {
        Container(expanded = true, height = 50.dp) {

    Card(modifier = LayoutFlexible(2f), color = Color.Green) {
        Container(expanded = true, height = 50.dp) {


Use Modifier.weight(float) on the objects inside a container. Also, you could use constraintlayout and the Low Level Composable. For more information, visit the compose layout codelab at compose pathways

fun ArtistCard() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")

Compose transforms state into UI elements. Layout of elements. Standard layout components

    fun ArtistCard(artist: Artist) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Column {


Each OutlinedTextField occupy half the screen’s width.

Row() {
        modifier = modifier.weight(1f).clickable {

        value = formatDate(date) ?: "",
        onValueChange = {  },
        label = { Text("Date") },
        singleLine = true,
        readOnly = true

    Spacer(modifier = Modifier.padding(4.dp))

        modifier = modifier.weight(1f),
        value = formatTime(date) ?: "",
        onValueChange = {  },
        label = { Text("Time") },
        singleLine = true


LazyRow horizontal list and Weights in Jetpack compose

Also Read this Article :- Jetpack compose LazyRow horizontal list

Jetpack Compose Modifiers

What are Modifiers in Jetpack Compose?

Modifier elements decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.

  1. We can give size and spacing with the help of modifiers.
  2. Arrange the widgets within a layout.
  3. Beautify the widgets.


If you’re an Android developer,Most of the xml attributes (id padding margin, color alpha the ratio, elevation …) are utilized by using modifiers.

1. Background Color

Text("Text with green background color", Modifier.background(color = Color.Green))

2. Padding

Jetpack compose does not have an adjustment for margin. It is recommended to make use of the padding modifier for both margin and padding.

@Composable fun TextWidthPadding() { 
Text( "Padding and margin!",  Modifier.padding(32.dp) // Outer padding (margin)  
.background(color = Color.Green) //background color  
.padding(16.dp) // Inner padding  ) }

3. Width and Height

For width , utilize width(value : Dp)

For height , make use of height(value: Dp)

@Composable fun WidthAndHeightModifier() {
 Text( text = "Width and Height", 
 color = Color.White, 
 modifier = Modifier .background(Color.Blue) .width(200.dp) .height(300.dp) )


Read More Tutorial 

You may also like...