Saying Hello to Jetpack Compose

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?

• 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

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

@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 Developer Preview, It is not available as the same old gradle dependency for the 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? the second option is what we are going to try today.

Step 1: First, we need to install the Repo tool (if it has not been 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 the following command

repo status

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

mkdir ~/JetpackCompose
cd ~/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 the 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 with Android studio, and it will show compose source.

Note: While using compose it is 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
                )
            }
        }
    }
}

Look into the next blog ‘How to create realistic UI with Jetpack Compose’ for more details with real-time examples.
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.