Basics of Jetpack Compose - 1

What is Jetpack Compose?

Jetpack compose is Android's modern toolkit for developing the UI. It makes building the UI faster and easier. With less code and powerful intuitive Kotlin APIs you can build beautiful UIs for the native android apps.

How to Setup Compose for an existing app?

Step1: Add below configurations to your app's build.gradle file:

 buildFeatures {
        compose = true
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"

Note: kotlinCompileExtensionVersion defined under composeOptions is linked to Kotlin versioning. So choose the version of the library that matches your project's Kotlin version by referring to compatibility map.

Step 2: Add compose BOM (Bill of Materials) and library dependencies as per your need from the below block.

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.02.00")

    // Choose one of the following:
    // Material Design 3
    // or Material Design 2
    // or skip Material Design and build directly on top of foundational components
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout

    // Android Studio Preview support

    // UI Tests

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    // Optional - Add full set of material icons
    // Optional - Add window size utils

    // Optional - Integration with activities
    // Optional - Integration with ViewModels
    // Optional - Integration with LiveData
    // Optional - Integration with RxJava


How Compose is different from traditional XML approach?

In XML approach UI is built by instantiating the tree of widgets. XML layout file is inflated and each widget in the layout maintains its own state. App logic uses getter and setter methods to interact with the widgets.

In Compose, composable functions are used to construct the UI. They are Kotlin functions with @Composable annotation. These functions programatically describe how the app's UI should look. Here app logic responds to user events by calling composable functions with different parameters, which in turn would change the states of the concerned widgets.


Now that we have fair idea about Jetpack Compose, let us see some examples to get the look and feel of working with Compose.

  1. Display simple text on the screen
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        setContent {
            JetpackComposeTrainingTheme {
                Text("Hello, Welcome to Jetpack Compose")

In the above example, Text composable function which is defined by the Compose UI library displays a text label on the screen.

  1. Define a composable function.

     class MainActivity : ComponentActivity() {
         override fun onCreate(savedInstanceState: Bundle?) {
             setContent {
                 JetpackComposeTrainingTheme {
                    DisplayWelcomeMessage("Jetpack Compose")
     fun DisplayWelcomeMessage(name: String){
         Text(text = "Welcome to $name!")

    1. Preview your function in Android Studio by adding @Preview annotation

      1. Change text color, background color and text size as below.

         fun DisplayWelcomeMessage(name: String){
             Text(text = "Welcome to $name!",
                 color= Color.Blue,
                 fontSize = 50.sp,
                 modifier = Modifier.background(
                     color = Color.Gray


Jetpack Compose indeed seems to be easier and faster as it claims. We will explore it further in the upcoming articles to build some interesting UIs.