Creating a simple UI component in Jetpack Compose involves defining a composable function. Composable functions can create and combine UI elements in a flexible and concise way. Here’s a step-by-step guide to creating a simple UI component, such as a greeting text:

1. Setting Up

Ensure you have the latest version of Android Studio that supports Jetpack Compose. Create a new project and select the template that includes Jetpack Compose.

2. Add Dependencies

Make sure your build.gradle files include the necessary Jetpack Compose dependencies. While the Android Studio template should handle this, it's good to verify or update them if needed:

implementation "androidx.compose.ui:ui:<compose_version>"
implementation "androidx.compose.material:material:<compose_version>"
implementation "androidx.compose.ui:ui-tooling-preview:<compose_version>"

Replace <compose_version> with the latest version of Compose. Check the official documentation or Android's Jetpack Compose setup guide for the most current version.

3. Define a Composable Function

A composable function is defined using the @Composable annotation. This function describes your UI component. Here's an example of a simple greeting function:

import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

4. Display the Composable in Your Activity

In your main activity, use the setContent method to set the UI content to your composable function. Jetpack Compose uses this method to define the activity's layout:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(modifier = Modifier.padding(16.dp)) {
                Greeting(name = "Jetpack Compose")
            }
        }
    }
}

5. Preview Your Composable

Android Studio supports the ability to preview your composables without needing to run them on an emulator or device. Add a preview function above or below your composable:

import androidx.compose.ui.tooling.preview.Preview

@Preview
@Composable
fun PreviewGreeting() {
    Greeting(name = "Android")
}

This function uses the @Preview annotation and calls your composable with sample data, allowing you to see a preview of the UI in the Android Studio IDE.

Summary

That's it! You've created a simple UI component using Jetpack Compose. This example illustrates the basics of defining composable functions, displaying them in an activity, and previewing them in Android Studio. Jetpack Compose makes it straightforward to build and combine UI components with minimal boilerplate code.