Deprecated
--
Jetpack Compose Primer (1of3)
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 :-)
Why do we want to even think about Android Jetpack Compose. It’s in something called “pre-alpha”. What is “pre-alpha” anyway ???
We have seen this situation so many times before. When Apple went from Carbon to Cocoa they said they will support Carbon for a long time but dropped it really fast. When Apple went from Objective-C(rap) to Swift they said they will keep supporting and improving ObjC but we knew better. My group started building, speaking and teaching Swift when it was in early beta.
https://developer.att.com/blog/Find-out-why-Ash-is-the-person-to-teach-you-the-latest-iOS
The companies that were early adopters of Swift are now sitting pretty as Swift 5.2 is being released.
“As smoothly as the effort went, most of the benefit is yet to come. ‘Using modern tools opens the doors for everything Apple is already planning — new platforms, new devices,’ says Conte Mac Donell. ‘Everything’s going to revolve around Swift.’ As it does, Lyft won’t have to scramble to get with the program. Thanks to its early decision to go all-in with Swift, it’s ready right now.” — fastcompay
https://www.businessinsider.com/lyft-uses-apple-swift-pays-off-2016-8
“It turned out to be a really fortuitous move,” Lambert adds. — buinessinsider
And now we know all new cool work is being done in Swift to the detriment of ObjC. SwiftUI https://developer.apple.com/tutorials/swiftui/.
Comparison of Jetpack Compose and SwiftUI
The same is true when the Android team announced support for Kotlin. They said they were “doubling down on Java” but we knew better. As soon as they announced Kotlin support we started building, speaking and teaching Android Kotlin guessing that in two short years Kotlin would go from a supported language to “Kotlin First”.
The same thing is going to happen with Jetpack Compose.
Now we are ready to learn about Jetpack Compose but first we need to understand what are the core Android APIs and what is JetPack?
When the core Android OS team was asked about the best architecture to build Android Apps the team answered “Don’t know and do not care”.
Because the Android team did not give any direction or advice on how to structure an Android app. It has always been said that Android is not a complete platform. The app developer must include several popular libraries as a base just to start to build a simple production app. Google has expressed the same sentiment. The four app components of Android (Activities, Services, Broadcast receivers, and Content providers) are not the building blocks of an Android app, but a contract between the OS and Application. App developers need to rebuild the basic building blocks whenever starting a new app. This has caused many problems for developers and led to ambiguity about which libraries/architectures to use when building a robust app, and ultimately produced several conflicting views as how to build an Android app :-( i.e. #performance matters vs #enums matter :-). It was clear the Android community needed some guidance, as the breadth, depth, and quality of these libraries varied greatly.
I had an entire talk detailing how to use community open source libraries and tools to build an Android app before the Android Architecture components were released.
https://academy.realm.io/posts/droidcon-boston-siamak-ashrafi-real-world-android-native-development/
Because Android is not a “complete” mobile platform and the community is stepping in to fill the gaps we now have multiple groups building different architectures for the core Android APIs.
- http://square.github.io/#android
- https://opensource.facebook.com/#android
- https://github.com/airbnb?utf8=%E2%9C%93&q=Android
- https://github.com/linkedin?utf8=%E2%9C%93&q=Android
- https://netflix.github.io/
The list is way too long to print here …
This causes a problem for the individual developers who have no idea which is the correct/right/best architectural library to use ???
One of the groups building an architect for Android is Google! These libraries are called Jetpack. They are decoupled from the Android core OS APIs. They have their own release dates and objectives (to make Android development simpler & better). The core Android OS team does not give much input or care how Jetpack evolves.
https://developer.android.com/jetpack
Jetpack addresses many of the main pain points of Android development by providing solutions for configuration changes, task management, testing, and UI design. The Foundation components provide core system capabilities, Kotlin extensions, and support for multidex and automated testing. Architecture components have classes that help manage your UI component lifecycle, handle data persistence and more. The components (Room, Lifecycle-aware components, ViewModels, and LiveData) work individually to address developer pain points (Persist Data, Manage Lifecycles, Modular & remove errors); they also work together to implement a sane app architecture. Behavior components help you design robust, testable, and maintainable apps. UI components make it easy for you to make your app not only easy but delightful to use.
I personally love Jetpack and use all the components they provide for Android development.
“Jetpack is a suite of libraries, tools, and guidance to help developers write high-quality apps easier. Jetpack comprises the androidx.* package libraries, unbundled from the platform APIs.This means that it offers backward compatibility and is updated more frequently than the Android platform” — Google
To use Jetpack we need to add the libraries to our Gradle build. All Jetpack components are available on the Google Maven repository under the AndroidX namespace.
https://developer.android.com/jetpack/docs/getting-started
Now that we understand what is Jetpack … what is Jetpack Compose?
Jetpack Compose is a new way of building the UI on Android.
If we want to learn more about how to think about Jetpack Compose we can check out this link http://intelligiblebabble.com/content-on-declarative-ui/
One of the best talks on why we should move to a declarative UI was at WWDC 2109. https://developer.apple.com/videos/play/wwdc2019/204/
iOS SwiftUI, Android Jetpack Compose and Flutter are all declarative UI. We are moving from event driven UI to data driven UI.
In the next post we will go into depth on how to build a UI with Jetpack Compose but first we need to setup our development environment so we can start playing with it.
We might think “I have the latest beta version of Android Studio using AndroidX name space so let me just add a @Composable and build the UI.
But that will not work.
Because Jetpack Compose is really new it is not yet in the Maven repository and we can only start using it by getting the source and adding it into our build.
We can see the code here:
https://android.googlesource.com/platform/frameworks/support/+/androidx-master-dev/compose/
Jetpack Compose readme has lots of great information: https://android.googlesource.com/platform/frameworks/support/+/androidx-master-dev/compose/README.md
OK, so how does one get it?
We are basically going to follow these steps:
https://android.googlesource.com/platform/frameworks/support/+/androidx-master-dev/README.md
I am positive these steps work on a Mac but not sure on it work on a PC. This is also true for all my native iOS tutorials :-)
“This section describes how to set up your local work environment to build the Android source files. You must use Linux or macOS; building under Windows is not currently supported.” — Android Docs
First we need to install Repo https://source.android.com/setup/build/downloading
mkdir bin
PATH=~/bin:$PATH
curl https://storage.googleapis.com/git-repo-downloads/repo > ~/bin/repo
chmod a+x ~/bin/repo
Now we should be able to call the repo command
repo statusLets make a directory to hold the Jetpack code
mkdir ~/AndroidCompose
cd ~/AndroidComposeWe now have repo and we need to set our Git ID.
git config — global user.name “Your Real Name”
git config — global user.email “you@example.com”If we already use Git then it is already set. We can see our ID by issuing this command:
git config — listAnd we will see the user and email in the output
user.name=developerCompany
user.email=developer@<company>.comInitialize the repo:
repo init -u https://android.googlesource.com/platform/manifest -b androidx-master-devOk the repo is now initialized and if we look in the ~/AndroidCompose directory we will see a “.repo” listing
ls -a ~/AndroidCompose/.repo- manifest.xml
- manifests
- manifests.git
- repo
OK, let’s get the source!
“Now your repository is set to pull only what you need for building and running AndroidX libraries. Download the code (and grab a coffee while we pull down 6GB)” — Android Docs
ProTip: Downloading Android Source you will need crazy bandwidth. And Google offices have the fastest WiFi. My suggestion is look at Meetup.com and find a meeting at a Google office no matter the event (HTML5, Chrome, etc …) and just put cut and paste this in the “reason for attending” → I am attending so I can suck your bandwidth to download Android source with Jetpack Compose. If you have a problem with this do not bother me and please contact @biocodes as it was his idea … not mine! No, Thank you!
Command to get all the needed source.
repo sync -j8 -c(it’s similar to git fetch)
Now we have downloaded the correct version of Android JetPack source which contains @Composable.
This places all the Jetpack Compose source in the ui directory
cd ~/AndroidCompose/frameworks/support/uiWe will start Android Studio to build and run the Android Jetpack Compose Demo App.
We must be in the UI directory and issue the command
./studiowBe careful when restarting Android Studio. We need to always start from this directory to get the Jetpack Compose libraries.
→ Accept the license agreement when prompted. Now we are ready edit, run, and test!
There is lots of good info inside the REAME.md file.
more ~/AndroidCompose/frameworks/support/ui/README.mdIt describes the source tree and some cool demos to run.
- Run the `ui-demos` app to see examples of individual components.
- A sample implementation of the [Material Rally app] (https://material.io/design/material-studies/rally.html) is under `material/integration-tests/material-studies`.
We can now play with these demos before building our own app. In the video below I show how the source tree is structured. We start with the ui-demos.
This has a menu to call all the other demos. I point out this relationship in the video …
In the next post we will show how to build our own custom Jetpack Compose UI by just adding two files to the demo directory.
Layout and add component
Now that we have the ability to build our UI with Jetpack Compose what do we do?
Nothing :-)
We keep building our UIs in XML using Material Components with ConstrainLayout and MotionLayout. We are only doing Jetpack Compose so that when the toolchain is ready we will be ready :-)
