jetpack compose - Column background color

Compose Column Background Color

The Column is a jetpack compose layout widget. The Column layout places its elements in vertical sequences. The Column is a highly used layout widget of the jetpack compose library.

The following jetpack compose tutorial will demonstrate how we can set a background color for a Column widget. By default, the Column widget constructor has no direct argument to set or change its background color. So how we can set a background color for the Column container?

The Column widget constructor’s ‘modifier’ argument allows us to modify many properties of the Column widget itself. Such as we can set the Column width, height, click listener, padding, shape, rotation, background color, etc.

So, we can change the Column layout’s background color by using its modifier ‘background’ element. This ‘background()’ function element has an argument name ‘color’. We can pass a Color value to this argument to set a background color for a Column widget.

This jetpack compose tutorial code is written in an android studio IDE. Copy the code and run it on an emulator device or a real device to test how we add a background color to a Column layout. We also displayed a screenshot of this tutorial’s emulator screen.

MainActivity.kt


package com.cfsuman.jetpackcompose

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            GetScaffold()
        }
    }


    @SuppressLint("UnusedMaterialScaffoldPaddingParameter")
    @Composable
    fun GetScaffold(){
        Scaffold(
            topBar = {TopAppBar(
                title = {Text(
                    "Compose - Column Background Color",
                    color = Color.White)},
                backgroundColor = Color(0xFF333399)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        Column(
            Modifier
                .background(Color(0xFF7BB661))
                .fillMaxWidth()
                .height(325.dp)
                .padding(12.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ){
            Text(
                "Column Background Color",
                style = TextStyle(
                    color = Color.White,
                    fontSize = 25.sp
                )
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //GetScaffold()
    }
}