Android Jetpack Compose – Text Background Color

Android Jetpack Compose – Text Background Color

To set background color of Text composable in Android Jetpack Compose, you can use Modifier.background() and pass the required Color value.

Example

In the following example, we set an Yellow background color for the text of the Text composable using Modifier.background().

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.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxWidth(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Text(
                        text = "Hello Android\nThis is some text\nAnd some more",
                        fontSize = 25.sp,
                        modifier = Modifier.background(color= Color.Yellow)
                    )
                }
            }
        }
    }
}

Screenshot

Summary

In this tutorial, we have seen how to set a background color for Text composable in Android Jetpack Compose, using Modifier.background().