Jetpack Compose: Declarative UI for Android Native

How to build Declarative UI in Android Native like as Flutter or SwiftUI

Poster

Hi friends, this time I will discuss how to start Jetpack Compose writing. Developments in the world. As a developer I have to be able to include Trends about the ins and outs of programming. In the Android application developer itself, there are many changes in the program, from layout, architecture, and many more. To improve application performance, speed up the coding process, and enhance user experience. One of them migrated to AndroidX, MVVM, and others.

In addition, many of the Hybrid Android frameworks such as React Native or currently trending are flutter. Flutter itself is currently gaining popularity among android developers because of its easy and hassle-free programming (such as Android Native). For more info about flutter you can visit the official flutter website flutter.dev

TL;DR

• Introduction
• Setup project for Jetpack Compose
• Composable Function
• Preview

Introduction

Many people find Android programming complicated and difficult. Well, on Google I/O 2019 yesterday, Google’s Jetpack Compose annoucnment. Before that I will explain a little about jetpack compose.

Android’s modern toolkit for building native UI

Jetpack Compose is a toolkit that functions to make Android UI declratively (like SwiftUI / Flutter). This toolkit makes programming android easier and faster because it doesn’t use xml for layouting and little code. Simply put, we don’t build an android layout with xml but use the toolkit from Jetpack Compose.

Note: To be able to use Jetpack Compose you must use Android Studio version 4.0 or greater. To get Android Studio software, please follow this link

Why you use this ?

Jetpack Compose simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Jetpack Compose carries the concept of Less Code, which means our coding is simpler and easier to read (Clean Code), Powerful Tools direct access to the Android platform APIs and built-in support for Material Design, Dark themes, animations, and more. And last Intuitive Kotlin APIs only describe the UI and app state to update an UI state.

Setup Project

Jika anda menggunakan Android Studio 4.0 or higher. You can select in Android Studio menu, File > New Project> Empty Compose Activity :

Create new project

You will created Jetpack Compose project. When you create a Jetpack Compose Project, you will not have xml layout folder in res>layout, because the project switched to Jetpack Compose UI toolkit.

Or

1. Add google() to the project’s build.gradle file.

2. Add some like this in app/build.gradle

3. Add dependencies in project’s gradle file

4. Finally, Add Project dependency in app/build.gradle

5. Last, In your Activity Class

In setContent {} you can put your design code inside it.

setContent {
   Text(“Hello”)
}

When you running app the layout will show like this

MainActivity.kt

Note: You must diligently checking of new feature in Jetpack Compose in Jetpack Compose APIs Reference, because usually there are changes or additions to the code every updating the library

Composable Functions

A compose function annotated with @Composable. This function will produce a piece of UI hierarchy. In this function you can put your UI code. In flutter this function is almost the same as the Widget type function.

Go through the different classes and methods related to Compose that the template has generated for you. Codelab

The Composable functions can be applied to lambda and also, it can only ever be called from within another Composable function.

Preview Function

The new Android Studio version (ver 4.0 or higher) is supported for Jetpack Compose Preview Feature. The Preview Feature will previewing the Composable Function in your Activity. You can have multiple previews in the same file and give them names.

Preview Function must be annoted with @Preview, like this

Preview Function

And then you can go to the right of the Android Studio, tap refresh icon, wait a minute and you will see like this

Preview Feature

Conclusion

So jetpack compose is new way to layouting in android native without XML code, it can boost your coding process because the jetpack compose have less code and simple. If you want use this toolkit, you must using Android Studio 4.0 or higher.

Composable function is a fundamental to built compose UI. Preview, you can view your composable function without running your project to the android device.

You can Report an Issue, because basically Jetpack Compose is not stable, you can support google team to accelerate this toolkit to be better

Follow this Link => https://issuetracker.google.com/issues/new?component=612128

Learn More

If you want to learn about Jetpack Compose, you can visit the google codelab. That is a tutorial to Jetpack Compose for basic

Jetpack Compose basics

Or you can visit the official documentation for jetpack compose in link below. I recomend this, because if you learn from another resource, usually don’t update and it usually not supported in newest library.

https://developer.android.com/reference/kotlin/androidx/ui/packages

Reference

farhanroy/Jetpack-Compose-simple-http-request

Jetpack Compose — A New and Simple Way to Create Material-UI in Android