Saying Hello to Jetpack Compose

Malik Motani
Oct 5, 2019 · 4 min read
Image for post
Image for post

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. Although 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?

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

In Jetpack Compose we got to write Composable Functions to create our UI

@Composable
fun Welcome(name : String){
Text(“Welcome $name”)
}

It can be directly used with setContent within our Activity.

Setup

Since Jetpack compose is in Developer Preview, It is not available as same old gradle dependency for Stable version of Android Studio just yet, Either you got to Download Android Studio Canary build(4.0 Canary 1 while writing) from here, or you can download the source code to use it from here, and guess what? second option is what we are going to try today.

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
)
}
}
}
}
Image for post
Image for post

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store