Composable Functions in Jetpack Compose
Jetpack Compose is the latest recommended tool by Google to build Android Apps is based on composable functions. These composable are used to draw UI of Android Apps programmatically. In jetpack Compose @composable annotation is used with the function name inside it we can add elements such as text, image, button cards etc.
In the following example we create a composable function named FirstScreen in which I added a Text and Image inside a column.
@Composable
fun FirstScreen(innerPadding: PaddingValues) {
Column (Modifier.padding(60.dp)){
Text(text = "Hello Compose!")
Image(
painter = painterResource(R.drawable.profile_pic),
contentDescription = "Contact profile picture",
)
}
}
Modifier: is used to change the composable size, layout, behavior, and appearance.
Padding: padding puts space around an element.
FillMaxWidth: fillMaxWidth makes the composable fill the maximum width given to it from its parent.
OUTPUT:
How to preview the UI
The @Preview annotation is used to see the review of the UI. The following is the example of preview annotation.
@Preview(showBackground = true)
@Composable
fun PreviewUi() {
FirstScreen(modifier = PaddingValues())
}
.png)