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 Text in Jetpack Compose

First,

• Open Android Studio
• Create a new or open existing project
• Setup Project

build.gradle (project)

buildscript {
    ext {
        compose_ui_version = '1.4.0'
    }
}

// Top-level build file where you can add configuration options common to all sub-projects/modules.

plugins {
    id 'com.android.application' version '7.4.2' apply false
    id 'com.android.library' version '7.4.2' apply false
    id 'org.jetbrains.kotlin.android' version '1.8.10' apply false
}

build.gradle (module:app)

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.techpassmaster.jetpackcomposeseries'
    compileSdk 33

    defaultConfig {
        applicationId "com.techpassmaster.jetpackcomposeseries"
        minSdk 24
        targetSdk 33
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.4.4'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.10.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
    implementation 'androidx.activity:activity-compose:1.7.0'
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    implementation 'androidx.compose.material:material:1.4.1'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
    implementation "org.jetbrains.kotlin:kotlin-script-runtime:1.8.20"
}

After creating the project create 3 composable function for BoldText, ItalicText and UnderlineText.

BoldText @Composable Function

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

ItalicText @Composable Function

@Composable
fun ItalicText() {
        Text(
            text = "Hello World",
            fontStyle = FontStyle.Italic,
            fontSize = 30.sp
        )
}

UnderlineText @Composable Function

@Composable
fun UnderlineText() {
        Text(
            text = "Text with UnderLine",
            textDecoration = TextDecoration.Underline,
            fontSize = 30.sp
        )
}

Complete code

package com.techpassmaster.jetpackcomposeseries

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.runtime.Composable
import androidx.compose.material.*
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 androidx.compose.ui.unit.sp
import com.techpassmaster.jetpackcomposeseries.ui.theme.JetpackComposeSeriesTheme

class BoldItalicUnderlineActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeSeriesTheme {
                // 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 composable
//        in a vertically sequenced format It's similar to a LinearLayout with
//        vertical orientation.

    Column {

        // Bold Text
        Text(
            text = "Hello World",
            fontWeight = FontWeight.Bold,
            fontSize = 30.sp
        )

        // Italic Text
        Text(
            text = "Hello World",
            fontStyle = FontStyle.Italic,
            fontSize = 30.sp
        )

        // UnderLine Text
        Text(
            text = "Text with UnderLine",
            textDecoration = TextDecoration.Underline,
            fontSize = 30.sp
        )
    }
}

In the above example, we’re using Column for displaying a collection of composable in a vertically sequenced format It’s similar to a LinearLayout with vertical orientation.

Output

You May Also Like ⇣

• Text in Jetpack Compose
• Text Padding in Jetpack Compose
• Clickable Text in Jetpack Compose
• Shapes in Jetpack Compose