How to use composable functions in Android Jetpack Compose

Android Jetpack Compose is a modern toolkit for building native UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs1. In this blog post, we will explore how to use composable functions, which are the building blocks of Jetpack Compose.

What are composable functions?

Composable functions are functions that can be used to describe your UI programmatically by providing data dependencies, rather than focusing on the process of the UI’s construction1. To create a composable function, you just need to add the @Composable annotation to the function name. For example:

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

This function defines a simple UI element that displays a text label with a greeting message. You can call this function from another composable function, such as the setContent block that defines the activity’s layout:

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Greeting(name = "World") } }

This will render the text “Hello, World!” on the screen. You can also pass different parameters to the composable function to customize its behavior. For example:

setContent { Greeting(name = "Android") }

This will render the text “Hello, Android!” on the screen.

How to preview composable functions in Android Studio?

One of the advantages of using composable functions is that you can preview them in Android Studio without having to build and install the app to an Android device or emulator1. To do this, you need to use the @Preview annotation on a composable function that does not take in parameters. For example:

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

This function calls the Greeting function with a parameter of “Compose”. You can then see a preview of this function in Android Studio by clicking on the split (design/code) view. You can also refresh the preview at any time by clicking on the refresh button at the top of the preview window.

How to use different types of composable functions?

There are many types of composable functions that you can use to create different UI elements and layouts in Jetpack Compose. Some of the most common ones are:

  • Text: This function displays a text label on the screen. You can customize its appearance by passing parameters such as colorfontSizefontWeight, etc.
  • Image: This function displays an image on the screen. You can load an image from a resource or a URL by using the painterResource or rememberImagePainter functions respectively. You can also adjust its size and shape by using parameters such as modifiercontentScalecontentDescription, etc.
  • Button: This function displays a button on the screen. You can handle its click event by passing a lambda expression to the onClick parameter. You can also style it by using parameters such as colorsshapeelevation, etc.
  • Row: This function arranges its children horizontally in a row. You can control how they are aligned and spaced by using parameters such as horizontalArrangementverticalAlignmentmodifier, etc.
  • Column: This function arranges its children vertically in a column. You can control how they are aligned and spaced by using parameters such as verticalArrangementhorizontalAlignmentmodifier, etc.
  • Box: This function stacks its children on top of each other in a box. You can control how they are positioned and sized by using parameters such as alignmentcontentAlignmentmodifier, etc.

Here is an example of how to use some of these composable functions to create a simple UI:

@Composable fun ProfileCard(name: String, image: Int) { Row( modifier = Modifier .padding(16.dp) .fillMaxWidth() .border(1.dp, Color.Gray) ) { Image( painter = painterResource(id = image), contentDescription = null, modifier = Modifier .size(64.dp) .clip(CircleShape) ) Spacer(modifier = Modifier.width(8.dp)) Column( verticalArrangement = Arrangement.Center ) { Text(text = name, fontWeight = FontWeight.Bold) Text(text = "Android Developer", fontStyle = FontStyle.Italic) } } }

This function creates a profile card with an image and some text. You can preview it in Android Studio by adding another function with the @Preview annotation:

@Preview @Composable fun PreviewProfileCard() { ProfileCard(name = "John Doe", image = R.drawable.profile_pic) }

This will show you how the profile card looks like in the preview window.

Conclusion

In this blog post, we learned how to use composable functions in Android Jetpack Compose. We saw how to create, preview, and use different types of composable functions to build native UI. Composable functions are a powerful and expressive way to describe your UI with less code and more flexibility. If you want to learn more about Jetpack Compose, you can check out the official documentation1 or some of the tutorials23 available online.


I hope this blog post was helpful for you. If you have any questions or feedback, please let me know in the comments. Thank you for reading! 😊

Author: John Rowan

I am a Senior Android Engineer and I love everything to do with computers. My specialty is Android programming but I actually love to code in any language specifically learning new things.

Author: John Rowan

I am a Senior Android Engineer and I love everything to do with computers. My specialty is Android programming but I actually love to code in any language specifically learning new things.

%d bloggers like this: