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
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
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
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
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
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...