Jetpack Compose Tutorial | Jetpack Compose Basics

Last updated Dec 08, 2020

Jetpack Compose basics

Jetpack Compose is a new UI ToolKit, which makes the responsive programming model with Kotlin programming language. It simplifies the UI development without an XML role.
Jetpack compose is declarative, which means that the UI described by managing a series of functions which will manage the data into UI.
This Compose Framework will update the View hierarchy while calling these functions.

The current version of Jetpack Compose is 1.0.0-alpha08 and the official has repeatedly emphasized that it is very likely to change and cannot be used in a production environment. But it's good to understand Compose briefly

Let's start to Create UI with Jetpack Compose Library

To start a new compose project, open an Android Studio, and choose a new Android studio project.

To Render Jetpack Compose UI we need to use the Latest Android studio Canary Build

When creating a new project, select "Empty Compose Activity " from the available templates. Note that the
minimum SDK version is at least 21 and above, and "Language" must be kotlin

Jetpack Compose Activity

Check Compose Dependencies in gradle file

ext {
compose_version = '1.0.0-alpha08'
}

implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling:$compose_version"

Make sure using the Latest compose version

To work with Compose we need to add the below code in gradle file

compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
useIR = true
}
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion compose_version
kotlinCompilerVersion '1.4.20'
}

Compose UI creation

After project creation, we will see the default code below

setContent {
ComposeBasicTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
Greeting("Android")
}
}
}

In the default code, we find different functions like

setContent
ComposeBasicTheme
Surface

setContent: We know normal Android activity will contain setContentView() method to apply XML layout, in Jetpack compose activity we will not use XML layout, this setContent() will use to define the layout, but instead of using an XML file, it calls a Composablefunction in it

ComposeBasicTheme: It Will provide the theme for the layout.

How to create a composable function?
To create a composable function we just need to write @Composable annotation on the function

The composable function can also be called other composable functions

@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}

These composable functions are just kotlin programming functions marked with @Composable annotations

When we see the activity we will find other code like

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeBasicTheme {
Greeting("Android")
}
}

This @Preview will show our UI layout in the preview model window

Jetpack Compose Preview

Let say if we want to add a background color for a certain component we must use the Surface function.
For example if we want to change the text color

@Composable
fun Greeting(name: String) {
Surface( color = Color.GRAY){
Text(text = "Hello $name!")
}

}

Note: @Composable annotation is only necessary for functions that create UI. It can call regular functions and other Composables functions. If a function does not meet these requirements, the @Composable annotation should not be used

Modifiers
We were created a simple Ui to display simple Messages, how to change the properties of this text.
To hand the properties of these UI elements, compose has a class called Modifies.

Modifiers are the list of attributes that apply modifications to UI components. Few modifiers are: Spacing, AspectRatioand modify Flexible Layoutsthe layout Rowand Column.

In the next post, we will learn advanced concepts of Jetpack Compose and its UI components.
How to create complex UI with Jetpack Compose tool

Conclusion: This Jetpack Compose Introduction will give you the confidence to start with the Composable function to create Simple UI.

Tags: Jetpack Compose, Composable functions, Android Canary version.

Article Contributed By :

1144 Views

Projects By category