Text in Jetpack Compose

Hello Developers, Welcome to Techpass Master. In this tutorial, We are going to learn, How to Add a Simple Text in Jetpack Compose Using Kotlin with Android Studio.

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 a @Composable Function

Simple Text

@Composable
fun SimpleText(name: String) {
    Text(text = "Techpass $name!")
}

Now call this composable function under setContent

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.tooling.preview.Preview
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
                ) {
                    SimpleText("Master")
                }
            }
        }
    }
}

@Composable
fun SimpleText(name: String) {
    Text(text = "Techpass $name!")
}

Now run and test your app.

You May Also Like ⇣

• Text Padding in Jetpack Compose
• Clickable Text in Jetpack Compose
• Underline Text in Jetpack Compose
• Bold Italic Underline in Jetpack Compose