How to Implement Circular ProgressBar in Android?
Last Updated :
29 Sep, 2023
ProgressBar is used when we are fetching some data from another source and it takes time, so for the user’s satisfaction, we generally display the progress of the task. In this article, we are going to learn how to implement the circular progress bar in an Android application using Java. So, this article will give you a complete idea of implementing a circular progress bar in an application built in Android Studio. So, without wasting further time let’s go to the article and read how we can achieve this task.
What we are going to develop in this article?
We will be building a simple application in which we will be implementing a circular progress bar with a text display. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project both using the Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that you can select Java as well as Kotlin as the programming language.
Step 2: Create circular_progress_bar.xml
Navigate to the app > res > drawable > right-click and select new > drawable resource file and name the new XML file as circular_progress_bar.xml and refer to the following code. Comments are added inside the code to understand the code in more detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< rotate
android:fromDegrees = "270"
android:toDegrees = "270" >
< shape
android:innerRadiusRatio = "2.5"
android:shape = "ring"
android:thickness = "8dp"
android:useLevel = "true" >
< gradient
android:angle = "0"
android:endColor = "@color/colorPrimary"
android:startColor = "#000000"
android:type = "sweep"
android:useLevel = "false" />
</ shape >
</ rotate >
|
Step 3: Create circular_shape.xml
Similarly, create a new drawable resource file and name the file as circular_shape.xml and refer to the following code.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< shape
android:innerRadiusRatio = "2.5"
android:shape = "ring"
android:thickness = "3dp"
android:useLevel = "false" >
< solid android:color = "@color/colorPrimary" />
</ shape >
|
Step 4: Working with the activity_main.xml file
Now it’s time to design the layout of the application. So for that, navigate to the app > res > layout > activity_main.xml and refer to the code written below.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:gravity = "center_horizontal"
android:orientation = "vertical"
tools:context = ".MainActivity" >
< RelativeLayout
android:id = "@+id/progress_layout"
android:layout_width = "200dp"
android:layout_height = "200dp"
android:layout_margin = "100dp" >
< ProgressBar
android:id = "@+id/progress_bar"
style = "?android:attr/progressBarStyleHorizontal"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:background = "@drawable/circular_shape"
android:indeterminate = "false"
android:progressDrawable = "@drawable/circular_progress_bar"
android:textAlignment = "center" />
< TextView
android:id = "@+id/progress_text"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentLeft = "true"
android:layout_alignParentRight = "true"
android:layout_centerVertical = "true"
android:gravity = "center"
android:text = "---"
android:textColor = "@color/colorPrimary"
android:textSize = "28sp"
android:textStyle = "bold" />
</ RelativeLayout >
</ LinearLayout >
|
Step 5: Working with the MainActivity file
Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail.
Java
import android.os.Bundle;
import android.os.Handler;
import android.widget.ProgressBar;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private ProgressBar progressBar;
private TextView progressText;
int i = 0 ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
progressBar = findViewById(R.id.progress_bar);
progressText = findViewById(R.id.progress_text);
final Handler handler = new Handler();
handler.postDelayed( new Runnable() {
@Override
public void run() {
if (i <= 100 ) {
progressText.setText( "" + i);
progressBar.setProgress(i);
i++;
handler.postDelayed( this , 200 );
} else {
handler.removeCallbacks( this );
}
}
}, 200 );
}
}
|
Kotlin
import android.os.Bundle
import android.os.Handler
import android.widget.ProgressBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
lateinit var progressBar: ProgressBar
lateinit var progressText: TextView
var i = 0
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
progressBar = findViewById(R.id.progress_bar)
progressText = findViewById(R.id.progress_text)
Handler().postDelayed(object : Runnable {
override fun run() {
if (i <= 100 ) {
progressText.text = "" + i
progressBar.progress = i
i++
Handler().postDelayed( this , 200 )
} else {
Handler().removeCallbacks( this )
}
}
}, 200 )
}
}
|
That’s all, now the application is ready to install on the device. Here is what the output of the application looks like.
Output:
Share your thoughts in the comments
Please Login to comment...