Bold Italic Underline in Jetpack Compose

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

Bold Italic Underline in Jetpack Compose

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

BoldText @Composable Function

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}

ItalicText @Composable Function

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = Italic)
}

UnderlineText @Composable Function

Here we are using Column for displaying a collection of composables in a vertically sequenced format It’s similar to a LinearLayout with vertical orientation.

package com.techpassmaster.jetpackcomposetextandstyles

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
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.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
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
                ) {

//                    call BoldItalicUnderline composable function here
                    BoldItalicUnderlineText()
                }
            }
        }
    }

    @Composable
    fun BoldItalicUnderlineText(){

//        Here we are using Column for displaying a collection of composables in a vertically sequenced format
//        It's similar to a LinearLayout with vertical orientation.

        Column {

            // Bold Text
            Text("Hello World", fontWeight = FontWeight.Bold)

            // Italic Text
            Text("Hello World", fontStyle = FontStyle.Italic)

            // Underline Text
            Text(text = "Text with Underline", textDecoration = TextDecoration.Underline)

        }
    }
}

Output

Bold Italic Underline in Jetpack Compose
Bold Italic Underline in Jetpack Compose

Leave a Reply

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