Menu
I am working on one example using Android Jetpack Compose, where I am displaying some text equations like below :
<html>
<body>
<!-- Superscript-->
<p> E = mc<sup>2</sup></p>
<!--Subscript-->
<p> CH<sub>4</sub> + H<sub>2</sub>O = CO + 3H<sub>2</sub></p>
</body>
</html>
Does there any decoration or style mechanism exist for Text that I can use to achieve the same output?
896
To change font size of Text composable in Android Jetpack Compose, pass a required font size value for the optional fontSize parameter of Text composable. Make sure to import sp , as shown in the above code snippet, when you are assign fontSize property with scale-independent pixels.
To change font weight of Text composable to Bold, in Android Jetpack Compose, pass FontWeight. Bold for the optional fontWeight parameter of Text composable.
To change color of Text composable in Android Jetpack Compose, pass a required Color value for the optional color parameter of Text composable.
Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.
UPDATE: Please refer new answer mentioned here: https://stackoverflow.com/a/66801935/2949612
Using BaselineShift, we can use Span for Text widget, which allows to decorate text as subscript or superscript.
Below is the working code to achieve the above output:
@Composable
fun Equations(name: String) {
val defaultStyle = TextStyle(fontSize = 20.sp,
color = Color.White)
val scriptStyleSuper = TextStyle(
baselineShift = BaselineShift.Superscript,
fontSize = 12.sp,
color = Color.Green)
val scriptStyleSub = TextStyle(
baselineShift = BaselineShift.Subscript,
fontSize = 12.sp,
color = Color.Green)
Text {
Span(text = "E = mc", style = defaultStyle) {
Span(
text = "2",
style =scriptStyleSuper
) {
Span(text = "\n")
Span(text = "CH", style = defaultStyle)
Span(text = "4 ",style = scriptStyleSub)
Span(text = "+ H", style = defaultStyle)
Span(text = "2",style = scriptStyleSub)
Span(text = "O = CO + 3H", style = defaultStyle)
Span(text = "2",style = scriptStyleSub)
}
}
}
}
Output:
To check more info: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/package-summary
181
With 1.0.0-beta03 you can define a SpanStyle using the BaselineShift.Superscript and BaselineShift.Subscript.
Something like:
val superscript = SpanStyle(
baselineShift = BaselineShift.Superscript,
fontSize = 16.sp,
color = Color.Red
)
val subscript = SpanStyle(
baselineShift = BaselineShift.Subscript,
fontSize = 16.sp,
color = Color.Blue
)
Then you can use the AnnotatedString to display the
text with multiple styles.
Something like:
Text(
fontSize = 20.sp,
text = buildAnnotatedString {
append("E = mc")
withStyle( superscript) {
append("2")
}
}
)
and
Text(
fontSize = 20.sp,
text = buildAnnotatedString {
append("CH")
withStyle( subscript) {
append("4")
}
append(" + H")
withStyle( subscript) {
append("2")
}
append("O = CO + 3H")
withStyle( subscript) {
append("2")
}
}
)
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
