Understanding @Composable and @Preview Annotations in Jetpack Compose

Introduction

Jetpack Compose is a modern UI toolkit for Android that simplifies UI development with a declarative approach. At the core of Compose are @Composable and @Preview annotations, which allow you to build and preview UI components efficiently.

In this article, we'll explore:

• What @Composable functions are

• Rules for writing composable functions

• How to use @Preview to visualize UI

• Customizing previews with parameters

By the end of this guide, you'll have a solid understanding of these key Compose concepts!

What is @Composable?

@Composable is an annotation in Jetpack Compose that marks a function as a UI component. It tells the Compose compiler that this function is responsible for drawing UI elements.

Unlike XML-based views, composable functions do not return UI elements. Instead, they describe how the UI should look.

Basic Example

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

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

Explanation:

• @Composable marks Greeting() as a UI function.

• Text() is another composable function that displays text.

• @Preview lets you see how Greeting() looks inside Android Studio without running the app.

Rules for @Composable Functions

Composable Functions Must Not Return Anything

Composable functions describe the UI rather than return elements.

Incorrect:

@Composable
fun MyComposable(): Text { // ERROR ❌
    return Text("Hello")
}

Correct:

@Composable
fun MyComposable() {
    Text("Hello")
}

Composable Functions Can Only Be Called From Other Composables

Incorrect:

fun myFunction() {
    Greeting("Android") // ERROR ❌ Not inside a @Composable function
}

Correct:

@Composable
fun MyScreen() {
    Greeting("Android")
}

Composable Functions Should Be Side-Effect-Free

Composables should only describe UI, not modify app state directly. Use remember or ViewModel for managing state.

Composable Functions Can Be Nested

Composable functions can be combined to build complex UIs.

@Composable
fun ParentComposable() {
    Column {
        ChildComposable()
    }
}

@Composable
fun ChildComposable() {
    Text("I'm inside ParentComposable!")
}

Here, ParentComposable() contains ChildComposable(), demonstrating composition.

Example: Button with Click Action

@Composable
fun MyButton() {
    Button(onClick = { println("Button Clicked!") }) {
        Text("Click Me")
    }
}

Key Points:

• Button() is a built-in composable.

• The onClick lambda is triggered when the button is pressed.

• Text() inside Button() represents the button label.

What is @Preview?

@Preview is an annotation that allows Android Studio to display a preview of a composable function inside the design editor.

Basic Example:

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

Explanation:

• @Preview enables a preview of PreviewGreeting() in Android Studio.

• showBackground = true adds a default background.

Customizing Previews

You can customize previews using various parameters:

Example with Custom Preview

@Preview(
    name = "Custom Preview",
    showBackground = true,
    backgroundColor = 0xFFEAEAEA,
    widthDp = 300,
    heightDp = 100
)
@Composable
fun CustomPreview() {
    Text("This is a custom preview")
}

Key Points:

• backgroundColor = 0xFFEAEAEA → Light gray background.

• widthDp = 300, heightDp = 100 → Sets a specific size for preview.

• name = "Custom Preview" → Shows the name in Android Studio.

Multiple Previews for Different Configurations

You can create multiple previews to test different UI cases:

@Preview(name = "Light Mode", showBackground = true)
@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun ThemedPreview() {
    Greeting(name = "Compose")
}

Key Points:

• uiMode = Configuration.UI_MODE_NIGHT_YES previews dark mode.

• Two @Preview annotations show both light and dark modes in Android Studio.

Conclusion

In this guide, we explored Composable and Preview annotations in Jetpack Compose. Understanding these concepts is crucial for writing clean, efficient, and reusable UI components.