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.