Jetpack Compose: Getting Started

In order to build user interfaces with Jetpack Compose, you will need to use composable functions.

Composable functions are Kotlin functions that annotated with the @composable keyword and would indicate to the Compose compiler that this function describes a piece of your user interface.

Jetpack Compose provides some foundational functions that we can build upon in order to create our own custom UI’s.

There are several inbuilt composable functions that you can leverage: Text, Box, Column, among many others.

Jetpack Compose has a function called setContent that has one mandatory argument that is a composable function which provides the default surface upon which all your other composable functions will be rendered from in your screen, either an Activity or Fragment.

Through this course, we will have all our composable functions inside an Activity.

Using a Text Composable

In Jetpack Compose, you can add some text onto your UI using the Text composable function. Since it is an inbuilt composable, we only need to call it and provide any necessary arguments.

The Text composable requires one (1) mandatory argument and has 14 other optional arguments.

The manadatory argument is named text and requires a String. This argument indicates the piece of text you want to be displayed in the UI.

It is important to also note that this is the very first argument and it would be the default argument if only one has been provided without a name.

In the MainActivity.kt file in your project, add a Text composable to your setContent block.

setContent {
    Text(text = "Hello Jetpack Compose")
}

You can run your application at this point and you will be able to see the new text that we have added in our app.

Creating a Composable Function

Sometimes, you may be interested in building UI components that are not available by default with Jetpack Compose. For such scenarios, you can create your own composable function. These functions are usually annotated with the @composable property.

These composable functions do not need to return any value since they are only describing how the UI should look as opposed to creating custom UI widgets.

It is also important to note that we are also advised to name the composable in sentence case.

Composable Function

For now, let us create a composable function that will require only a simple text.

In your MainActivity.kt file, add a new composable function that will receive a text and display a Text in the user’s UI.

@Composable
fun TitleText(name: String){
    Text(text = name)
}

Using this composable function is the same as our initial Text composable.

setContent{
    TitleText(name = "Hello Jetpack Compose")
}

You can run your application at this point and you will be able to see the same result as before.

Previewing Composables

Now, try playing around with your TitleText composable by changing the value of the name property.

You quickly realize that in order to see any small changes in your application, you need to rerun our application every single time, this can be a little bit tiring.

Lucky for us, Jetpack Compose offers a very simple way through which we can preview our composable every single time we change our code.

Introducing the @preview annotation that we can add to composables that we want to display in Android Studio's preview window that appears on the right side of the screen.

Compose Preview

In order to set up the preview window for your composable, you need to add the @preview annotation to your composable.

@Preview
@Composable
fun AppPreview(){
    TitleText(name = "Jetpack Compose Preview")
}

To make your first preview, you will need to initate a build for your application first. Now each time you make a change to that composable, your changes will reflect immediately, without needing to run your application every time. This would save you a lot of time during development.

NB: For subsequent changes, you will not need to initiate as many builds.

You will realize in order to have a preview, we have wrapped our exixting composable within another one. This is because, by default all Preview composables do not have support for parameters since the UI needs to know what to render in the preview immediately.

We can, however, mitigate this by adding a default paarameter value in our actual composable.

@Preview
@Composable
fun TitleText(name: String = "Hello World"){
  Text(text = name)
}

You have successfully added a new composable and previewd it in Android Studio. In the next episode, you will start to organize your composables in a proper layout.