Jetpack Compose – Android’s Toolkit to Develop Native UI

Shivani Dubey August 25, 2020
Jetpack compose android UI toolkit

Google is leaving no stone unturned in improving its services and products from launching Android 10 to deprecating Android’s AsyncTask.

It intent became all the more evident when Google, in the Android Dev Summit 2019, announced that the company is going to add Jetpack Compose in the Android Studio 4.0.

Before heading on to how Jetpack Compose works, let us discuss what it is.

What is Jetpack Compose?

It is a declarative reactive UI system for Android. It eliminates the need for XML layouts and is an amazing tool for Android app developers who are new to Android projects.

Android developers can call Jetpack Compose functions in order to represent elements, and the rest will be done by the compiler. Meaning, you can actually use many functions (known as composable functions) to programmatically describe the UI.

In order to do so, you interpret functions with the Composable tab, which commands the compiler to make the boilerplate code. This saves time along with keeping the code understandable and simple.

Although you cannot add functions within the flow of the code, you can definitely make a Compose Activity template, where you can add more elements.

Hello World with Jetpack Compose

To get your hands on Jetpack Compose for Android, you can go to the Android Develops website. However, you need to keep it in mind that it is a preview software as of now, so there may be little tweaks in it in the future version.

You can either start with a new project or add Compose to the existing one.

Jetpack-toolkit-project-template

What is amazing in the Compose is that it enables developers to preview live changes. In order to do so, you need to add a second tag preview for any action or functions. This way you can see what you have built so far.

Now, if you choose to start with a new project, you will see a sample code appear on the screen looking like this – 

Jetpack sample code

Here, the ‘setContent’ block sets up the design of the activity and you have a simple block of text.

This example expands further and encloses how to use a composable function with the Composable annotation. It looks something like this-

Sample-code-for-composable-function

At this point, you are allowed to call this function to change the name on the label. But mind that you can only do so from within the scope of other composable functions.

template-sample

We cannot necessarily call it a UI, for it is more a piece of text so far. To take this process further, we will add some functions.

One of the many functions is the Column(). This separates the different elements in a column layout. To create a more elaborative layout of text and buttons, you can employ rows.

This is the code for adding a button-

code-for-adding-button

What is noteworthy is that the tag ‘ContainedButtonStyle()’ will deliver you the Material Design in the initial stage.

You can add graphics with the help of the ‘DrawImage()’ tag. Moreover, a HeightSpacer is going to assist you in separating elements with gaps and other tools will help you in padding and aligning numerous elements.

This was just a sneak-peek into Jetpack Compose. If you need in-depth information on the same then you can check out Google’s documentation.

Though Jetpack Compose is an amazing tool for creating UI Designs, there are still some areas that need improvement i.e., it is only Kotlin-based as of now which might be an impediment for other developers who are not that fluent with the language.

THE AUTHOR
Shivani Dubey
Content Writer
Prev PostNext Post
Read more blogs
blockchain platform to fight against coronavirus

Is Blockchain the Answer to Fighting Coronavirus Outbreak?

The victim-count of Coronavirus has increased to 28,276 while taking 565 lives already.  With the virus epidemic being on the verge of becoming pandemic, there is a cloud of concern hovering over not just the affected nations but also the rest of the entire world.  The grim picture of Coronavirus is not just of the…

Tripti Rai
Modern Android App Architecture with Dropbox Store

Modern Android App Architecture with Dropbox Store and JetPack

A few days ago, Dropbox acquired an open-source Store library. The aim behind taking the ownership was to modify it to make it more suitable to the prevailing Android developer ecosystem.  Now, Store also includes Google JetPack collection of libraries which poses as a solution for creating current-day Android apps. Google JetPack makes it possible…

Shivani Dubey
Google Acquires AppSheet, a No-Code Mobile App Development Platform

Google Acquires Appsheet, a No-code Mobile App Development Platform

Google recently announced that they have acquired AppSheet, a Seattle based no-code mobile app development platform. The terms of the acquisition have not been disclosed yet, but it has been revealed that AppSheet will continue to serve its existing customers.  AppSheet was founded back in 2014 by Praveen Seshadri and Brian Sabino to help businesspeople…

Bhupinder Kour
Mobile App Consulting Company on Clutch Most trusted Mobile App Consulting Company on Clutch
appinventiv India
HQ INDIA

B-25, Sector 58,
Noida- 201301,
Delhi - NCR, India

appinventiv USA
USA

79, Madison Ave
Manhattan, NY 10001,
USA

appinventiv Australia
Australia

Appinventiv Australia,
East Brisbane
QLD 4169, Australia

appinventiv London UK
UK

3rd Floor, 86-90
Paul Street EC2A 4NE
London, UK

appinventiv UAE
UAE

Tiger Al Yarmook Building,
13th floor B-block
Al Nahda St - Sharjah

appinventiv Canada
CANADA

Suite 3810, Bankers Hall West,
888 - 3rd Street Sw
Calgary Alberta