ANDROID: Overlay ProgressView
Upgrade yourself from ProgressDialog to Overlay ProgressView
The inspiration behind this post is a friend, Mcleroy Ibeh, who inspired me to try it out and that is why I’m sharing this knowledge with you. But please, if you feel you need more information regarding this do reach out to him on LinkedIn.
Who should read?
This post is for all Android developers out there. If you are a great at what you do and still making use of ProgressDialog for your applications, this is certainly for you.
What to expect?
In this post, we’ll be migrating from ProgressDialog to Overlay ProgressView. We will be creating a project a sample project containing two EditText widgets and a Button widget. The Overlay ProgressView becomes visible when the Button widget is clicked.
Goodbye ProgressDialog
From the Android Official Documentation
This class was deprecated in API level 26.
ProgressDialogis a modal dialog, which prevents the user from interacting with the app. Instead of using this class, you should use a progress indicator likeProgressBar, which can be embedded in your app's UI. Alternatively, you can use a notification to inform the user of the task's progress.
In other words, ProgressDialog is not yet obsolete because it still performs its usual task of indicating a pending notification of the user’s progress. Although, it is deprecated because a better alternative has been developed and soon might be phased out of Android operating system.
Welcome ProgressBar
From the Android Official Documentation
Progress bar supports two modes to represent progress: determinate, and indeterminate. For a visual overview of the difference between determinate and indeterminate progress modes, see Progress & activity. Display progress bars to a user in a non-interruptive way. Show the progress bar in your app’s user interface or in a notification instead of within a dialog.
ProgressBar is the latest trend in Android which is used to indicate a pending action. There are various resources online with different implementations of this as well as various third-party libraries that stylishly implements the ProgressBar. This article will focus one of the libraries by Antoine Merle, smooth-progress-bar, that improves Android’s default implementation of the ProgressBar. We will now create a transparent view for the ProgressBar that overlays with the layout.
Step 1: Add the library dependency to your app build.gradle
Step 2: Create the progress_view.xml file
TL;DR
The ProgressBar is the child of the FrameLayout viewgroup. FrameLayout was used here because it was primarily designed to display a single item, and in this example, there is just one view contained in the FrameLayout. Clickable and Focusable property of the FrameLayout is also set true because since this is an overlay view and we want all actions to be carried out on the view. If perhaps the property is set to false, when the overlay progress view becomes visible, we will still be able to have access to the previous view which is not cool. Also note that the visibility of the overlay progress view is set to gone. We can set it to visible when we need it from our activity. The last thing you need to note is the background color of my framelayout. The background color of my framelayout was set to transparent. A good thing is Magda Miu has an interesting article about understanding the proper implementation of transparent colours in Android.
Step 3: Include the progress_view.xml file in the activity_main.xml
TL;DR
For an overlay to occur, you need to understand z-index in android. Z-index allows overlapping of views in android. There are various ways to do this — through class files (Java or Kotlin) and xml file (Layout). One of the finest ways of doing this is to make sure the parent viewgroup of your layout file supports z-indexing. For instance, you cannot use z-indexing in a linearlayout viewgroup. In this sense, a view declared at the end in a layout file will have an higher z-index that the preceding views. You need to note here that coordinator layout is my parent viewgroup, followed by constraintlayout, and then the progress_overlay view. Note that the progress_overlay view wasn’t included inside the constraintlayout but outside and literally has an higher index than the preceding views.
Step 4: Let’s go to our MainActivity
TL;DR
The overlay view is set to visible once the button is clicked. Notice how the onBackPressed method gracefully ends our frameLayout and sets the visible to gone.
Additional Resources
Fork me on GitHub
Check out the complete source code in the following link:
