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
)
)
)
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
Post a Comment