Jetpack Compose — What, Why, and a Sample Code

Sijan Rijal
Oct 30 · 6 min read

What is compose and Why we should use it?

Compose is a UI toolkit for android that follows a declarative pattern to build and manage UIs. When you’ve got complex layouts, handling all the widgets in the layout can be tricky sometimes, and that’s what Compose allows you to solve on top of simplifying the UI development process. While working with XML layouts, you have a hierarchy of views, and each time you want to update or initialize a view by using findViewById(), the app needs to traverse through the hierarchy, which is expensive. In complex layouts, when there’s a state change, you’ve to manually write the code to make sure that you update the related widgets when the state of the app changes. Using compose, you don’t have to worry about manually going through the code to ensure that you’re updating your views because Compose handles it for you. Besides, when there is a change in the app’s state, compose only regenerates the composables that rely on the state rather than regenerating the whole screen. This process is called Recomposition, and Composables are the functions you create to include your UI parts.

Themes and Colors

By default, compose includes Material theme and components making it easier for you to use material components and design a theme for your application with colors, typography, and shape. The first thing that we will do is define colors that we’re going to use in the app. For the app that we’re going to design, we’ll only need the yellow color, and we’re going to define it in Color.kt, which is where you’ll define all the colors you want to use in the app. Color in Compose only accepts a parameter of type RGB, ARGB, ColorSpace, and colorInt when defining colors. So, we’ll parse the hex string color to colorInt and get the yellow color.

Building the UI

Now to build the UI, we’ll define a composable function called AppUI, which will hold all the app contents. We annotate composable functions with @Composable, and only composable functions can call other composable functions. Also notice that we declare composable functions outside of the activity class. AppUI accepts lambda as a parameter, a composable content that we want in the upper half of the screen. Since the composable functions don’t return anything, the type of the parameter is @Composable () -> Unit. If you look into the first line of code in the AppUI, you can see that we are calling Y_DesenharPortugalTheme, a theme that’s automatically generated for us and implements MaterialTheme, and you can see it in Theme.kt file. Depending on the name of the app, the name of the theme will be different.

Conclusion

Compose is still in alpha, but it already proves how efficient it can be in building layouts. This was a simple example of using Compose, where I wanted to express my understanding of a few UI objects that Compose offers and how we can utilize them to build the layout. You can also find the project at Github. I also found Thinking in Compose helpful to understand the material. Thanks for reading! If you have any questions, you can reach out to me on Twitter.

The Startup

Medium's largest active publication, followed by +732K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store