Underline Text in Jetpack Compose

Hello Developers, Welcome to Jetpack Compose tutorials. In this tutorial, We are going to learn How to Underline Text in Jetpack Compose Using Kotlin with Android Studio.

Underline Text in Jetpack Compose

First Open your Android Studio project and Create a Composable Function for Underline Text

UnderlineText @Composable Function

@Composable
fun UnderlinedText() {
    Text(text = "Text with Underline",
        textDecoration = TextDecoration.Underline)
}

The complete example code is given below

package com.techpassmaster.jetpackcomposetextandstyles

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextDecoration
import com.techpassmaster.jetpackcomposetextandstyles.ui.theme.JetpackComposeTextAndStylesTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTextAndStylesTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    // this function is used for underline text
                    UnderlinedText()
                }
            }
        }
    }
}

@Composable
fun UnderlinedText() {
    Text(text = "Text with Underline",
        textDecoration = TextDecoration.Underline)
}

Now run and test the app you will get the text with an underline.

You May Also Like ⇣

Leave a Reply

Your email address will not be published. Required fields are marked *