Visual Feedback: Dialogs, Snackbars & Toasts

Now, you’re going to display a Simple Dialog showing the three fruit options when the user taps Add fruit. This dialog allows selecting one item. In the project, open MainActivity.kt and find a click listener for the button with ID button_add.

You’ll see that the tap on Add fruit executes showAddFruitDialog(). Replace TODO in this function with the following code:

MaterialAlertDialogBuilder(this)
   .setTitle(resources.getString(R.string.dialog_add_fruit_title))
   .setItems(fruitItems) { dialog, selectedFruitItem ->
     updateFruitQuantity(selectedFruitItem, true)
     dialog.dismiss()
     showSnackbar(selectedFruitItem)
   }
   .show()

This creates an instance of MaterialAlertDialogBuilder and sets a title for the dialog from the string resources. It populates setItems() with the list of fruits stored in the fruitItems value, and within the lambda it defines the click listener for when a dialog item is tapped. Here, the quantity of the selected item is updated, then the dialog is dismissed. The last line of the click listener calls showSnackbar(selectedFruitItem). This function has not yet been implemented, but you’ll address it later in the tutorial. Finally, show() displays the newly created dialog.

Build and run. Tap Add fruit to see how the Simple Dialog looks and select a fruit item. The corresponding quantity value increases as expected and the dialog is dismissed. You can also dismiss the dialog without updating a fruit item by tapping outside of the dialog.

When building your own app, if you want to disable dismissing a dialog without selecting one of the items in a list, chain setCancelable(false) on the dialog builder.

Confirmation Dialog $[==]

The Simple Dialog works well for quickly adding a single item, but if you want to allow users to add more than one type of fruit at a time, a Confirmation Dialog is a better fit. The Confirmation Dialog can be configured to allow multiple item selection. It also requires the user to confirm their selection before performing the action.

Now, you’ll implement the Confirmation Dialog. Find showAddFruitDialog() and add the following line at the top:

val checkedItems = booleanArrayOf(false, false, false)

This line creates an array of booleans to hold the state of each fruit item. Initially, they’ll all be unselected. Then, replace the following line:

.setItems(fruitItems) { dialog, selectedFruitItem ->
     updateFruitQuantity(selectedFruitItem, true)
     dialog.dismiss()
     showSnackbar(selectedFruitItem)
   }

with these lines:

.setNeutralButton(resources.getString(R.string.dialog_cancel)) { dialog, _ ->
      dialog.cancel()
    }
.setPositiveButton(resources.getString(R.string.dialog_add_fruit_positive_button))
    { dialog, _ ->
      checkedItems.forEachIndexed { fruitItem, isChecked ->
        if (isChecked) updateFruitQuantity(fruitItem, true)
      }
      dialog.dismiss()
    }
.setMultiChoiceItems(fruitItems, checkedItems) { _, position, checked ->
      checkedItems[position] = checked
    }

You used the existing MaterialAlertDialogBuilder to create a dialog, and now, besides a title, the builder sets two buttons: a neutral button, which cancels the dialog when tapped; a positive button with a click listener that loops through the checked items, updates the fruit quantity if it was selected, and then dismisses the dialog.

setMultiChoiceItems() takes the lists of items and states to display the options inside the dialog. When implementing this in your own app, if you want to restrict item selection to one item at a time, replace this method with setSingleChoiceItems().

The click listener here updates the checkedItems array with the new checked state of the item. This keeps the list of states up to date for when the positive button is pressed.

Build and run. Again, tap Add fruit, and this time see how the Confirmation Dialog looks and behaves.