If you’ve ever worked on the ReactNative, you’ll love its React UI framework. The small reusable components you use to build your user interface are excellent and provide flexibility and fast development speed.
Going back to Android, we need to worry about keeping the View hierarchy as flat as possible. So it is difficult to use a component-based approach like ReactNative. The result is confusing and difficult to maintain code.
Solve problems with Jetpack Compose
Compose is quite similar to existing UI frameworks like React, Litho or Flutter.
The current Android UI framework has been around since 2008 and over time, it has become a lot more complex. Jetpack Compose was born to start a new concept in designing interface based on components. This framework is written with the following main goals:
- Separated from platform releases : This allows for faster bug fixes and product releases because it is independent of new Android releases.
- Fewer interface components : It is not required to use View or Fragment when creating your user interface. Everything is a component and can be freely combined.
- Clarify state ownership and event handling : One of the most important and complex things to have in large applications is the handling of data flow and status in your user interface. . Compose tells us what is responsible for the state and how to handle events, similar to how React handles this.
- Write less code : Writing UI in Android often requires a LOT of code, especially when creating more complex layouts (for example with RecyclerView). Compose significantly simplifies the way you build your user interface.
This makes it easy to create isolated and reusable components, making it easier to create a new screen with existing components. Help you spend more time focusing on creating a great user experience instead of trying to keep the View hierarchy flat.
A simple Compose application: Hello World
Let’s take a look at the code for a simple Hello World application with Jetpack Compose.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">class</span> <span class="token class-name">ComposeActivity</span> <span class="token operator">:</span> <span class="token function">Activity</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> override fun <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token operator">:</span> Bundle <span class="token operator">?</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token punctuation">)</span> setContent <span class="token punctuation">{</span> CraneWrapper <span class="token punctuation">{</span> <span class="token function">MyApp</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Composable</span> fun <span class="token function">MyApp</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> MaterialTheme <span class="token punctuation">{</span> <span class="token function">Text</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Hello world!"</span> <span class="token punctuation">,</span> style <span class="token operator">=</span> <span class="token operator">+</span> themeTextStyle <span class="token punctuation">{</span> h3 <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
In the onCreate method, we set the content of the Compose application by calling setContent. This is a method to initialize the widget tree and wrap it in FrameLayout.
To make everything work, we need to wrap our application in CraneWrapper and MaterialTheme. CraneWrapper is responsible for setting providers for Context, FocusManager and TextInputService. MaterialTheme provides colors, styles and fonts for your widgets. We can then add a Text component to display our text on the screen.
Introduce some states
Managing data flow and status can be a challenging task. To illustrate how easy this is with Compose, create a simple counter application.
Jetpack Compose applies ideas from other modern UI frameworks like Flutter and React to handle state.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token annotation punctuation">@Composable</span> fun <span class="token function">MyApp</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> MaterialTheme <span class="token punctuation">{</span> <span class="token function">Counter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Composable</span> fun <span class="token function">Counter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> val amount <span class="token operator">=</span> <span class="token operator">+</span> state <span class="token punctuation">{</span> <span class="token number">0</span> <span class="token punctuation">}</span> Column <span class="token punctuation">{</span> <span class="token function">Text</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Counter demo"</span> <span class="token punctuation">)</span> <span class="token function">Button</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Add"</span> <span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> amount <span class="token punctuation">.</span> value <span class="token operator">++</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token function">Button</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Subtract"</span> <span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> amount <span class="token punctuation">.</span> value <span class="token operator">--</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token function">Text</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Clicks: ${amount.value}"</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
In the demo above, we have the “Add” and “Subtract” buttons along with a label showing the current number of clicks. As you can see below, by updating the state to “amount”, widgets update themselves (recompose) on their interface when the state changes.
Custom State Models
Instead of using +state {} to create a model for a value, we can also create custom models using the @Model annotation. We can further improve our counter application by breaking it up into smaller widgets and creating a model for different widgets so they can update and display the status from that model themselves.
1 2 3 4 5 6 7 8 9 10 | <span class="token annotation punctuation">@Model</span> <span class="token keyword">class</span> <span class="token class-name">CounterModel</span> <span class="token punctuation">{</span> var counter <span class="token operator">:</span> Int <span class="token operator">=</span> <span class="token number">0</span> var header <span class="token operator">=</span> <span class="token string">"Counter demo"</span> fun <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> counter <span class="token operator">++</span> <span class="token punctuation">}</span> fun <span class="token function">subtract</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> counter <span class="token operator">--</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
By using the @Model annotation, the Compose Compiler plugin makes all variables in your model observable so they can be used to recompile your widgets. Try updating the widget using this CounterModel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="token annotation punctuation">@Composable</span> fun <span class="token function">Counter</span> <span class="token punctuation">(</span> counterModel <span class="token operator">:</span> CounterModel <span class="token punctuation">)</span> <span class="token punctuation">{</span> Column <span class="token punctuation">{</span> <span class="token function">CounterHeader</span> <span class="token punctuation">(</span> counterModel <span class="token punctuation">)</span> <span class="token function">AddSubtractButtons</span> <span class="token punctuation">(</span> counterModel <span class="token punctuation">)</span> <span class="token function">CounterLabel</span> <span class="token punctuation">(</span> counterModel <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Composable</span> fun <span class="token function">CounterHeader</span> <span class="token punctuation">(</span> counterModel <span class="token operator">:</span> CounterModel <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Text</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> counterModel <span class="token punctuation">.</span> header <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Composable</span> fun <span class="token function">AddSubtractButtons</span> <span class="token punctuation">(</span> counterModel <span class="token operator">:</span> CounterModel <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Button</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Add"</span> <span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> counterModel <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token function">Button</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Subtract"</span> <span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> counterModel <span class="token punctuation">.</span> <span class="token function">subtract</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Composable</span> fun <span class="token function">CounterLabel</span> <span class="token punctuation">(</span> counterModel <span class="token operator">:</span> CounterModel <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Text</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Clicks: ${counterModel.counter}"</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
The only widget that the counter application can now be divided into many smaller widgets. CounterModel is passed around for different widgets, to display the model’s status or to change the model’s state by calling the add () or subtract () functions.
No need to use View anymore
Jetpack Compose widgets no longer use View or Fragment, they are just methods for drawing on canvas. The Compose Compiler plugin handles all methods with @Composable annotations and automatically updates the UI hierarchy.
For example, the Divider widget includes the Padding widget, while Padding contains the DrawFillRect widget. Looking at the source code of DrawFillRect, we can see that it draws a straight line on the canvas. All other widgets are implemented in the same way.
1 2 3 4 5 6 7 8 9 | <span class="token annotation punctuation">@Composable</span> <span class="token keyword">private</span> fun <span class="token function">DrawFillRect</span> <span class="token punctuation">(</span> brush <span class="token operator">:</span> Brush <span class="token punctuation">)</span> <span class="token punctuation">{</span> Draw <span class="token punctuation">{</span> canvas <span class="token punctuation">,</span> parentSize <span class="token operator">-</span> <span class="token operator">></span> val paint <span class="token operator">=</span> <span class="token function">Paint</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> brush <span class="token punctuation">.</span> <span class="token function">applyBrush</span> <span class="token punctuation">(</span> paint <span class="token punctuation">)</span> canvas <span class="token punctuation">.</span> <span class="token function">drawRect</span> <span class="token punctuation">(</span> parentSize <span class="token punctuation">.</span> <span class="token function">toRect</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> paint <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Looking at the Layout Inspector while running one of Google’s sample apps makes it clear that there is no View or ViewGroups component in the Android application that uses Compose. FrameLayout contains the CraneWrapper we created in the code, from which the UI Compose hierarchy is drawn on the screen.
Not using View also means Jetpack Compose cannot take advantage of existing View like android.widget.Button and must build all widgets from scratch. For example, Flutter takes a similar approach and shows that this is a fairly time-consuming job. This is one of the reasons why Jetpack Compose will take a while longer before being ready for use in product development.
Everything is a widget
Very similar to Flutter, everything is a widget in Compose. More complex widgets have been broken down into very specific widgets with clear responsibility. Therefore, even padding, space, margin, etc. is a widget. For example, if you want to add padding around your button, you can simply wrap it in the padding widget:
1 2 3 4 | <span class="token function">Padding</span> <span class="token punctuation">(</span> padding <span class="token operator">=</span> <span class="token number">16.d</span> p <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Button</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"Say hello"</span> <span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Use the code with the UI
You can easily use Kotlin with UI widgets. For example, if you want to display some conditional or repetitive UIs, you can easily display the list of names like below.
1 2 3 4 5 6 | Column <span class="token punctuation">{</span> <span class="token function">listOf</span> <span class="token punctuation">(</span> <span class="token string">"John"</span> <span class="token punctuation">,</span> <span class="token string">"Julia"</span> <span class="token punctuation">,</span> <span class="token string">"Alice"</span> <span class="token punctuation">,</span> <span class="token string">"Mark"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> forEach <span class="token punctuation">{</span> <span class="token function">Text</span> <span class="token punctuation">(</span> text <span class="token operator">=</span> it <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
This is a really powerful feature, but you should be careful not to put too much logic in your UI.
Compatible with your existing Android application
Compose is designed in such a way that you can add it to your existing application and gradually move some parts of your user interface to this new framework. The examples above add Jetpack Compose UI to an Activity. It is also possible to embed Compose widgets into existing XML layouts using the GenerateView annotation:
1 2 3 4 5 6 7 | <span class="token annotation punctuation">@Composable</span> <span class="token annotation punctuation">@GenerateView</span> fun <span class="token function">Greeting</span> <span class="token punctuation">(</span> name <span class="token operator">:</span> String <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span> <span class="token comment">// In some existing layout.xml</span> <span class="token operator"><</span> GreetingView app <span class="token operator">:</span> name <span class="token operator">=</span> ”John” <span class="token operator">/</span> <span class="token operator">></span> |
Conclude
Compose addresses a growing problem in Android application development. It helps develop agility, saves time to focus on building a great user experience, and with the clear responsibility of each widget helps us avoid errors as much as possible.
Compose will have a long way to go before it is put into widespread use. However, I think this is the right time for us to know about Jetpack Compose. The developers of this framework are actively seeking feedback and at this stage can still make changes to improve the framework more.