How to Create Jetpack Compose Text and Button UI in Android (Kotlin Guide)

If you’re starting Android UI with Jetpack Compose, you’ll love how quickly you can build clean interfaces without XML. In this step-by-step guide, we’ll show you exactly how to create Jetpack Compose Text and Button UI using Material 3, style them with themes and typography, handle clicks, and preview everything right inside Android Studio. This tutorial is written for students, beginners, and anyone learning Kotlin/Java for Android app development.

What is Jetpack Compose and why use it for Android UI?

Jetpack Compose is Android’s modern toolkit for building native UI with Kotlin. Instead of writing XML layouts, you describe UI with composable functions. It’s:

• Declarative: UI is a function of state, so UI updates automatically when data changes.
• Kotlin-first: No XML or findViewById needed.
• Material 3 ready: Use theme-aware components like Text and Button that adapt to light/dark themes and accessibility settings.

For beginners, Compose reduces boilerplate and makes learning Android UI much more approachable. If you’re looking for Jetpack Compose basics for beginners, mastering Text and Button is the perfect starting point.

Project setup (Material 3 + Compose BOM)

Add the Compose BOM to keep versions aligned and include Material 3 components. In your app module’s build.gradle (Kotlin DSL shown), add:

Tip: Always check the latest Compose BOM version in the Android docs or release notes. We’ll use Material 3 (androidx.compose.material3) since it’s the recommended design system for new apps.

Create a minimal Compose screen with Text and Button

Below is a simple screen that shows a greeting and a button that increases a counter on click. This is a common example for a Jetpack Compose tutorial for Kotlin beginners.

MainActivity (Kotlin)

class="cd-package">import android.os.Bundle
class="cd-package">import androidx.activity.ComponentActivity
class="cd-package">import androidx.activity.compose.setContent
class="cd-package">import androidx.compose.foundation.layout.*
class="cd-package">import androidx.compose.material3.*
class="cd-package">import androidx.compose.runtime.*
class="cd-package">import androidx.compose.ui.Alignment
class="cd-package">import androidx.compose.ui.Modifier
class="cd-package">import androidx.compose.ui.text.font.FontWeight
class="cd-package">import androidx.compose.ui.unit.dp
class="cd-package">import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme { // uses Material 3 theme (typography, colorScheme)
                CounterScreen()
            }
        }
    }
}

class="cd-annotation">@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    // Create simple Android UI with Compose step by step
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp), // padding around the column
        verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Jetpack Compose Text composable
        Text(
            text = "Hello, Compose!",
            style = MaterialTheme.typography.titleLarge,
            color = MaterialTheme.colorScheme.onBackground
        )

        // Another Text that shows state
        Text(
            text = "You tapped $count times",
            fontSize = 18.sp,
            fontWeight = FontWeight.Medium
        )

        // Jetpack Compose Button composable with onClick
        Button(
            onClick = { count++ },
            modifier = Modifier
                .heightIn(min = 48.dp) // keep target size accessible
        ) {
            Text("Tap me")
        }
    }
}

How Text works in Compose

The Text composable is a Material 3 component that automatically picks typography and colors from MaterialTheme. This makes your app theme-aware and accessible by default. Here are common properties you’ll use:

• text: The string to display.
• style: Use MaterialTheme.typography (e.g., titleLarge, bodyMedium).
• color: From MaterialTheme.colorScheme (e.g., onBackground).
• maxLines and overflow: Handle long text with ellipses.
• fontSize, fontWeight, letterSpacing: Direct font styling when needed.

Text with ellipsis and modern overflow modes

class="cd-package">import androidx.compose.ui.text.style.TextOverflow

class="cd-annotation">@Composable
fun EllipsisSamples() {
    Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
        Text(
            text = "A very long title that will not fit on one line in smaller screens",
            style = MaterialTheme.typography.titleMedium,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis // end ellipsis
        )
        Text(
            text = "This text shows start ellipsis when it is too long to render fully",
            maxLines = 1,
            overflow = TextOverflow.StartEllipsis
        )
        Text(
            text = "Middle ellipsis keeps the end of the string visible, useful for file names.txt",
            maxLines = 1,
            overflow = TextOverflow.MiddleEllipsis
        )
    }
}

Auto-size text to fit

If a container is constrained (like a card or chip), you can auto-size text so it fits nicely. Use BasicText with TextAutoSize:

class="cd-package">import androidx.compose.foundation.text.BasicText
class="cd-package">import androidx.compose.foundation.text.TextAutoSize
class="cd-package">import androidx.compose.ui.text.style.TextAlign

class="cd-annotation">@Composable
fun AutoSizeTextCard(title: String, modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier,
        shape = MaterialTheme.shapes.medium,
        color = MaterialTheme.colorScheme.surfaceVariant
    ) {
        Box(Modifier.padding(12.dp)) {
            BasicText(
                text = title,
                // Step-based auto-size tries sizes between min and max until it fits
                autoSize = TextAutoSize.StepBased(
                    minFontSize = 12.sp,
                    maxFontSize = 22.sp
                ),
                // Optional text alignment via style or ParagraphStyle
                // You can also use TextAlign.Center with Text composable
            )
        }
    }
}

Links inside Text (without deprecated ClickableText)

To add a tappable link in text, build an AnnotatedString with LinkAnnotation and show it using Text or BasicText. This replaces the now-deprecated ClickableText.

This approach integrates better with accessibility and Material semantics while keeping your code clean and modern.

Create and style Buttons in Compose

Material 3 offers multiple button types. Use the one that matches the emphasis you want:

• Button: Primary, filled.
• FilledTonalButton: Secondary emphasis.
• ElevatedButton: Subtle elevation.
• OutlinedButton: Low emphasis with outline.
• TextButton: Minimal emphasis, text-only.

Examples with onClick

Customize colors, shape, and padding

Best practice: keep interactive targets at least 48 dp in height/width, and prefer using Material components because they meet accessibility guidelines by default.

Put it together: a simple Compose screen, step by step

Let’s build a compact screen that demonstrates the following:

• Title with ellipsis
• Auto-sized subtitle
• Primary button that changes state
• Secondary outlined action

class="cd-annotation">@Composable
fun TextAndButtonDemo() {
    var subscribed by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Text(
            text = "Welcome to Jetpack Compose Basics for Beginners – A Practical Walkthrough",
            style = MaterialTheme.typography.titleLarge,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )

        AutoSizeTextCard(
            title = "Build Android UI with Jetpack Compose (auto-sizing title)",
            modifier = Modifier.fillMaxWidth()
        )

        Button(
            onClick = { subscribed = !subscribed },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(if (subscribed) "Unsubscribe" else "Subscribe")
        }

        OutlinedButton(
            onClick = { /* open details */ },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Learn more")
        }
    }
}

When to use Text vs. BasicText

• Text: Use for most app text. It integrates with Material 3 theming, typography, and colors.
• BasicText: Use for advanced scenarios (e.g., auto-size text, custom layout behavior) when you don’t need Material styling.

Accessibility and theming tips

• Use sp for font sizes so the user’s system settings scale your text appropriately.
• Prefer theme styles: MaterialTheme.typography.* and MaterialTheme.colorScheme.* to keep design consistent and accessible.
• Buttons already merge label semantics; you don’t need to set contentDescription for the text inside a Button.
• Maintain minimum 48 dp touch targets.

Preview and test your Compose UI in Android Studio

Compose Previews let you see your composables without running the app. You can even preview dark mode.

To test behavior like onClick, use Compose UI tests with createAndroidComposeRule and performClick on nodes matching text or test tags. For beginners, starting with Previews is often enough to iterate quickly.

Troubleshooting and common mistakes

• Text doesn’t fit or gets cut off: Set maxLines and overflow, or use BasicText with TextAutoSize.
• Colors look off: Ensure you’re using MaterialTheme.colorScheme and not hard-coded colors, unless necessary.
• Buttons feel small or hard to tap: Ensure at least 48 dp height/width. Material 3 buttons include good defaults, but constraints can reduce size if you’re not careful.
• Deprecated APIs for links: Don’t use ClickableText for hyperlinks; use LinkAnnotation with Text/BasicText instead.

Output / Result

After implementing the code above, you’ll see:

• A themed screen with a title that truncates gracefully with an ellipsis.
• An auto-sized subtitle that adapts to the container width.
• A primary button that toggles state (e.g., Subscribe ↔ Unsubscribe) with each tap.
• A secondary outlined button for a less prominent action.

This is the core of how to add text and button in Jetpack Compose and a solid foundation to build screens quickly.

FAQ

What is Jetpack Compose and how does it work for Android UI?

Jetpack Compose is Android’s modern, declarative UI toolkit. You build UI with Kotlin functions called composables. Compose updates the UI automatically when state changes, which reduces boilerplate and helps you move faster.

How do I add a Text composable in Jetpack Compose?

Use Text("Hello"). To keep it theme-aware, apply style = MaterialTheme.typography.* and colors from MaterialTheme.colorScheme. You can control maxLines and overflow to handle long text.

How do I create a Button with an onClick action in Compose?

Use Button(onClick = { /* action */ }) { Text("Click") }. Keep actions simple, and store UI state with remember { mutableStateOf(...) } so the UI updates automatically when users tap. For example: var count by remember { mutableStateOf(0) } then onClick = { count++ }.

How can I style fonts, colors, and padding for Text and Button in Compose?

Prefer Material theme styles for consistency. For Text: style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground. For Buttons: use ButtonDefaults.buttonColors and shape to adjust appearance. Add external spacing with Modifier.padding().

How do I preview and test a Compose UI in Android Studio?

Add @Preview composables with showBackground = true and optionally dark mode previews. Use the Compose Preview panel to view changes instantly. For UI behavior tests, use Compose UI testing APIs to find nodes and perform clicks.

Key takeaways

• Use Material 3 Text and Button for accessible, theme-aware UI.
• Handle long text with maxLines and TextOverflow (including Start and Middle ellipses).
• Use BasicText + TextAutoSize when text must fit constrained spaces.
• For links, prefer LinkAnnotation with Text/BasicText.
• Keep interactive elements at least 48 dp to meet accessibility guidelines.

Extend this tutorial

Now that you know How to create Jetpack Compose Text and Button UI, try these next steps:

• Add icons to buttons with Icon and IconButton.
• Use Scaffold and SnackbarHost to show messages on button clicks.
• Create a create simple Android UI with Compose step by step layout using Column, Row, and Box.

Sources / Further reading

• Text in Compose (overview): https://developer.android.com/develop/ui/compose/text
• Configure text layout (maxLines, overflow): https://developer.android.com/develop/ui/compose/text/configure-layout
• TextOverflow API (Start/Middle ellipsis): https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow
• Links in Text with LinkAnnotation: https://developer.android.com/develop/ui/compose/text/user-interactions
• BasicText and TextAutoSize: https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/BasicText.composable
• Material 3 Buttons guide: https://developer.android.com/develop/ui/compose/components/button
• Material 3 design system for Compose: https://developer.android.com/develop/ui/compose/designsystems/material3

Conclusion

That’s it! You’ve learned the essentials of Android UI with Jetpack Compose: adding Text, creating Buttons with onClick, styling with Material 3, handling long text elegantly, and previewing your UI. Keep practicing by combining Text and Button with other Material components, and explore more patterns in this Kotlin Android Jetpack Compose tutorial series.