Android Jetpack Compose TextButton

Android Jetpack Compose TextButton

The TextButton in Android Jetpack Compose is a composable function that allows you to create text-only buttons, providing a clean and simple appearance while maintaining functionality for user interactions.

Basic Usage

@Composable
fun BasicTextButtonExample() {
    TextButton(onClick = { /* Do something */ }) {
        Text("Click Me")
    }
}

This code creates a basic TextButton with the text "Click Me". When clicked, it performs the action defined in the onClick lambda.

Jetpack Compose Basic TextButton Example

Styling the TextButton

@Composable
fun StyledTextButtonExample() {
    TextButton(
        onClick = { /* Do something */ },
        colors = ButtonDefaults.textButtonColors(contentColor = Color.Red)
    ) {
        Text("Styled Button")
    }
}

This code creates a styled TextButton with red text color.

Jetpack Compose Styled TextButton Example

TextButton with Icon

@Composable
fun IconTextButtonExample() {
    TextButton(onClick = { /* Do something */ }) {
        Icon(Icons.Default.ThumbUp, contentDescription = null)
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text("Like")
    }
}

This code creates a TextButton with an icon (a thumbs up) and text next to it.

Jetpack Compose TextButton with Icon Example

TextButton with Custom Elevation

@Composable
fun CustomElevationTextButtonExample() {
    TextButton(
        onClick = { /* Do something */ },
        elevation = ButtonDefaults.buttonElevation(defaultElevation = 8.dp)
    ) {
        Text("Custom Elevation Button")
    }
}

This code creates a TextButton with a custom elevation of 8.dp, giving it a raised appearance.

Jetpack Compose Custom Elevation TextButton Example

Android Jetpack Compose Example Application

MainActivity.kt

package com.example.programguruapp
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ThumbUp
import androidx.compose.material3.TextButton
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.example.programguruapp.ui.theme.ProgramGuruAppTheme
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ProgramGuruAppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) {innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(innerPadding),
                        verticalArrangement = Arrangement.spacedBy(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        BasicTextButtonExample()
                        StyledTextButtonExample()
                        IconTextButtonExample()
                        CustomElevationTextButtonExample()
                    }
                }
            }
        }
    }
}
@Composable
fun BasicTextButtonExample() {
    TextButton(onClick = { /* Do something */ }) {
        Text("Click Me")
    }
}
@Composable
fun StyledTextButtonExample() {
    TextButton(
        onClick = { /* Do something */ },
        colors = ButtonDefaults.textButtonColors(contentColor = Color.Red)
    ) {
        Text("Styled Button")
    }
}
@Composable
fun IconTextButtonExample() {
    TextButton(onClick = { /* Do something */ }) {
        Icon(Icons.Default.ThumbUp, contentDescription = null)
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text("Like")
    }
}
@Composable
fun CustomElevationTextButtonExample() {
    TextButton(
        onClick = { /* Do something */ },
        elevation = ButtonDefaults.buttonElevation(defaultElevation = 8.dp)
    ) {
        Text("Custom Elevation Button")
    }
}

Screenshot

Jetpack Compose TextButton Example

Conclusion

The TextButton in Android Jetpack Compose is a versatile and powerful tool for creating visually distinct interactive elements in your app's user interface. Understanding how to customize and use TextButtons effectively can enhance the usability and aesthetics of your Android applications.