DEV Community: Rishabh Gupta

Mastering State Management in Jetpack Compose: A Fun Guide

Rishabh Gupta — Sun, 24 Mar 2024 15:54:07 +0000

Welcome to the world of Jetpack Compose, where building beautiful and interactive UIs for Android apps has never been easier. But as you dive deeper into Compose, you’ll encounter the need for managing state — the data that drives your UI.

In this article, I’ll explore two powerful tools for managing state: State and StateFlow.

But fear not, I’ll keep things fun and engaging with few examples along the way!

Understanding State

State represents data that can change over time, directly influencing the UI. In Jetpack Compose, the State class is your go-to solution for managing such dynamic data within a composable function. When the value of a State changes, Compose automatically triggers recomposition, updating the UI accordingly.

Lets see the working with a small example.

*Dynamic Text Color * with State Let’s create a fun example where the color of a text changes dynamically using State.



@Composable
fun DynamicTextColor() {
    var isRed by remember { mutableStateOf(true) }

    val textColor = if (isRed) Color.Red else Color.Blue

    Button(onClick = { isRed = !isRed }) {
        Text(text = "Click to change color", color = textColor)
    }
}

WHAT ?? CONFUSED !!!!

Lets take another small example to better understanding.

Lets take an example of the AMAZON app, managing the state of the user’s shopping cart is essential.

You can use _State> _to represent the items in the cart. When the user adds or removes items from the Amazon’s cart, you update the state accordingly, triggering UI updates to display the updated list of items in the cart.




@Composable
fun ShoppingCart() {
    val cartItems = remember { mutableStateOf(emptyList<Item>()) }

    Column {
        // Display cart items
        cartItems.value.forEach { item ->
            CartItemRow(item)
        }
        // Add item button
        Button(onClick = { /* Add item to cart */ }) {
            Text("Add Item")
        }
    }
}

What is StateFlow?

**
While State is great for managing state within a composable, StateFlow is more suitable for managing state outside the UI layer. StateFlow is a type of hot observable that emits the current and subsequent state updates to its collectors.

Real-Time Weather Updates with StateFlow

Building a weather app that fetches real-time weather updates using StateFlow:



class WeatherViewModel : ViewModel() {
    private val _weather = MutableStateFlow<Weather>(Weather.Loading)
    val weather: StateFlow<Weather> = _weather

    fun fetchWeather() {
        viewModelScope.launch {
            val newWeather = apiService.fetchWeather()
            _weather.value = newWeather
        }
    }
}

Here, _weather is a MutableStateFlow that emits the current weather state. Whenever fetchWeather() is called, it updates the _weather state with the latest weather data fetched from the API, ensuring that UI components observing weather are always up-to-date.

OKAY!! One more example

Let take an example of a Amazon Music:

In the** Amazon Music app**, you can use StateFlow to represent the playback state (e.g., playing, paused, stopped) and the current playing media (e.g., song, podcast).

As the user interacts with the controls, the corresponding StateFlow is updated, and the UI reflects the current playback state and media information.



class AmazonMediaPlayerRepository {
    private val _playbackState = MutableStateFlow<PlaybackState>(PlaybackState.Stopped)
    val playbackState: StateFlow<PlaybackState> = _playbackState

    private val _currentMedia = MutableStateFlow<Media?>(null)
    val currentMedia: StateFlow<Media?> = _currentMedia

    fun playMedia(media: Media) {
        // Start playing the specified media
        // Update _playbackState and _currentMedia accordingly
    }
}

Here’s how to use the above Repository.



// Create an instance of the repository
val mediaPlayerRepository = AmazonMediaPlayerRepository()

// Start playing a media item
val media = Media(/* specify media details */)
mediaPlayerRepository.playMedia(media)

// Observe changes to the playback state
mediaPlayerRepository.playbackState.collect { state ->
    // Update UI or perform actions based on the playback state
}

// Observe changes to the currently playing media
mediaPlayerRepository.currentMedia.collect { media ->
    // Update UI or perform actions based on the currently playing media
}

I hope it is now clear!!!!

Now lets go with the main question for the article, which one to go with and when:

Choosing Between Compose State and StateFlow:

Now that we’ve seen both State and StateFlow examples, let's see when to use each:

The State can be used while managing UI-related states within a composable function. State is lightweight and perfectly suited for managing small, localized state changes that directly affect the UI.
Use StateFlow when managing state outside the UI layer, such as in ViewModels or Repositories. StateFlow provides seamless integration with coroutines and ensures that state updates are propagated efficiently across different layers of your app.

State management is a crucial aspect of building robust and reactive UIs in Jetpack Compose. Whether you’re managing UI-related state with State or handling external state with StateFlow, understanding these concepts will empower you to create delightful user experiences.

So go ahead, experiment with state management in your Compose apps, and watch your UIs come to life!

References:

Official Jetpack Compose documentation: Jetpack Compose
Understanding State in Jetpack Compose: State in Jetpack Compose
Exploring StateFlow in Kotlin: StateFlow Explained

Unraveling the Magic of Loopers and Executors in Android

Rishabh Gupta — Mon, 18 Mar 2024 19:38:18 +0000

In the bustling world of Android development, two mystical beings play a crucial role in ensuring smooth operation: Loopers and Executors.

These components form the backbone of asynchronous processing, allowing your app to juggle multiple tasks without skipping a beat.

Imagine them as diligent workers behind the scenes, orchestrating tasks seamlessly to keep your app running efficiently.

In this Chapter of Learning Android, Lets us start from the basic story.

Let meet our first character The Loopers:

In our story, the Looper is like a dedicated messenger who tirelessly shuttles between different parts of your app, ensuring that tasks are executed in the right order and at the right time.

Every Android app operates within a main thread, which is like a busy highway where all the crucial tasks, such as updating the UI or handling user interactions, take place. Now, if a time-consuming task is thrown onto this highway, it can cause a traffic jam, resulting in a sluggish user experience or even freezing the app altogether.

Yes you are correct, this is what is mean to say !!!!!!!!!!!!!

So This is where the Looper swoops in to save the day.

It creates a special loop within the main thread, called “Looper thread,” where it handles tasks efficiently, one after the other, without causing any gridlock. Imagine the Looper as a skilled traffic controller, ensuring that each task moves smoothly through the thread, preventing congestion and keeping your app responsive.

Enter the Executors:

But what happens when our trusty Looper has too many tasks on its plate? This is where Executors step into the spotlight. Think of them as resourceful assistants who help the Looper manage its workload effectively.

Executors work behind the scenes to delegate tasks to separate worker threads, allowing heavy lifting to be performed without burdening the main thread.

By offloading tasks to Executors, the Looper can focus on handling essential operations within the main thread, ensuring that your app remains snappy and responsive. It’s like having a well-oiled machine where each component plays its part seamlessly, resulting in a flawless user experience.

Example Time

Imagine you’re developing a weather app that needs to fetch live updates from the internet while simultaneously updating the UI with the latest data. Without Loopers and Executors, this could lead to a clunky user experience, with the UI freezing every time the app fetches new information.

However, by employing Loopers to manage tasks within the main thread and Executors to handle network requests and data processing in the background, your app can deliver a smooth and uninterrupted experience. It’s like having a team of dedicated workers ensuring that your app runs like a well-oiled machine, regardless of the complexity of the tasks at hand.

Loopers and Executors are indispensable allies, working tirelessly behind the scenes to ensure optimal performance and a seamless user experience. Whether it’s managing tasks within the main thread or delegating heavy lifting to background threads, these mystical beings play a vital role in the success of your app.

So, the next time you appreciate the seamless functioning of your favorite Android app, remember to acknowledge the unsung heroes behind it — the Loopers and Executors who make it all happen. Their work is essential in ensuring a smooth user experience.

Here is a small snippet!!!!!

import android.os.Handler
import android.os.Looper
import java.util.concurrent.Executors

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //Using Executors
        val executor = Executors.newSingleThreadExecutor()

        executor.execute {
            // Executed on a separate background threadfor executing tasks asynchronously.
            println("Task executed on background thread.")

            // Simulating heavy task
            Thread.sleep(2000)

            // Update UI on the main thread using a Handler
            Handler(Looper.getMainLooper()).post {
                // UI update code here
                println("Updating UI on the main thread after task completion.")
            }
        }

        Using Loopers
        val handlerThread = HandlerThread("HandlerThread")
        handlerThread.start()

        val looper = handlerThread.looper
        val handler = Handler(looper)

        handler.post {
            // Executed on the background thread associated with the Looper
            println("Task executed on background thread with Looper.")

            // Simulating some heavy task
            Thread.sleep(2000)

            // Update UI on the main thread using a Handler
            Handler(Looper.getMainLooper()).post {
                // UI update code here
                println("Updating UI on the main thread after task completion with Looper.")
            }
        }
    }
}

In the above example:

We have created a HandlerThread named "HandlerThread", which internally creates a new background thread with its own Looper.
We post a task to the handler using handler.post { ... }, similar to the executor example. The task is executed on the background thread associated with the Looper. After the task completes, Handler post an update to the UI thread.