Jetpack Compose Part 1 How to compose UI

Catalin Ghitaon3 Comments on Jetpack Compose Part 1 How to compose UI

Jetpack Compose, what? Oh yeah, finally a decent way to compose UI on Android! Is this the change we’ve all been waiting for?

The purpose of this article series is to familiarize you with the Jetpack Compose as well as to allow you to code a simple layout with different states.

Article series breakdown and progress:

I’m so excited, let’s get started with Part 1 !

Jetpack Compose

First of all, let’s set clear what Jetpack Compose is and what does it bring to the table. Simply put, Compose is a way to write your UI directly in code with the use of Kotlin functions. As you write functions that represent UI widgets, you can compose them, reuse them and finally create awesome layouts for your app.

Oh and I know, you’re probably like: But Compose has been around for some time now, you are late to the party. Well yes, but as you may know, the first stable release is coming in less than a month. That’s why I thought I should give it a go now that the version is more stable and maybe take you on a ride with me.

Compose UI advantages

  • Layouts and views are created directly in code
  • Live and interactive preview
  • Custom views are easier to write and reuse
  • Less coupling as XML files and references are no longer used

Jetpack Compose is a brand new UI toolkit that has entirely new internals written by Google! On Android, we’ve all been used to creating UI with the use of XML, but from now on, Compose allows us to create our layouts directly in code!

And do you want another great one? While writing your layout as code, Android Studio can preview it and allow you to see changes realtime while also interacting with it, all from the IDE! Let’s see how the live preview looks like:

How awesome is that?! You still have to build the project in order for the preview to update but no need to run the app anymore to check out your views interactions! Don’t worry about the code, we’ll talk about it later.

Wait, but why is it called Compose?

Well because every function is a widget, and functions can be contained through composition therefore removing a big problem when trying to reuse UI components in the old age: inheritance! Now, through composition of composable functions, we can reuse widgets much easier!

Getting back to another advantage of Compose, Android UI components have kind of aged – the APIs no longer suffice modern UI requirements and we still have those old and buggy widgets.

With Compose, the UI widgets were written from scratch which means they should better support our needs and also fix the deficiencies of the old Android View class.

I think that a change was really needed and one was made in the direction of composable UI components that are written in code, just like we do in React Native or Flutter. We’ve been using code to write custom views, that’s true, but from now on with Compose we will be writing the whole UI in code which means we will have less coupling between the actual views (Activities, Fragments) and the layout, no more XML!

Alright, We’ve enumerated just some of the advantages that Compose UI brings but if you want to diver deep into the considerations of actually adopting this library, you might want to check out this solid article on this matter.

Before jumping into code, let’s settle some decent requirements for this coding lab:

Let’s start coding!

Hurray! Let’s start our journey by portraying our end result:

  • Custom profile card layout that can be used in chat applications and that features 2 different UI states – online state (on the left) and offline state (on the right). Let’s see how it would look like:

The layout that we have to build seems quite simple: a murky green background that contains a profile card. The card incapsulates user information like: profile picture, name and last activity. The difference between the online and offline state is given by the profile picture border colour (green or red) as well as the last activity text placeholder.

Alright, in this first article let’s create a new Compose project and have a deeper look into Compose.

Let’s start by creating a new Project by choosing Empty Compose Activity from the Android Studio (make sure you have the latest Canary version):

Select next and then choose MyComposeApplication as the name for your app, finally navigating to the MainActivity that was just created. We can see that Android Studio already created some composables for us there (the name of the project matters, just make sure you use this one, we will elaborate later why).

As we’ve talked, Jetpack Compose lets you write your UI in code. This means that instead of using a XML file in the setContentView of an Activity or Fragment, we will be passing a composable function to a setContent method, just like the created activity below is passing the Greeting(name:String) composable:

Wait but you might argue that we are actually passing MyComposeApplication and a Surface in the setContent method, before passing the Greeting composable, what are those?

You are totally right! Remember when I told you to use that exact naming for the application? Well, in Compose it turns out that your application name is actually a default composable function that denotes the theme of your app! So if you navigate to the Theme.kt file, you will be able to see this exact composable function that allows you to have consistent theme colours and options across the app.

But what about that Surface 🤔 ? Well that’s a composable function as well! It’s actually some kind of a placeholder that allows you to set a background or other modifiers to your layout. You can see it as a simple container view that sets the background colour to MaterialTheme.colors.background which is actually Color.White if you search for it in the Theme.kt file.

Now that we have an idea of what those terms are, let’s check out the elephant in the room, the Greeting composable that was generated!

As you can see above, a composable function is marked with the @Composable annotation (just like MyComposeApplication or Surface functions are) that tells the library this is a widget that has to be drawn. In addition to this, such widgets are actually Kotlin basic extension functions, so they don’t belong to any specific class, thus enforcing reusability and decoupling.

Our Greeting composable function takes a name as a parameter and passes that name to another composable function called Text. The Text composable is actually a widget provided by Compose, just like Surface is. You can think of the Text composable as a TextView, but much cooler!

? Wait, but why are we using capital letter for the composable functions? Well because that’s the convention in the sense that composable functions can be referred to as widgets, hence the capital letter protocol.

Now if you look on the right, you will be able to see the preview of the layout that was just created: a white text box that says “Hello Android“. But how is that possible, we don’t have any XML, don’t we? Well, if you look a bit lower in our MainActivity class, there is another composable function called DefaultPreview:

This composable function has an extra annotation called @Preview that tells Android Studio that it should preview this function when you are editing the containing file. Now, we want to see exactly what we are passing to the MainActivity‘s setContent method, this way we can preview exactly what will the activity feature as a layout, and that’s why this preview composable is more like an utility for us!

The first part is done!

That was easy, wasn’t it? Well, there’s more to go, we still have to:

But for now, we have learned what Jetpack Compose is, why we should consider it but we also got our hands dirty into creating an our first Compose project and understood what annotations and functions we can use to write layouts directly in Kotlin.

I want you focused for the second part where we will actually start coding our own composables, so take a break and see ya in the next article!

And remember, if you enjoyed this article, subscribe or maybe even gift me a coffee using the coffee bottom widget! I am already an addict!

2+
%d bloggers like this: