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.

Mohammed Rashid

Keep Reading

Explore more →

How to add Text with Background Color in Android Jetpack Compose

How to show Alert Dialog in Android Jetpack Compose

How to Show Placeholder Image in Android Jetpack Compose