Observe runs multiple times on button click for the second time

Issue

I have this code in an activity SignInActivity:

signInButton.setOnClickListener{
            val query: HashMap<String, String> = HashMap()
            query["email"] = signInEmail.text.toString()
            query["password"] = signInPassword.text.toString()
            signInViewModel.getAuthToken(query)
            signInViewModel.signInResponse.observe(this, {
                response->  when(response){
                is NetworkResult.Success ->{
                    response.data?.let { Toast.makeText(this, it.access, Toast.LENGTH_SHORT).show()}
                }

                is NetworkResult.Error ->{
                    Toast.makeText(this, response.message.toString(), Toast.LENGTH_SHORT).show()
                }

                is NetworkResult.Loading -> {

                }
                }
            })
            
        }

Let's suppose in the first try I wrote my password wrong and it only runs once, but then after that if I click it again it runs multiple time by creating multiple toasts in this example.

Solution

Like @gpunto says, you're adding a new Observer every click, so they're stacking up and each one fires when the LiveData updates.

But really, the observer doesn't have anything to do with the actual click anyway, it just receives updates to signInResponse and displays a thing. The click just calls getAuthToken with the current query. If doing that happens to cause a signInResponse update, then you have everything wired up to react to that event. But the Activity doesn't need to know how all that stuff works, or be written so one thing follows another.

That's a reactive pattern, where your UI is really just sending events (like getAuthToken when there's a click) and then reacting to other events so it can display them. By separating these things, you get a simple system that Just Works, and can react to updates no matter what caused them (e.g. a click, or restoring state) without having to write code to handle each case.

---

That said, this is a slightly tricky case because you have an event you want to consume. If you just set up that observer on signInResponse, it will fire every time you get a value for that LiveData. And that includes when the Activity is recreated (e.g. on rotation), observes the LiveData, and gets the current (last-set) value. Basically, if you show a Toast, the same Toast will appear every time the Activity is recreated. That would be fine for setting the current value on a TextView, but it's bad for a popup that should only appear once.

This is the current official recommendation for handling this situation. They're creating a UI state, which basically holds everything that needs to be displayed, including any popup messages (which acts like a queue, which is useful!). When the UI displays a message, it basically tells the ViewModel it's done so, and that handles removing the message from the state.

You could just implement this your own way, even if it's something simple like a clearResponse() function in your VM that clears the current value when you've seen it. It really depends on your app and what state you need to maintain. Here's some other examples from the Android devs - but like it says at the top, this advice is deprecated following the recommendations I linked earlier

Answered By - cactustictacs