Jetpack Compose part 3 How to add state

Reacting to state in our Android applications is essential. Jetpack Compose library jumps in with out of the box features supporting state management and reactions. When your data changes, Compose recreates or recomposes the functions that are affected by the that particular data.

Welcome to the last part of Jetpack Compose series! In this final part we will be creating a state for our Profile Card layout and enabled it to change whenever the state changes! Jetpack Compose has in built APIs that allows us to create a stateful layout with great ease, we will detail this part shortly.

Article series breakdown and progress:

What is state in Jetpack Compose?

At the very center of Compose is responding to state changes. By calling Composable functions, Compose apps translate data into UI. If that data changes, these functions are recalled with the newdata thus updating the UI.

Compose provides tools to observe changes in the data of your ap,which will recall your functions automatically. This is called recomposing.

Compose uses a custom Kotlin compiler plugin under the hood, so that the composable functions can be reinvoked to refresh the UI hierarchy when the underlying data changes.

Let’s create stateful composables!

In case you haven’t followed with the past articles, or maybe you want a clean start, check out the starting point from here.

Alright! First, we want want to add real data (we will still mock it for simplicity) by passing the information to the composable functions by removing the hardcoded data and therefore injecting it outside of the composable content.

After that we want to be able to toggle the online and the offline state of the Profile Card by pressing on it, arriving to the final result:

Let’s start with refactoring the composables to receive data from an object, instead of rendering it hardcoded. Looking at the above layout, it’s clear that we need to create a class that holds all that information about the user.

Let’s call it UserProfile and add fields that will the name, the profile picture (drawable for simplicity), last activity (in minutes) and the online status as boolean. Our data class should look like this:

We’ve also added a companion (static) method that creates a mock user profile for us. We will use this mock in order to pass it to our composables.

First, we pass it to the setContent‘s composable called MainActivityComposable which in turn will pass it to the ProfileCardComposable. MainActivity should now look like this:

As you can see above, we’ve also passed an identical mock to the UserProfileCardPreview preview composable in order to keep our preview in Android Studio up to date.

Next up, let’s update the ProfileCardComposable to accept a UserProfile and to also pass the corresponding information to its children composables.

As you can see above, ProfilePictureComposable will need a drawable id to render the corresponding picture and ProfileContentComposable that will display the user’s name and activity. Let’s set these values inside the composables:

Perfect, we’ve now set the data rendered inside the composables from an object, it’s no longer hardcoded.

But wait, I’ve still hardcoded the Active now message and I haven’t even used the lastActivityMinutes parameter. You’re totally right! This is because our composables still don’t have a state and they cannot know whether the user is online or not.

Let’s fix this by adding a state to our compose layout. Our state should tell the compose function whether the user is online or not, so we should use a MutableStateOf<Boolean> . Why mutable? Because we want the state to change whenever we will click on the profile card – we’ll handle that later.

To add internal state to a composable, we used the mutableStateOf function, which gives a composable mutable memory. We’ve also passed an initial value set to the value we’ve added in the mock UserProfile – true.

To not have a different state for every recomposition, we remember the mutable state using remember. Simply put, we want Compose to remember the state and allow it to redraw the composables affected by it.

Now that we have created a mutable state for our composables, let’s use the value in the children composables by passing it as argument, starting with ProfilePictureComposable :

As you can see, to access the boolean value of the mutable state, we use onlineStatus.value and this guarantees us that whenever the state changes, the Card composable that consumes the state here will be redrawn accordingly, with a green or red border color.

Let’s do the same thing to the ProfileContentComposable by adding the mutable state as parameter and consuming it inside the Text composable:

Now we’ve used the lastActivityMinutes field as well because we can decide whether the user is online or not when painting the details inside the compose function.

Perfect, we’re missing only one thing! The ability to toggle the online status of the compose layout. Let’s fix this by adding a click event to the ProfileCardComposable :

The clickable parameter takes an onClick callback event and is similar with the View.setOnClickListener that we are all familiar with.

! Watch out about the order of the Modifier parameters, it matters! We have added the click listener before the padding apply because we want the click listener to cover the whole card area!

When the user clicks on the card layout, we negate the boolean value of the mutable state thus notifying Compose that it has to redraw any composables that are dependent on the state – in our case those will be the ProfilePictureComposable and the ProfileContentComposable. Let’s check out the final result:

Whooray! We’ve done it.

We have created a stateful compose layout that looks great. I hope you are excited about your work because it’s all your credit!

In case you want to check out how the final code should look like, check out this gist here.


I want you focused so take a break, and see ya in the next article! And remember, if you enjoyed this article, you can buy me a coffee using the coffee bottom widget!

4+

2 thoughts on “Jetpack Compose part 3 How to add state

Comments are closed.

%d bloggers like this: