I decided to test out Jetpack Compose by making a simple Twitter UI clone after I came across this tweet by Mariano Zorrilla:
He used Flutter (which is an amazing tool btw for building cross platform apps) — with just one day of work, 1500 lines of code. That’s beyond impressive (specially the fact that Flutter can be hosted on CodePen as well).
So with similar constraints, I wanted to try out Jetpack Compose. I followed the CodePen example (as closely as I could) and this is the result:
Complete source code:
A jetpack compose clone of Twitter UI. Contribute to ahmedrizwan/JetpackComposeTwitter development by creating an…
There are three screens in this app
Before we get to the screens — take a look at app state model, which will be used for navigation and theming. I also added some helpers for navigating to individual screens & for checking theme.
There are two models — both data classes. The Tweet model is annotated with @Model as we update this model from our composed functions to update view state. User stays the same, hence it’s not annotated.
Home screen is a Scaffold — with drawer, bottom app bar, fab and content components. The scaffoldState is for managing the navigation drawer state. Initially the drawer is closed.
The content consists of a custom top bar & list of tweets. I used VerticalScroller (with column inside) for the list instead of an AdapterList, as for some reason it wasn’t as smooth when scrolling (this will change as Jetpack Compose matures). Ideally we would opt for AdapterList instead — but for now, I’m using the scroller.
As it’s a custom top bar — I used a Surface with some elevation. Inside it’s a simple row with three image resources, all arranged in a SpaceBetween pattern.
The tweet layout is also basically composed up of Rows & Columns.
For profile screen, I used ConstraintLayout within a VerticalScroller — the reason for using this layout is how simple it is to place profile image on top banner.
Here’s an example of setting constraints inside the ConstraintSet. This is how I placed the image at the center of Banner’s bottom.
For other constraints — you can view the complete source code.
Compose screen is also built using columns and rows. Additionally it includes TextField for input.
There are three themes light, dark and darker. Compose library gives us light and dark color palettes where we set primary, accent, background colors etc. These are considered “themes”.
And here’s how I switch the theme from a dialog:
ThemeOption is a custom compose layout with a Radio Button & Text — I pass in on click event which triggers the theme switch.
While implementing the layout — there were some limitations, as Compose is in pre-release dev stage.
- Something like CoordinatorLayout is not available yet (which allows us to do custom app bar animations). Hence I wasn’t able to add that in Profile screen.
- TextField doesn’t have placeholder/hint. So I had to implement one myself.
- There’s currently no pull to refresh functionality available in lists.
Next up — check out Compose implementation of Android 10’s Calculator UI
Previously I also covered other composable layouts:
Jetpack Compose: Lists
The two ways we can implement Lists in Jetpack Compose.
Jetpack Compose: Columns and Rows
A quick overview of Column & Row layout options in Jetpack Compose.
Jetpack Compose: Container Layout
As the Jetpack Compose library is being developed — I wanted to quickly go over some the layout options we have so far…
Disclaimer: As the Jetpack Compose is in development phase — any of these APIs can change at any time. So as the source of truth, please always refer to the official documentation.
That’s it for now, thank you for reading! 🙂