In this article, we will see how we can add color to a ProgressBar in android. Android ProgressBar is a user interface control that indicates the progress of an operation. For example, downloading a file, uploading a file on the internet we can see the ProgressBar estimate the time remaining in operation. Note in this article we will be using Java and XML to set the color.
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 select Java as the programming language.
Step 2: Create a custom ProgressBar
- Go to the app > res > drawable > right-click > New > Drawable Resource File and name the file as progress_bg.
- Inside the XML file add a rotate tag with some attributes(see code)
- Inside rotate tag create a shape tag within which create the size and gradient tag
- Attributes of these tags are given in the code below.
- Below is the code for the progress_bg.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><!--use rotate tag to rotate the drawable--><rotate android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360"> <!--shape tag is used to build a shape in XML--> <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="8" android:useLevel="false"> <!--set the size of the shape--> <size android:width="76dip" android:height="76dip" /> <!--set the color gradients of the shape--> <gradient android:angle="0" android:endColor="#00ffffff" android:startColor="#447a29" android:type="sweep" android:useLevel="false" /> </shape> </rotate> |
Step 3: Working with the activity_main.xml file
- Go to the activity_main.xml file and refer to the following code.
- Open the activity_main.xml file and in the ProgressBar tag and set the drawable in indeterminateDrawable attribute.
- Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:padding="20dp"> <!--set the custom progress bar here in the indeterminateDrawable attribute--> <ProgressBar android:id="@+id/ProgressBar01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:indeterminate="true" android:indeterminateDrawable="@drawable/progress_bg" android:progress="0" /> <Button android:id="@+id/show_button" android:layout_width="191dp" android:layout_height="wrap_content" android:layout_below="@id/ProgressBar01" android:layout_centerHorizontal="true" android:layout_marginTop="80dp" android:text="Progress Bar" /> </RelativeLayout> |
Step 4: Working with the MainActivity.java file
- Go to the MainActivity.java file and refer to the following code.
- Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;import android.os.Handler;import android.widget.Button;import android.widget.ImageView;import android.widget.ProgressBar;import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { Handler handler = new Handler(); public static Button button; public static TextView textView; public static ImageView img1, img2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // create a progress bar variable and set the id final ProgressBar progressBar = findViewById(R.id.ProgressBar01); // show the progress bar progressBar.getProgress(); }} |
Output:
