How to setup Row to Fill Maximum Width in Android Compose?

Android Compose Row – Fill Maximum Width

To setup Row composable to fill maximum available width given to it from its parent, call fillMaxWidth function on the Modifier object of this Row.

The following code snippet shows how to setup Row composable to fill maximum available width allowed by its parent.

Row(
	modifier = Modifier
		.fillMaxWidth()
) {
	...
}

Example

In this example, let us display two Row composables. The first Row composable has default width while the second Row composable is set to fill maximum width.

Inside each Row composable, we will have two Box composables. By default Row composable wraps around its content. So, for the first Row, the width is the result of its children. But the second Row should fill the maximum allowed width, irrespective of its children.

Create a Project in Android Studio with Empty Compose Activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column {
                    Row(
                        modifier = Modifier
                            .padding(10.dp)
                            .background(Color.Gray),
                    ) {
                        Box(Modifier.size(100.dp).padding(10.dp).background(Color.Yellow))
                        Box(Modifier.size(100.dp).padding(10.dp).background(Color.Yellow))
                    }
                    Row(
                        modifier = Modifier
                            .padding(10.dp)
                            .fillMaxWidth()
                            .background(Color.Gray),
                    ) {
                        Box(Modifier.size(100.dp).padding(10.dp).background(Color.Yellow))
                        Box(Modifier.size(100.dp).padding(10.dp).background(Color.Yellow))
                    }
                }
            }
        }
    }
}

Screenshot

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to align contents of a Row composable to the center.