How to use Superscript & subscript text in Jetpack Compose
When we use specially any chemical or mathematical formula we need to write some special types of text that is slightly below and above of the regular type in that case we can use Superscript and Subscript as text. I know you are excited to know about how to use Superscript & subscript in Jetpack Compose. Lets know about Superscript and subscript in Jetpack Compose.
Superscript
Superscript is a text that appear smaller than the surrounding text and is usually aligned slightly above the baseline of the regular type. In English, superscript is commonly used to add references (for footnotes), copyright or trademark symbols, and in equations for scientific and mathematical texts. For example, the physics formula for energy E = mc2Subscript
Subscript is similarly aligned slightly below the baseline of regular type. Subscript is mainly reserved for chemical compounds. For example the chemical formula.
Lets create an app with texts using superscript and superscript.
First Create a New Project Selecting Empty Activity here I am using Android Studio Flamingo.
Write a name for your project I named it Super Sub Script Compose.
Create a file named TextScript for Superscript & Subscript Text.
TextScript
package com.example.supersubscriptcompose
import …
@Composable
fun TextScript() {
Column {
val superscript = SpanStyle(
baselineShift = BaselineShift.Superscript,
fontSize = 17.sp,
color =
androidx.compose.ui.graphics.Color.Blue
)
Text(fontSize = 24.sp,
fontWeight = FontWeight.Bold,
text = buildAnnotatedString {
append("E = mc")
withStyle(superscript)
{ append("2") }
}
)
val subScript = SpanStyle(
baselineShift = BaselineShift.Subscript,
fontSize = 17.sp,
color =
androidx.compose.ui.graphics.Color.Green
)
Text(
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
text = buildAnnotatedString {
append("CH")
withStyle(subScript) {
append("3")
}
append("COOH")
}
)
}
}
MainActivity
package com.example.supersubscriptcompose import … class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { SuperSubScriptComposeTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { TextScript() } } } } }
OUTPUT :
*******************************Finish*****************************
.png)