How to change Background Color of Row and Column in Android Jetpack Compose

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.

Keep Reading

Explore more →

How to Create Custom Checkbox in Android Jetpack Compose

Learn to create a custom checkbox in Jetpack Compose, offering unique UI while maintaining the functionality.

How to Create Linear Gradient in Android Jetpack Compose

Learn how to create visually stunning linear gradients in your Android apps with Jetpack Compose.

How to Add Checkbox with Text in Android Jetpack Compose

Create a UI with checkboxes and text in Jetpack Compose. Learn how to handle state management and user interactions efficiently.