Composables

A composable function is annotated with the @Composable annotation, which tells the compiler that this function can be used in the composition of the UI.

When a composable function is called, it creates a new composition scope. Inside this scope, other composable functions can be called, allowing for the creation of nested UI elements. This is similar to how a layout XML file defines nested views.

@Composable
fun MyButton() {
    Column(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalGravity = Alignment.CenterHorizontally
    ) {
        Button(
            onClick = { /* Perform action */ },
            modifier = Modifier.padding(8.dp),
            text = "Click me!"
        )
    }
}

For example, in the previous code sample, the MyButton function is a composable function, which describes a button UI element. It takes no inputs, but it returns a description of a button that can be rendered on the screen. The button is created by calling the Button composable, which is provided by the Jetpack Compose library.

Composable functions can also take inputs, such as data or parameters. These inputs can be used to customize the UI elements that are created.