Jetpack Compose — Getting Started

Requirements

• Android Studio 4.2 Preview or higher.

Declarative UI has become a trend in mobile application development like React Native, Flutter, and SwiftUI. In the same way, now Android has bought the Composable UI in the form of Jetpack compose.

Let’s dive in and see how we can write a Composable UI.

1. Add the below configuration in your app build.gradle

android {
kotlinOptions {
    jvmTarget = '1.8'
    useIR = true
  }
  buildFeatures {
    compose true
  }
  composeOptions {
    kotlinCompilerExtensionVersion '1.0.0-beta01'
    kotlinCompilerVersion '1.4.30'
  }
}

2. Add the below dependencies

implementation “androidx.compose.ui:ui:1.0.0-beta01”
implementation “androidx.compose.material:material:1.0.0-beta01”
implementation “androidx.ui:ui-tooling:1.0.0-beta01”

The configuration part is done. Let’s start with our coding after the gradle sync is done. Allow me to begin with the basic Hello World example.

@Preview(name = "Hello world", showBackground = true)
@Composable
fun Greetings() {
   Text(text = "Hello World!")
}

In the above example, we are using two annotations for a method to create a Composable UI. To make a method composable, you need to use the Composable annotation (@Composable), and to preview the composable UI in a design layout, you need to provide the annotation as @Preview.

We have used two parameters in the @Preview annotation, one is name, and another one is showBackground. When you want to provide some name to the view, you can use the name parameter. This name parameter will help you identify the UI when many composable methods were created in the same file.

Like our traditional layouts, the Composable UI also has a transparent background. To have a clear view, we can use showBackground with the value as true. This will create a white background for your view, but don’t worry; this background will not be reflected on your screen when you run the application on a real device or emulator.

Inside the Greetings method, we have a Text which is the same as we have TextView in the ViewGroups.

We all mostly use LinearLayout and RelativeLayout to create our layouts. Likewise in Jetpack Compose, we have Column(Vertical), Row(Horizontal), and Box.

To create a ViewGroups horizontally, you need to use the Row method in Jetpack Compose.

@Preview(name = "Row Example", showBackground = true)
@Composable
fun RowContent() {
  Row(
     modifier = Modifier.fillMaxWidth(),
     horizontalArrangement = Arrangement.SpaceBetween
) {
     Text(text = "text1")
     Text(text = "text2")
  }
}

We have used two new parameters(modifier and horizontalArrangement) for the Row method in the above example. The modifiers are used to create a style for the views. In our case, we need only the fillMaxWidth method to fill our width, which is the same as that we use in the XML as android:layout_width=”match_parent”. In order to have a space between the Views inside the Row block, we need to use horizontalArrangement value as Arrangement.SpaceBetween.

Now let’s create a view vertically.

@Preview("Column Example")
@Composable
fun ColumnContent() {
   Column(modifier =
       Modifier.fillMaxSize().background(Color.LightGray)) {
      Text(text = "Title")
      Text(text = "Content")
   }
}

The Column and Row composable method work precisely like the LinearLayout with the orientation as Vertical/Horizontal. At this point, you would have already guessed the Box composable method should work like a RelativeLayout. If you have thought that, then you are right, the Box method works similar to RelativeLayout.

@Preview("Box Example", showBackground = true)
@Composable
fun BoxContent() {
 Box(
    modifier = Modifier.fillMaxWidth(),
    alignment = Alignment.Center
) {
   Box(modifier = Modifier
                   .preferredSize(50.dp)
                   .clip(CircleShape)
                   .background(Color.Blue)
      )
      IconButton(onClick = {}) {
         Icon(Icons.Filled.Favorite)
      }
   }
}

ViewGroups will have ImageView and ImageButton, but in Jetpack Compose, we need to use Image(works like an ImageView) and IconButton (ImageButton).

Unlike ViewGroups layout, all the UI in the Composable UI renders in a flat hierarchy. Thus enclosing your Composable UI with multiple UI components will not create a large hierarchy tree.

The other advantage of using the Jetpack Compose is, you can reuse the same Composable UI for Kotlin Native, which was used to create a cross-platform app for Android, iOS, macOS, and Windows.

Github