Saying Hello to Jetpack Compose

Malik Motani
Oct 5 · 3 min read

Jetpack compose is still in labs(Pre-alpha), Let’s find out if we can compose anything with Jetpack compose or not.

If you remember the time when Kotlin was newly introduced and we were into our Java zone, in a short period of time Kotlin became the first-class language for Android app development

The same thing may apply to Jetpack Compose because it is the first time when Google is taking a major step for native android app development towards declarative UI approach. It is not the first attempt for the declarative UI approach, Facebook has already developed Litho and in Kotlin Anko, Anko layouts is already there, but when something comes from the Android Team it self, we got to try it, isn’t it?

Idea of Jetpack compose

It’s declarative UI toolkit build for Android. It is inspired by React, Litho, Vue.js and Flutter and completely written in Kotlin and it is fully compatible with existing current Android view system. It aims to make your android view hierarchy more declarative.

With Compose, UI is defined as composable functions and this function transforms data into view hierarchy.


What is compose?

  • A new set of Jetpack UI widgets: Not views or fragments they are something smaller, modular and easy to work with.
  • A kotlin compiler plugin: It makes easy to define our own composable widgets
  • Fully compatible with the existing view system
  • Experimental

Core principles

  1. Concise and Idiomatic Kotlin: Built with the benefits that Kotlin brings
  2. Declarative: Fully declarative for defining UI components, including drawing and creating custom layouts
  3. Compatible: Compatible with existing views
  4. Enable Beautiful Apps: Designed with Material Design out of the box and animations from the start
  5. Accelerate Development: Accelerate development by writing less code and using tools

UI as a function

@Composable
fun Welcome(name : String){
Text(“Welcome $name”)
}
  • Take data as input
  • Emit the view hierarchy when invoked

It can be directly used with setContent within our Activity.


Setup

Since Jetpack compose is in pre-alpha, It is not available as conventional Gradle dependency, we got to download the source code to use it, Here is the link: https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-master-dev/compose/

Step 1: First, we need to install Repo tool (if it not installed already)

mkdir bin PATH=~/bin:$PATH curl https://storage.googleapis.com/git-repo-downloads/repo > ~/bin/repo chmod a+x ~/bin/repo

Once done check repo status using following command

repo status

Step 2: Create a directory let’s say “JetpackCompose”

mkdir ~/JetpackComposecd ~/JetpackCompose

and setup git config like (if not setup)

git config — global user.name “Your name”git config — global user.email “you@example.com”

Now initialise repo

repo init -u https://android.googlesource.com/platform/manifest -b androidx-master-dev

Repo has been initialised now and if we check JetpackCompose directory there will be ”.repo” listing

Now hit below command

ls -a ~/JetpackCompose/.repo

As per Android docs : Now your repository is set to pull only what you need for building and running AndroidX libraries. Download the code (and grab a coffee while we pull down 6 GB)

Step 3: Download the source

repo sync -j8 -c

It will take a while to download, when it is successfully downloaded, we are ready to start.

cd ~/JetpackCompose/frameworks/support/ui./studiow

This will start Android studio, and it will show compose source.

Note : While using compose it required to start Android studio from this directory only.

Accept the licence and we are ready to compose our UI.


Create an Activity to setup UI in @Composable method

class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
loadUi()
}
}
@Composable
fun loadUi() {
CraneWrapper {
MaterialTheme {
Text(
text = "Hello world!",
// apply theme as per requirement
style = TextStyle(
color = Color.Blue,
fontSize = +withDensity { 50.dp.toPx().value }),
textAlign = TextAlign.Center
)
}
}
}
}

I’ll be continuing this as a series of blogs, In the upcoming blogs we will play with Composable functions and create some real world UI.

Mindful Engineering

Mindinventory Tech Blog

Malik Motani

Written by

An Android expert and Flutter enthusiast, currently serving as Sr. Android developer at @Mindinventory

Mindful Engineering

Mindinventory Tech Blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade