Exploring Jetpack Compose: The Basics

Learn the basics of Jetpack Compose.

Photo by Rohit Tandon on Unsplash

Jetpack Compose, the next big change in Android is now in the alpha stage, so this might be the perfect time to start exploring the library and find out how it will help us writing better user interfaces with ease.

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. — Official Docs.

Benefits of Using Compose

• Jetpack compose eliminates us writing long XML files. The same UI can be created with less amount of declarative code.
• Jetpack compose automatically handles the change in UI state when the data in the app changes.
• It is compatible with the existing code in our app. You can easily migrate to compose.
• It has built in support for material design, animations, dark theme etc.
• It has direct access to the Android platform APIs.

Project Setup

Since the Jetpack Compose is in the alpha stage, you need to use the latest canary version of android to work on it. In the canary version of android studio you can start a compose project by choosing an Empty Compose Activity.

• Your minSdkVersion should not be lower than 21.
• Make sure you use the kotlin version 1.4.0 or higher.

Android studio will automatically configure your project to use compose by adding required dependencies to your app level build.gradle.

build.gradle

Some Basic Things

Jetpack Compose completely changes the way we create user interfaces in android, which means we will create UI not by writing XML but by describing our UI in the application code.

Composable Functions

Composable functions are the heart of Jetpack Compose. In Jetpack Compose you will declare your app UI components such as Button, TextView, EditText etc. programmatically by creating composable functions rather that writing the views in XML files. You can create a composable function by marking it with @Composable annotation.

MainActivity.kt

• The SayHello() function is a composable function marked with the @Composable annotation.
• The Text() function is an another composable function provided in the jetpack compose api. It creates a text element in the activity.
• The setContent{ } is a function provided by the jetpack compose which composes the given composable into the given activity. The composable passed in it becomes the root view of the activity.
• Composable functions can only be called from other composable functions.

The above code will create a text element in the top left corner of the activity.

Similarly you can create a Button element using the Button() composable function.

• The Buttton() composable function takes a onClick lambda for the button click event.
• The Button() function takes an another lambda for the content shown on the Button such as the text “Show Toast”, which we create by creating a text element with the Text() function.

The above code creates a Button in the top left corner of the activity. Clicking that button shows a toast message.

Layouts

If you create multiple text element with the Text() function as described above, they will appear on top of each other because their is no layouts associated with the text elements. The jetpack compose api provides functions to create layouts to stack UI elements vertically or horizontally in the activity.

To stack the elements vertically, you need to use the Column function, and to stack the elements horizontally, you need to use the Row function.

MainActivity.kt

• The Column function stacks the elements vertically
• The Row function stacks the elements horizontally.

The text “Tuesday” and “3:09 pm” stacked horizontally

Modifiers

You can decorate a composable with the use of modifiers. By using modifiers you can change the appearance of a composable like adding padding, changing size, applying gravity etc. or you can make an element clickable, scrollable or zoomable.

Applying modifiers to a text element

You can apply a padding to the start of the text element with the Modifier.padding(start = 8.dp).

Creating a UI Component

Now we will use the above concepts to create a user card UI component as described in the official codelab.

User card UI component

MainActivity.kt

• The Row function stacks the user profile image and the name horizontally.
• The Column function stacks the user name and job vertically.
• The Surface function acts as a placeholder for the profile image. We can apply the shape and color of the surface with the shape and color property and we can set the size with .preferredSize() modifier.
• You can apply spacing between the profile image and user detail by adding a padding with the .padding() modifier.
• The ProvideEmphasis() creates an emphasis to the text element.
• You can set the whole component clickable with the .clickable() modifier and set the shape of the ripple with the .clip() modifier.

It’s done. You learned and created a basic UI component with Jetpack compose. In the next article we will learn some more concepts such as applying material theme and creating complex layouts by creating some screens in jetpack compose.

References

• Compose pathway
• Compose basics codelab
• Compose layouts codelab

If you are still here, thanks for reading.