Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Material Design Components Progress Indicator in Android

  • Last Updated : 27 Sep, 2021

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

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

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.

Anatomy of the Progress indicators

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: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: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: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 thicknessapp:trackThickness

setTrackThickness

getTrackThickness

Indicator colorapp:indicatorColor

setIndicatorColor

getIndicatorColor

Track colorapp:trackColor

setTrackColor

getTrackColor

Track corner radiusapp:trackCornerRadius

setTrackCornerRadius

getTrackCornerRadius

Show animation behaviorapp:showAnimationBehavior

setShowAnimationBehavior

getShowAnimationBehavior

Hide animation behaviorapp:hideAnimationBehavior

setHideAnimationBehavior

getHideAnimationBehavior

Specific Attributes for Linear progress indicator:

These attributes are specific for Linear Progress indicators.

Element 

Attribute

Related Methods

Indeterminate animation typeapp:indeterminateAnimationType

setIndeterminateAnimationType

getIndeterminateAnimationType

Indicator directionapp: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

Insetapp:indicatorInset

setIndicatorInset

getIndicatorInset

Indicator directionapp:indicatorDirectionLinear

setIndicatorDirection

getIndicatorDirection




My Personal Notes arrow_drop_up
Recommended Articles
Page :