Deprecated

Jetpack Compose Quick Setup (part 2of3)

Super fast way to start coding Jetpack Compose

Deprecated: You can now just download Android Studio 4.0+ to build with Compose

Jetpack Compose | Android Developers

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.

Jetpack Compose Primer

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.

Introduction to widgets

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

Jetpack Compose UI (part 3of3)

Comparison of Jetpack Compose and SwiftUI

SwiftUI & Jetpack Compose