How to set Background Color for Column in Android Compose?

Column Background Color – Android Compose

To set a specific background color for a Column in Android Compose, use Modifier.background() for the Column modifier parameter. Required Color object can be passed to background() function for color parameter.

The following code snippet shows how to set a specific background color for a Column.

Column(modifier = Modifier.background(Color.Yellow)) {
  //children
}

We can also provide color as HEX value, as RGB value, etc., as shown in the following examples.

// from 4 separate [Float] components. Alpha and ColorSpace are optional
Color(red = 1f, green = 1f, blue = 1f, alpha = 1f, ColorSpace.get(ColorSpaces.Srgb))

// from a 32-bit SRGB color integer
Color(android.graphics.Color.WHITE)
Color(0xFF0000FF)

// from SRGB integer component values. Alpha is optional
Color(red = 0xFF, green = 0xFF, blue = 0xFF, alpha = 0xFF)

Examples

In this example, we display a Column with background color set with the required value.

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

Inbuilt Color Value

MainActivity.kt

package com.example.myapplication

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.Text
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 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column {
                    Text("Following is a Column with Background Color set to 'Yellow'", modifier = Modifier.padding(10.dp))
                    Column(modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.Yellow)) {
                        repeat(5) { counter ->
                            Text("Item $counter", Modifier.padding(10.dp))
                        }
                    }
                }
            }
        }
    }
}

Screenshot

Color Value from 4 Separate Float Values for Red, Green, Blue, Alpha

MainActivity.kt

package com.example.myapplication

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.Text
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 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column {
                    Text("Following is a Column with specific Background Color", modifier = Modifier.padding(10.dp))
                    Column(modifier = Modifier
                        .fillMaxWidth()
                        .background(Color(1f, 0.2f, 0.2f, 0.2f))) {
                        repeat(5) { counter ->
                            Text("Item $counter", Modifier.padding(10.dp))
                        }
                    }
                }
            }
        }
    }
}

Screenshot

Color Value from 4 Separate Integer Values for Red, Green, Blue, Alpha

MainActivity.kt

package com.example.myapplication

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.Text
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 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column {
                    Text("Following is a Column with specific Background Color", modifier = Modifier.padding(10.dp))
                    Column(modifier = Modifier
                        .fillMaxWidth()
                        .background(Color(0x50, 0xAA, 0x50, 0x77))) {
                        repeat(5) { counter ->
                            Text("Item $counter", Modifier.padding(10.dp))
                        }
                    }
                }
            }
        }
    }
}

Screenshot

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to set specific background color for the Column.