How to Create Superscript and Subscript Text using Jetpack Compose in Android?
In this article, we will explain how to create a Superscript and Subscript text using Jetpack Compose. Below is the sample picture to show what we are going to build. Note that we are going to implement this project using the Kotlin language.
Prerequisites:
- Basic Knowledge of Kotlin.
- Jetpack Compose in Android.
Step by Step Implementation
Step 1: Create a new project
To create a new project in Android Studio using Jetpack Compose please refer to How to Create a New Project in Android Studio Canary Version with Jetpack Compose.
Step 2: Working with MainActivity.kt
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.style.BaselineShift import androidx.compose.ui.text.withStyle import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.example.jetpack_playground.ui.theme.Jetpack_playgroundTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { Jetpack_playgroundTheme { Surface(color = Color.White) { Column(modifier = Modifier.padding( 10 .dp)) { // call the function superScriptAndSubscript() } } } } } } // create the composable function @Composable fun superScriptAndSubscript() { // create a variable superScript // enter the baselineShift to // BaselineShift.Superscript for superscript val superscript = SpanStyle( baselineShift = BaselineShift.Superscript, fontSize = 16 .sp, // font size of superscript color = Color.Red // color ) // create a variable subScript // enter the baselineShift to // BaselineShift.Subscript for subscript val subscript = SpanStyle( baselineShift = BaselineShift.Subscript, fontSize = 16 .sp, // font size of subscript color = Color.Blue // color ) Column { // create first text Text( fontSize = 20 .sp, text = buildAnnotatedString { // instead of directly passing // string value to text // use append append( "E = mc" ) withStyle(superscript) { append( "2" ) } } ) // Create second text Text( fontSize = 20 .sp, text = buildAnnotatedString { // instead of directly passing // string value to text // use append append( "CH" ) withStyle(subscript) { append( "4" ) } append( " + H" ) withStyle(subscript) { append( "2" ) } append( "O = CO + 3H" ) withStyle(subscript) { append( "2" ) } } ) } } |
Output: