Android – Jetpack Compose

Tram Ho


Jetpack Compose is a modern toolkit for building an Android user interface. Jetpack Compose simplifies and speeds up UI development on Android with less code, powerful tools and intuitive Kotlin API.

In this article, you will build a simple UI component with declaration functions. You will not edit any XML layout or directly initialize UI widgets. Instead, you will call the Jetpack Compose functions to call which elements you want and the Compose compiler will do the rest.

Note: The examples in this article are done on the latest version of Android Studio Preview

Create a Jetpack Compose support application

If you want to start a new project that supports Jetpack Compose by default, Android Studio has included new project templates so you can get started. To create a new project including Jetpack Compose , perform the following steps:

  1. If you are at the Welcome to Android Studio window, select Start a new Android Studio project . If you are on an open project, choose File> New> New Project from the menu bar.
  2. In the Select a Project Template window, select Empty Compose Activity and then Next .
  3. In the Configure your project window, perform the following steps:
    • Set the Name, Package name and Save location for the project.
    • Note that in the Language menu, Kotlin is the only option because Jetpack Compose only works with classes written in the Kotlin language.
    • At the Minimum API level dropdown option, select API level 21 or higher .
  4. Select Finish

And here is the result of the project you just created:

Add Jetpack Compose to the current project

If you want to use Jetpack Compose in an existing project, you will need to configure your project with the required settings and dependencies.

Configure the Gradle file

You need to set the minimum API of the application to 21 or higher and enable Jectpack Compose in the app’s build.gradle file as shown below:

Use the Kotlin-Gradle experimental plugin

Jetpack Compose currently requires a trial version of the Kotlin-Gradle plugin. To add this plugin, add the file build.gradle as follows:

Add the Jetpack Compose toolkit to dependencies

Add the Jetpack Compose toolkit to the dependencies of the build.gradle file as follows:

Use Live Preview

Live Preview is a feature of ANdorid Studio that allows you to test and compare composible functions via orientation, font size and theme without having to deploy the application again.

As seen in the image above, you can have multiple previews of a composable functions with different font size, zoom, or theme limits. Alternatively, you can click on the elements in the preview to quickly navigate to the function that can be combined for that element in the code editor.

Create a basic Live Preview

Here is an example of a composable function called TutorialPreviewTemplate() :

To create a live preview, create a new composable function without parameters including the @Preview annotation above the @Composable annotation:

When you create or modify a live preview, you need to rebuild the project to see the changes. Select Build> Make Project on the menu bar.

You can create multiple live previews, appearing side by side in the IDE Preview window as shown below, which is useful for comparing composable functions in action.

Include arguments via @Preview annotation

The @Preview Annotation may contain parameters so you can change the way the IDE defines a composable function on the Preview window. In the example below, you can name the live preview by passing a string of characters, which helps you identify the preview together:

The @Preview parameter you can supplement with the following arguments:

  • widthDp : Maximum width, measured in dp, that the IDE can use when displaying live previews. This is useful when you want to preview your composable function on limited screen sizes.
  • heightDp : Maximum height, measured in dp, that the IDE can use when displaying live previews. This is useful when you want to preview your composable function on limited screen sizes.
  • fontScale : The ratio ratio, relative to the base destiny ratio (1f) of the font. This is useful when you want to test the composable function for different font size options.


Jetpack Compose is the future that Android developers need to build UI for their applications more quickly and intuitively. And what do you think about it, please comment and share your feelings to everyone.

Reference source

Android Developer Site

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo