Jetpack compose: How to use background brush

This code demonstrates how to apply various types of brushes to create backgrounds in Jetpack Compose. It showcases solid color brushes with different shapes and transparency, as well as a horizontal gradient brush with rounded corners.

Breakdown of the Code

The code is structured within the MainActivity class. The onCreate function sets the content using setContent { GetScaffold() }. This calls the GetScaffold composable which builds the overall layout with a Scaffold element.

GetScaffold composes a top bar using TopAppBar and sets the content with MainContent.
MainContent defines a vertical column with centered elements and spacing. It then creates three Box composables, each demonstrating a different background brush usage.

Background Brush Examples:

The first box uses a SolidColor brush with a light gray color, rectangular shape, and 50% transparency (alpha 0.5F).
The second box also uses a SolidColor brush, but with a blue color, rounded corner shape with 24dp radius, and 25% transparency (alpha 0.25F).
The third box showcases a gradient brush with Brush.horizontalGradient containing blue and red colors. It also has rounded corners and 25% transparency.

Each box displays descriptive text explaining the applied brush properties.

Summary

This code provides a clear example of using different Brush types like SolidColor and Brush.horizontalGradient for creating backgrounds in Jetpack Compose. It demonstrates how to control shape, transparency, and color combinations to achieve various effects.

MainActivity.kt


package com.cfsuman.jetpackcompose

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.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedObjectState: Bundle?) {
        super.onCreate(savedObjectState)
        setContent {
            GetScaffold()
        }
    }


    @Composable
    fun GetScaffold() {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(
                            text = "Compose - Background Brush"
                        )
                    },
                    backgroundColor = Color(0xFF1ca9c9),
                )
            },
            content = { MainContent() },
        )
    }


    @Composable
    fun MainContent(){
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(12.dp),
            modifier = Modifier.padding(12.dp)
        ) {
            Box(modifier = Modifier
                .background(
                    brush = SolidColor(Color.LightGray),
                    shape = RectangleShape,
                    alpha = 0.5F
                )
                .fillMaxWidth()
                .weight(1F)
                .padding(12.dp)
            ){
                Text(text = "Background solid color brush," +
                        " rectangle shape, alpha 0.5F")
            }

            Box(modifier = Modifier
                .background(
                    brush = SolidColor(Color.Blue),
                    shape = RoundedCornerShape(24.dp),
                    alpha = 0.25F
                )
                .fillMaxWidth()
                .weight(2F)
                .padding(12.dp)
            ){
                Text(text = "Background solid color brush," +
                        " rounded rectangle shape, alpha 0.25F")
            }

            Box(modifier = Modifier
                .background(
                    brush = Brush.horizontalGradient(
                        listOf(Color.Blue,Color.Red)),
                    shape = RoundedCornerShape(24.dp),
                    alpha = 0.25F
                )
                .fillMaxWidth()
                .weight(3F)
                .padding(12.dp)
            ){
                Text(text = "Background horizontal gradient color brush," +
                        " rounded rectangle shape, alpha 0.25F")
            }
        }
    }
}