Deprecated: You can now just download Android Studio 4.0+ to build with 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.
Jetpack Compose Primer
Why do we want to even think about Android Compose. It’s in something called “pre-alpha”. What even is “pre-alpha” ???
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.
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.
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
Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you…
In the next post we take a peek at the future as we build a “@Composable” UI.
Jetpack Compose UI (part 3of3)
We now get into the details of how to build a UI using Jetpack Compose.
Comparison of Jetpack Compose and SwiftUI