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.
If you want learn more about Jetpack Compose, check out my Diving into Jetpack Compose post.
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 "email@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:
4. Play around with the sample projects
Once the project has finished initializing, you can run the
ui-demos apps that are both based on Jetpack Compose.
RallyActivity contains the sample code that you’ll see when running the
ui-demos app. This activity is located at:
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:
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.