Try Jetpack Compose yourself

How to play around with the Jetpack Compose pre-alpha yourself

Jetpack Compose is an awesome new UI framework for Android with great potential. After the announcement you probably want to play around with it, just like me. Because Compose is in pre-alpha there are no gradle dependencies available to easily get started, instead you will need to download and install it from source. This step by step guide will help you get the Compose pre-alpha up and running.

🇳🇱 👋 Hey Dutchies!
Even tussendoor... we zoeken nieuwe Q'ers!

If you want learn more about Jetpack Compose, check out my Diving into Jetpack Compose post.

The announcement of Jetpack Compose at Google I/O 2019

1. Setup the Repo tool

The Repo tool will help us work with Git in the context of Android. Install it by following the Installing Repo instructions and only step 1 & 2 under Initializing a Repo client on the Repo download page. In short, enter these commands:

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

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

2. Checking Out the Source Code

Create a working directory, tell Repo to select the AndroidX branch and check it out:

mkdir ~/my_jetpack_workingdir
cd ~/my_jetpack_workingdir
repo init -u https://android.googlesource.com/platform/manifest -b androidx-master-dev
repo sync -j8 -c

The dependencies needed to build and run AndroidX libraries are about 3GB, so this might be a good time to grab a coffee. ☕️

3. Open the UI project with the unstable Android Studio version

Now open the project with the unstable version of Android Studio you just checked out:

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

Accept the license agreement when prompted and choose “Open an existing Android Studio project”. Open the existing project in the following directory:

~/my_jetpack_workingdir/frameworks/support/ui

4. Play around with the sample projects

Once the project has finished initializing, you can run the ui-material-studies and ui-demos apps that are both based on Jetpack Compose.

The RallyActivity contains the sample code that you’ll see when running the ui-demos app. This activity is located at:

~/my_jetpack_workingdir/frameworks/support/ui/material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/

Another interesting example is SelectionControlsActivity which contains a demo of various input controls like switches, radio buttons and check boxes. The activity is located at:

~/my_jetpack_workingdir/frameworks/support/ui/material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/

Enjoy the pre-alpha

Now that you have Jetpack Compose up and running enjoy fiddling around with the source. We’re really enjoying playing around with it and we also published a more elaborate post on our experiences with JetPack Compose.

Check out our other Google I/O blog posts on https://engineering.q42.nl/tag/google-io.