Coding Bihar

Composable functions in Jetpack Compose

 Composable functions in Jetpack Compose - Coding Bihar
Composable functions in Jetpack Compose

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:
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())
}
 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!