Material Design Components Progress Indicator in Android

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
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.
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.
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.
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
setTrackThickness
getTrackThickness
setIndicatorColor
getIndicatorColor
setTrackColor
getTrackColor
setTrackCornerRadius
getTrackCornerRadius
setShowAnimationBehavior
getShowAnimationBehavior
setHideAnimationBehavior
getHideAnimationBehavior
Specific Attributes for Linear progress indicator:
These attributes are specific for Linear Progress indicators.
Element 
Attribute
Related Methods
setIndeterminateAnimationType
getIndeterminateAnimationType
setIndicatorDirection
getIndicatorDirection
Specific Attributes for Circular progress indicator:
These attributes are specific for Circular Progress indicators.
Element
Attribute
Related Methods
setIndicatorSize
getIndicatorSize
setIndicatorInset
getIndicatorInset
setIndicatorDirection
getIndicatorDirection
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.