Jetpack Compose Quick Setup (part 2of3)

Super fast way to start coding Jetpack Compose

Read this only for a historical reference. Otherwise you are just waisting your time :-)

In the first part of this series we setup everything we need to play with Jetpack Compose and even loaded the demos in the emulator.

Now we are going to very quickly add a just two files to the demo directory so we can “kick around” the “@Composable” UI.

As we showed in the last post we must start Android Studio in the UI directory.

You can only start Android Studio from inside the ui directory.

~/AndroidCompose/frameworks/support/ui/studiow WILL NOT WORK

You must be in the ui directory before issuing the command. So first do the “cd” to change directories to ui, then issue the command.

cd ~/AndroidCompose/frameworks/support/ui./studiow
Do you accept the license agreement at /<HOME_DIR>/AndroidCompose/frameworks/support/ui/studio/android-studio-ide-183.5543569-mac/Android Studio.app/Contents/Resources/LICENSE.txt [Y/n]? Y

This will start Android Studio and load every project in the UI directory. If you do not see all the demo projects in the UI directory … you need to load the UI demo directory into Android Studio.

~/AndroidCompose/frameworks/support/ui/demos

Just so we do not have to mess with the Gradle build system we will reuse the existing template structure. We will make two quick changes (add two files) to the current material demo directory and we will be off and running …

First download file “MyComposeActivity.kt” https://gitlab.com/snippets/1860518 add this file to your project at …

cp MyComposeActivity.kt ~/AndroidCompose/frameworks/support/ui/material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/MyComposeActivity.kt

One last step …

Replace the project AndroidManifest.xml file with this AndroidManifest.xml file https://gitlab.com/snippets/1860532

cp AndroidManifest.xml ~/AndroidCompose/frameworks/support/ui/material/integration-tests/material-demos/src/main/AndroidManifest.xml

Now, run the demo just as before.

On the first screen click the forth menu item “Material” and we will see the menu on the left.

We can now click the “MyCompose” menu button and see the hello world canvas with the “Hello World” message.

This allowed us to very quickly have a working environment to start playing with JetPack Compose.

In a future post we will start a completely new project … a far more complex situation.

At this point everyone should be able to play with the “Hello world!” text in the “MyComposeActivity.kt” and see the results in the emulator. If you can not please leave a comment so I can clarify the instructions.

This is super important because in the next post we we will build a full Jetpack Compose UI using the “MyComposeActivity.kt” file.

Just as a prelude … we need to start thinking in a “@Composable” mindset.

As someone who has coded with Flutter these concepts are very familiar.

In the next post we take a peek at the future as we build a “@Composable” UI.

Comparison of Jetpack Compose and SwiftUI

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