Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Superscript & subscript text in Jetpack Compose

Superscript & subscript text in Jetpack Compose - Coding Bihar

Superscript & subscript text in Jetpack Compose

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 = mc2

Subscript

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 :

What is superscript and subscript

*******************************Finish*****************************
 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!