Jetpack Compose – The new way of UI design in Android

In android development, while designing the UIs we were using Linear layout, Relative layout and so on. Then, we have started with Constraint Layouts to design Complex UIs without nested layouts. And now it’s time to design the UIs on the next level.

In Google IO ’19, Jetpack Compose was launched by Google to create a declarative UI. Basically, declarative UI means to create UI with a specific set of UI elements and to structure it in some way. So, you will not create or edit the XML layouts anymore. Instead of layouts, we will use Jetpack compose functions with UI as its elements.

In this blog, we will come up with some basic elements from Jetpack compose.

Implementation:

To try Jetpack compose, you should use Android Studio 4.0 canary build. While creating the new project, need to select the “Empty compose activity” from the Project template.

1. Adding Jetpack compose toolkit dependencies

implementation 'androidx.ui:ui-text:0.1.0-dev02'
implementation 'androidx.core:core-ktx:1.1.0'
implementation 'androidx.ui:ui-layout:0.1.0-dev02'
implementation 'androidx.ui:ui-material:0.1.0-dev02'
implementation 'androidx.ui:ui-tooling:0.1.0-dev02'

2. In Activity file

We can write the design in setContent. Being new to Compose, let’s start with ‘Hello world’.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
	//Write your design here
	Text(text = "Hello World!", style = TextStyle(color = Color.Black, fontSize = Sp(16f)))
     }
}

3. Composable function

Jetpack Compose is made up of composable functions. These functions will help you to design your UI programmatically by describing its shape and data dependencies.

To write the composable function we need to use @Composable annotation as shown below.

@Composable
fun writeText(inputText: String) {
    Text(text = "Hello $inputText!", style = TextStyle(color = Color.Black, fontSize = Sp(16f)))
}

Then, call this ‘writeText()’ function from ‘setContent{}’.

Composable functions can be called only from another Composable function.

4. Function preview

Instead of downloading the app in an Android device or emulator, you can easily preview your Composable function in Android Studio by adding @Preview annotation.

The main limitation is that the Composable function should not take any parameters. So, you need to create one function named ‘previewWriteText()’ with @Preview annotation which calls ‘write text()’.

@Preview
@Composable
fun previewWriteText() {
    writeText("World")
}

• 

5. Using layouts

When it comes to Android app UI designing, you are not going to use one or two elements. You need to use many different elements to get an attractive design. If we need to design the UI with more elements, then will go with Linear layout, Relative layout or Constraint layouts to get the perfect design.

To achieve the same in Jetpack compose we have to use some specific containers. For example, Column() is the one of the container.

Column {
	    //Write your design here
}

As the name of the function describes, this will align the elements in the vertical order. Here we have an example with three Text() widget with some values in vertical order.

@Composable
fun showText() {
     Column {
	   Text("Text Header")
	   Text("Text Subject one")
	   Text("Text subject two")
     }
}

As you might expect, you can use the Row() function to align the same widgets horizontally.

Conclusion:

In this blog, we have seen some basic elements from the Jetpack compose, which will help you step into this.

However the Jetpack Compose is in Developer preview now, we may expect minor changes when it comes to a stable release.

To read more about it try https://developer.android.com/jetpack/compose.

-Sasikumar K,
Android Team,
Mallow technologies.