Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create Superscript and Subscript Text using Jetpack Compose in Android?

  • Last Updated : 28 Jul, 2021

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. 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

Prerequisites:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :