Material Design Components Progress Indicator in Android

Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android applications. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. Material design in Android is one of the key features that attracts and engages the customer towards the application. This is a special type of design, which is guided by Google. So in this article, it has been demonstrated how to use Progress Indicators, their types, and anatomy.

Create an empty activity project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Add Required Dependency

Include google material design components dependency in the build.gradle file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner.

implementation ‘com.google.android.material:material:1.4.0’

Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.

What are Progress Indicators?

Progress indicators are used in android to inform the user about ongoing processes, for example, loading applications, network calls, downloading or uploading files. These communicate the app’s state and inform the user whether they can navigate away from the current session of the app.

Types of Progress Indicators

There are majorly two types of Progress Indicators one is a linear indicator and another is a circular indicator. Have a look at the following image to get the difference. These progress indicators may be Determinate or Indeterminate. 

• Determinate indicators inform the user about the definite process, these should be only used when the process rate can be detected.
• Indeterminate indicators inform the user about the indefinite process means the current process is can take an indefinite time to complete.

The Linear Progress indicator Consists of two major components:

• Track: The component which is of fixed width, which sets boundaries for the indicator to travel along.
• Indicator: The component which animates along the track.

Steps to implement the progress indicator in the Android project

Working with the activity_main.xml file

The main layout of the application consists of two progress indicators. One is a Linear progress indicator and another is a Circular progress indicator. Note that the indeterminate attribute in each of them to be true, otherwise it will not animate when the app is run on an emulator. To implement the same invoke the following code inside the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:id="@+id/linearProgressIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:indeterminate="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.progressindicator.CircularProgressIndicator
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:indeterminate="true"
        app:layout_constraintEnd_toEndOf="@+id/linearProgressIndicator"
        app:layout_constraintStart_toStartOf="@+id/linearProgressIndicator"
        app:layout_constraintTop_toBottomOf="@+id/linearProgressIndicator" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output:

Customizing Linear progress indicator:

To change the track thickness, track color, and indicator color the attributes are:

app:trackThickness=”colorValue”

app:trackColor=”colorValue”

app:indicatorColor=”colorValue”

Following is an example:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:id="@+id/linearProgressIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:indeterminate="true"
        app:indicatorColor="@color/green_500"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:trackColor="@color/purple_500"
        app:trackThickness="8dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output:

Increasing the size of the track thickness, track color, and indicator size for circular progress indicator:

To change the track color, indicator color, track thickness, and indicator size the attributes are:

app:trackThickness=”colorValue”

app:trackColor=”colorValue”

app:indicatorColor=”colorValue”

app:indicatorSize=”valueInDp”

Following is an example:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.progressindicator.CircularProgressIndicator
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:indeterminate="true"
        app:indicatorColor="@color/green_500"
        app:indicatorSize="64dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:trackColor="@color/purple_500"
        app:trackThickness="8dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output:

Some common attributes of linear and circular indicators are:

Element	Attribute	Related Methods
Track thickness	app:trackThickness	setTrackThickness getTrackThickness
Indicator color	app:indicatorColor	setIndicatorColor getIndicatorColor
Track color	app:trackColor	setTrackColor getTrackColor
Track corner radius	app:trackCornerRadius	setTrackCornerRadius getTrackCornerRadius
Show animation behavior	app:showAnimationBehavior	setShowAnimationBehavior getShowAnimationBehavior
Hide animation behavior	app:hideAnimationBehavior	setHideAnimationBehavior getHideAnimationBehavior

Specific Attributes for Linear progress indicator:

These attributes are specific for Linear Progress indicators.

Element	Attribute	Related Methods
Indeterminate animation type	app:indeterminateAnimationType	setIndeterminateAnimationType getIndeterminateAnimationType
Indicator direction	app:indicatorDirectionLinear	setIndicatorDirection getIndicatorDirection

Specific Attributes for Circular progress indicator:

These attributes are specific for Circular Progress indicators.

Element	Attribute	Related Methods
Spinner size (outer diameter)	app:indicatorSize	setIndicatorSize getIndicatorSize
Inset	app:indicatorInset	setIndicatorInset getIndicatorInset
Indicator direction	app:indicatorDirectionLinear	setIndicatorDirection getIndicatorDirection