2 Android components you should start using right now!

1. Content Loading ProgressBar

Loading indicators on Android are easy to use thanks to ProgressBar. It comes with a large variety of styles; circles, bars, with or without progress, small or large. They are adapted to many use case and therefore used widely in any Android Apps.

However, using the default ProgressBar, can lead to flashing UI or can look clumsy. Things that we want to avoid, to the benefit of the User Experience. Glitches can happen when you load data from a local cache that takes only milli-seconds and therefore show a loading indicator for a split second and then disappears, not nice to the eyes.

The ContentLoadingProgressBar, helps you to prevent this behaviour, it guarantees you that the loading indicator will show for a minimum time, in order to prevent any flash. It results in a more pleasant experience for the user.

It inherits from ProgressBar and therefore offer all the same features with little extras.

Instead of using visibility = View.GONE and View.VISIBLE, the class come with two handy methods, show() and hide()

You might think that, you don’t want to find your user waiting unnecessary time. If we look closer at the ContentLoadingProgressBar, we can see that the minimum show time is 500ms, so you can relax, your users won’t wait that long.

ContentLoadingProgressBar also prevent to show the progress at all, if you call hide() within 500ms after calling show(). This way if your data loads super fast, the user won’t even see a loading indicator.

2. Material Design Dialog Builder

Dialogs have been in computing system for ages and yet there is still a little to learn. I’ve recently realised that many developers still use AlertDialog class provided by Android, and there is nothing bad with that, but I believe the MaterialAlertDialogBuilder has something to offer and people should know about it.

First of all, if you want your app to follow Material Design guidelines with ease, you should start using all the Android Material Design components offered by the material library, and Dialogs are not exception.

The great news is, it is actually incredibly easy to migrate to Material Design Dialogs. Instead of using the AlertDialog.Builder, you can just use MaterialAlertDialogBuilder. Given it inherits from the first one, it shares the same APIs.

AlertDialog.Builder(context)
    .setTitle("Dark Theme is here!")
    .setMessage("Android Developer News now supports Dark Theme!")
    .setPositiveButton("👍 Thanks!") { dialog, _ ->
        dialog.dismiss()
    }
    .show()

Yeah that’s right, just one single line.

MaterialAlertDialogBuilder(context)
    .setTitle("Dark Theme is here!")
    .setMessage("Android Developer News now supports Dark Theme!")
    .setPositiveButton("👍 Thanks!") { dialog, _ ->
        dialog.dismiss()
    }
    // Add customization options here
    .show()

Just replace “AlertDialog.Builder” with “MaterialAlertDialogBuilder”, and you are good to go.

Let’s compare the dialogs

On the left: Android AlertDialog.Builder, on the right: MaterialAlertDialogBuilder

The material one, come with rounder corners. We can also notice how the font is softer to the eyes, thanks to different font size and colours. Buttons don’t use any background, instead use the primary colour to render the text. Finally the background overlay is more transparent allowing the user to understand the context.

Customising the Dialogs and Overlay: Style it up! 🎨

Because of Material Design, it is possible to customise the dialog in many ways, using styles. This include having the cut shape or choosing the overlay opacity.

It can be achieved by extending “MaterialAlertDialog.MaterialComponents” style. And then, using your custom style for “alertDialogStyle” in your Dialog Theme.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">    
   ...
   <item name="materialAlertDialogTheme">@style/DialogTheme</item>
   ...
</style>

<style name="DialogTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="alertDialogStyle">@style/DialogStyle</item>
    <item name="android:backgroundDimAmount">0.70</item>
</style>

<style name="DialogStyle" parent="MaterialAlertDialog.MaterialComponents">
    <item name="shapeAppearance">@style/CutShape</item>
</style>

<style name="CutShape" parent="ShapeAppearance.MaterialComponents.MediumComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">8dp</item>
</style>

Using cut corners on Android Developer News Light and Dark version

Many more Material Components

Google is releasing new components for Android on a regular basis. Using them will ensure you to get the latest features and customisations in the future.

Conclusion

We have seen that with just a few lines of code, you can bring a better User Experience to your audience. It worth to explore a little bit and find out about the more sophisticated yet available out-of-the-box components.

Android Developer News

If you read this far, you might want to know about the App I’m currently building: Android Developer News. Its purpose is to bring the latest trends about Android Development in the palm of your hand. Famous library updates, interesting podcasts and blog articles, Android Studio releases and even codelabs. You can download it from the Play Store just here.

Thanks for reading this article, I hope it has been useful to you, as usual hit the clap button as many time as you want 👏