Learn how to make a gradient background in Android Jetpack Compose | Kotlin, Android Studio

Gradient Backgrounds on Mobile

Gradients are usually a smooth blend of two or more colors creating a seamless transition between colors producing stunning backdrops for various designs.

While it is fairly simple and easy to implement gradients on websites using CSS. The older way of doing using XML Android was a tedious process involving creating multiple drawable resources.
With the introduction of Jetpack Compose the old ways of building UI with XML is long gone for modern applications. Here in this guide I will help you learn how you can implement a gradient in few simple lines of code making the process fairly simple.

Pre-requisites before following this guide : Beginner understanding of Jetpack Compose and Android Studio

Lets get started on the code, Make sure to setup a jetpack compose views project setup and import all the necessary libraries.

@Composable
fun GradientBackground() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.horizontalGradient( 
                    // use Brush.verticalGradeint to change the angle
                    colors = listOf(
                        Color(0xFF64B5F6), // Start color
                        Color(0xFF0D47A1)  // End color
                    )
                )
            )
    )
}

Here I have used Box composable to contain the gradient background with modifier of fillMaxSize() to fill the entire space available.

Next we have declared a brush with a property of Brush.horizontalGradient to allow the gradient to project horizontally on the screen.

Depending on your needs you can change the direction into vertically using the Brush.verticalGradient or Brush.linearGradient

The declared colors parameter takes a list of colors to start and end the gradient with, You can include two or more colors depending on your needs to create a seamless gradient.

Voila ! That's it in few simple lines of code we are done creating a stunning gradient background. You can use this composable function as background for other composable’s within your jetpack compose UI.

Thanks for reading and see again folks ! 👋