Gradient text in jetpack compose | How to Add Text with Gradient Color in Android Jetpack Compose 2023

UI elements with gradient background colors are always pretty. We are going learn how to apply beautiful gradient colors to Text in Jetpack Compose.

We can create different types of gradients using Brush API. Using Text compose with Brush will give us desired result.


Before jumping into the code understand that usage of Brush in textStyle is experimental. The experimental stuffs might be removed in the future.

package com.boltuix.gradient

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.ExperimentalTextApi
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.boltuix.gradient.ui.theme.GradientTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GradientTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting()
                }
            }
        }
    }
}

@OptIn (ExperimentalTextApi::class)
@Composable
fun Greeting(modifier: Modifier = Modifier) {
    Text(
        fontSize = 30.sp,
        text = ("Get started with Android (Kotlin, Jet Compose) & IOS (Swift UI), " +
                "MVVM clean architecture, and Beautiful UI UX design patterns."),
        style = TextStyle(
            brush = Brush.linearGradient(
                colors = listOf(Color.Magenta, Color.Cyan)
            )
        )
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GradientTheme {
        Greeting()
    }
}


Using a Brush for Text styling

Configure your text using a built-in Brush within TextStyle. For example, you can configure a linearGradient brush to your text as follows:

private val GradientColors = listOf(Cyan, LightBlue, Purple...)

Text(
   text = text,
   style = TextStyle(
       brush = Brush.linearGradient(
           colors = GradientColors
       )
   )
)

See the output given below.

That’s how you add gradient text in Jetpack Compose.

Ref:

https://developer.android.com/jetpack/compose/text

https://www.boltuix.com/2022/07/gradient-colors.html


To create the Compose Gradient Text Effect follow the steps above and watch the video tutorial.

..

Comments