Android Custom Progress Bar and Alert Dialogs

[fusion_builder_container hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”no” min_height=”” hover_type=”none” link=””][fusion_text]

In this article, you will learn how to notify users based on particular actions or events using Snackbar, Alert Dialog, Custom Alert Dialog, and Custom Progress Dialog using Kotlin.

 

Android Snackbar

 

Android Snackbar is a material design component introduced with API 22.2.0. The Snackbar is a view that mostly used to give quick feedback to the user, like Toast. We can say that the Snackbar is an advanced version of Android Toast. A toast is a view containing a quick short message for the user.

 

Snackbar can be dismissed by the user or an action listener or could be set up to respond to the users’ actions. Snackbar can perform an action like ‘Undo’ etc.,

 

When the Snackbar is showed, it is displayed at the bottom of the screen, with the default background color “#323232” and text color “#FFFFFF“.

 

Parameters of Snackbar

 

view: The view to find a parent from.

 

text: The text to show. Can be formatted text.

 

duration: How long to display the message. Either LENGTH_SHORT or LENGTH_LONG

 

Note: To use the Snackbar in your android application, you need to include the ‘com.google.android.material:material’ package in your build.gradle (app) dependencies.

 

build.gradle (:app)

 

 

Snackbar vs Toast – Usage, and Difference

 

Difference between Snackbar and Toast

 

Snackbar:

 

• Snackbar was added in API Level 23.
• It can be shown inside the activity of the Applications.
• It can perform an action.
• It can be dismissed by swiping.
• It can handle user input.
• Useful for showing warnings/info messages to the user that needs attention.

 

Toast:

 

• Toast added in the API Level 1.
• Activity is not required (Can be shown on Android home or even above other apps).
• It can’t perform an action based on User input.
• It can’t be dismissed by swiping.
• It can’t handle user input like Swipe, Click, etc.
• Useful for showing info messages to the user.

The form you have selected does not exist.

Usage of Snackbar and Toast

 

Snackbar:

 

Snackbar used in the areas where a simple popup message needs to display along with an option to perform an action. For example, in the Gmail application, when you delete mail, quick Snackbar displays at the bottom with the message ‘1 Deleted’ with an action button ‘Undo.’ When pressing the ‘Undo’ action button, the deleted Mail will be restored.

 

Toast:

 

Toast is used in areas where system messages need to be displayed. For example, when your app tries to download images from a server but fails due to server timeout or no resource found, you need to display the error message saying that ‘Error Occurred.’

 

Now let’s create a

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I have created a new project in android studio with empty activity and now I will show you an example of a Snackbar on image button click.

 

Let’s add the image button in our activity_main.xml.

 

 

Now I will explain how to show the Snackbar when the image button clicked. The click event is added in the onCreate method of MainActivity.kt.

 

 

Output

 

When you click the image button, you will see the Snackbar text at the bottom of the screen.

 

 

Android Alert Dialog using Kotlin

 

Android AlertDialog is a subclass of Dialog that can display one, two or three buttons. AlertDialog is a window that pops up on the screen with some information asking for a user action.

 

The main core components that build an Alert Dialog:

 

• Title Text
• Message Description Text
• Buttons – There are three types of buttons: Positive, Negative, and Neutral

 

To create an AlertDialog we use the AlertDialog.Builder inner class.

 

 

 You need to pass the context inside the constructor. Optionally, you can pass another parameter, the alert dialog style.

The form you have selected does not exist.

AlertDialog Methods which are used to build an AlertDialog

 

• setTitle
• setMessage
• setIcon
• setCustomTitle: Here, you can pass a custom view that will be put in place of the title part in the alert dialog.
• setPositiveButton: You can pass the string name, as well as button, clicked callback method here.
• setView: Used to add a custom view inside the alert dialog.
• setList: Used to set an array of strings that would display in the form of a list.
• setMultiChoiceList: You can set an array, but this time, you can select multiple items from the list thanks to the CheckBox.
• setPositiveButtonIcon: You can set an icon alongside the button.
• show(): Used to display the AlertDialog on the screen.
• setDismissListener: Inside this, you can set the logic to be triggered when the alert dialog dismissed.
• setShowListener: You can set the logic to be triggered when the alert dialog is shown.
• setCancelable: Requires a boolean value. By default, all alert dialogs are cancelable on button click or touch outside. If this method set to false, you need to cancel the dialog using dialog explicitly.cancel() method.

 

I will show you an example of a simple Alert Dialog, which will be launched on a button click.

 

Let’s add a button in your activity_main.xml with the id as btn_alert_dialog.

 

 

Now let’s create a method for alert dialog in MainActivity.kt with all the possible buttons, and based on the button click, the Toast message is displayed. You can replace the toast message with your logic.

 

 

Now you can call the method of alert dialog in a button click. So, let’s add the click event on the alert dialog button in the onCreate method of MainActivity.kt.

 

 

Output

 

Now once you click on the alert dialog button an AlertDialog will be displayed.

 

 

Android Custom Dialog using Kotlin

 

Now I will show you how to create the AlertDialog with a custom layout. Custom layout means you can create your design as you want.

 

To create a custom AlertDialog we use the Dialog class. Most of the methods are similar in the custom alert dialog.

 

 

You need to pass the context inside the constructor. Optionally, you can also pass another parameter, in the alert dialog style.

The form you have selected does not exist.

Create a custom layout file which will be used in the Alert Dialog.

 

dialog_custom.xml

 

 

Now, as your design for a custom alert dialog is ready we can create a method for showing it in the MainActivity.kt.

 

A private method for showing the custom alert dialog with respective buttons click events.

 

 

Add a button in your activity_main.xml with the id as btn_custom_dialog.

 

 

Assign a click event to the button to show the custom alert dialog in MainActivity.kt onCreate method.

 

 

Output

 

When you click on a custom dialog button you will see the custom alert dialog as below.

 

 

Android Custom Progress Dialog using Kotlin

 

A dialog showing a progress indicator and an optional text message or view. Only a text message or a view can be used at the same time.

 

ProgressDialog is a modal dialog, which prevents the user from interacting with the app. The default ProgressDialog class was deprecated in API level 26.

 

Now I will show you how to create a custom progress dialog. Generally, the progress dialog is used while doing some background execution or getting the JSON data from the server.

 

It is similar to a custom alert dialog because here I will show you to create a progress dialog with a custom layout.

 

Create a custom layout file which will be used in the Custom Progress Dialog.

 

dialog_custom_progress.xml

 

 

Create private method for showing the custom progress dialog in the MainActivity.kt.

 

 

Add a button in your activity_main.xml with the id as btn_custom_progress_dialog.

 

 

Assign a click event to the button to show the custom progress dialog in MainActivity.kt onCreate method.

 

 

Output

 

When you click on custom progress dialog button you will see the custom alert dialog shown as below.

 

The form you have selected does not exist.

Summary

 

In this article, you learned about Snackbar as well as how to create and show the AlertDialog, Custom AlertDialog, and CustomProgressBar using Kotlin.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]