Row and Column are two important composables to create a mobile app layout using Jetpack Compose. Row composable helps to arrange the content horizontally whereas Column arranges child elements vertically. Let’s check how to change the default background color of Row and Column in Jetpack Compose.
Jetpack Compose Row Background Color
You can customize the Row background color using Modifier.background(). See the code snippet given below where the yellow color is given as the background color of the Row.
@Composable
fun RowExample() {
Row(modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.padding(20.dp)
.background(Color.Yellow))
{
Text(text = "Row background color example", fontSize = 24.sp)
}
}
Following is the output.

Following is the complete code for reference.
package com.example.composeapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composeapplication.ui.theme.ComposeApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeApplicationTheme {
Surface(
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colors.background
) {
RowExample()
}
}
}
}
}
@Composable
fun RowExample() {
Row(modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.padding(20.dp)
.background(Color.Yellow))
{
Text(text = "Row background color example", fontSize = 24.sp)
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeApplicationTheme {
RowExample()
}
}
Jetpack Compose Column Background Color
Similarly, you can change the background color of the Column using Modifier.background() function. The code snippet is given below.
@Composable
fun ColumnExample() {
Column(modifier = Modifier
.fillMaxWidth()
.height(300.dp)
.padding(20.dp)
.background(Color.Cyan))
{
Text(text = "Column background color example", fontSize = 24.sp)
}
}
And you will get the following output.

Following is the complete code.
package com.example.composeapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composeapplication.ui.theme.ComposeApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeApplicationTheme {
Surface(
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colors.background
) {
ColumnExample()
}
}
}
}
}
@Composable
fun ColumnExample() {
Column(modifier = Modifier
.fillMaxWidth()
.height(300.dp)
.padding(20.dp)
.background(Color.Cyan))
{
Text(text = "Column background color example", fontSize = 24.sp)
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeApplicationTheme {
ColumnExample()
}
}
That’s how you change background color of Row and Column in Jetpack Compose.