How to Create Superscript and Subscript Text using Jetpack Compose in Android? Last Updated : 28 Jul, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Comment More infoAdvertise with us I introidx Follow Improve Article Tags : Kotlin Android-Jetpack Similar Reads Kotlin Tutorial This Kotlin tutorial is designed for beginners as well as professional, which covers basic and advanced concepts of Kotlin programming language. In this Kotlin tutorial, you'll learn various important Kotlin topics, including data types, control flow, functions, object-oriented programming, collecti 4 min read Kotlin Android Tutorial Kotlin is a cross-platform programming language that may be used as an alternative to Java for Android App Development. Kotlin is an easy language so that you can create powerful applications immediately. Kotlin is much simpler for beginners to try as compared to Java, and this Kotlin Android Tutori 6 min read Android Jetpack Compose Tutorial Android Jetpack Compose Tutorial encompasses both fundamental and advanced topics will help elevate from beginner to expert, this tutorial allows newcomers to follow a sequential path to master the basics of Android development.In this Android Jetpack Compose Tutorial, you'll explore a new and excit 5 min read Introduction to Activities in Android Activity class is one of the very important parts of the Android Component. Any app, don't matter how small it is (in terms of code and scalability), has at least one Activity class. Unlike most programming languages, in which the main() method is the entry point for that program or application to s 6 min read Basics of Jetpack Compose in Android Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will 5 min read Retrofit with Kotlin Coroutine in Android Retrofit is a type-safe http client which is used to retrieve, update and delete the data from web services. Nowadays retrofit library is popular among the developers to use the API key. The Kotlin team defines coroutines as âlightweight threadsâ. They are sort of tasks that the actual threads can e 3 min read Introduction to Kotlin Kotlin is a statically typed, general-purpose programming language developed by JetBrains, which has built world-class IDEs like IntelliJ IDEA, PhpStorm, Appcode, etc. It was first introduced by JetBrains in 2011 as a new language for the JVM. Kotlin is an object-oriented language, and a better lang 4 min read Kotlin Data Types The most fundamental data type in Kotlin is the Primitive data type and all others are reference types like array and string. Java needs to use wrappers (java.lang.Integer) for primitive data types to behave like objects but Kotlin already has all data types as objects.There are different data types 3 min read Kotlin when expression In Kotlin, when replaces the switch operator of other languages like Java. A certain block of code needs to be executed when some condition is fulfilled. The argument of when expression compares with all the branches one by one until some match is found. After the first match is found, it reaches to 6 min read Kotlin Constructor A constructor is a special member function that is automatically called when an object of a class is created. Its main purpose is to initialize properties or perform setup operations. In Kotlin, constructors are concise, expressive, and provide significant flexibility with features like default para 6 min read Like