How to Create Custom ProgressBar

Question

Edit:
Question 1) is solved. But I still wasn't able to change to color of the ProgressBar. I tried to use my own theme (see code below).

I want my ProgressBar to look like the image below. I have already created a ProgressBar above my ListView.I’m using a ListView , ProgressBar , and two TextViews in a RelativeLayout.

My Question:

1.) How can I align the TextViews above the ProgressBar in the way shown below?
2.) How can I set the Color of the ProgressBar itself and the Background Color of the ProgressBar?

MainActivity.xml

   <ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/progressBarText"
    android:progress="0"
    android:max="100"
    android:paddingTop="0dp"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:theme="@style/progressBarTheme"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"/>

styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@android:color/holo_green_dark</item>
</style>

<style name="progressBarTheme" parent="@style/Theme.AppCompat">
    <item name="colorAccent">@color/myRedColor</item>
</style>

</resources>

2

that would be a compound view – Linxy Oct 05 '18 at 19:36

ʍѳђઽ૯ท · Answer 1 · 2018-10-06T09:45:33.030

1

1.) How can I align the TextViews above the ProgressBar in the way shown below?

Try this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">

    <ProgressBar
        android:id="@+id/progressCircle"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

    <TextView
        android:id="@+id/txtvStatusCircle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/progressCircle"
        android:layout_alignParentStart="true"
        android:text="Daily Progress"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtPercent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/progressCircle"
        android:layout_alignParentEnd="true"
        android:text="0 %"
        android:textSize="18sp" />

</RelativeLayout>

2.) How can I set the Color of the ProgressBar itself and the Background Color of the ProgressBar?

In your styles.xml:

<style name="progressBarBlue" parent="@style/Theme.AppCompat">
        <item name="colorAccent">@color/myBlueColor</item>
</style>

Then set as the ProgressBar theme in the xml:

<ProgressBar
    ...
    android:theme="@style/progressBarBlue" />

About the ProgressBar itself, what ever you choose for the AccentColor in your styles, will be set for the ProgressBar too. So changing the color of:

<item name="colorAccent">@color/colorAccent/item>

Will do the trick.

Output:

edited Oct 06 '18 at 09:45

answered Oct 05 '18 at 19:40

ʍѳђઽ૯ท

16,646
7
53
108

Thanks :) I’m going to try out tomorrow – Jan Meyer Oct 05 '18 at 19:42
how to add the second textview that displays the percentage to the right side? it‘s overlaping with my other textview – Jan Meyer Oct 06 '18 at 09:23
and the color is not changing – Jan Meyer Oct 06 '18 at 09:31
1

Check my updated answer. I just added: `android:layout_alignParentEnd="true"` to the other `TextView`. :) – ʍѳђઽ૯ท Oct 06 '18 at 09:46
The TextViews are properly aligned. But the color of the ProgressBar didn’t change. – Jan Meyer Oct 06 '18 at 18:04
1

Did you used-changed `AccentColor` in your `styles.xml`? You can however try to use this answer too: https://stackoverflow.com/a/52481132/4409113 – ʍѳђઽ૯ท Oct 06 '18 at 18:09
I updated my question and added some code. Would be nice if you could have a look on it :) – Jan Meyer Oct 12 '18 at 17:28
Just checked the codes. Did you try: `android:progressTint="@color/colorAccent"`? – ʍѳђઽ૯ท Oct 13 '18 at 06:04
yes, I did. I think it’s only for api higher than 21. But I found a solution (this answer below) – Jan Meyer Oct 13 '18 at 07:19

score 1 · Answer 2 · answered Oct 06 '18 at 10:05

try this:

<android.support.constraint.ConstraintLayout
            android:id="@+id/uplaodFile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/upload"
            android:layout_marginTop="10dp"
            >

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="46dp"
                android:layout_height="65dp"
                android:src="@drawable/file_image"
                app:layout_constraintEnd_toStartOf="@+id/horizontal_progress_bar"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@+id/notification" />

            <TextView
                android:id="@+id/notification"
                android:layout_width="282dp"
                android:layout_height="22dp"
                android:layout_marginBottom="2dp"
                android:text="File Detail"
                app:layout_constraintBottom_toTopOf="@+id/cancel"
                app:layout_constraintStart_toStartOf="@+id/horizontal_progress_bar"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="MissingConstraints" />

            <ProgressBar
                android:id="@+id/horizontal_progress_bar"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="201dp"
                android:layout_height="26dp"
                android:layout_marginEnd="8dp"
                android:layout_marginTop="24dp"
                android:indeterminate="false"
                android:max="100"
                android:minHeight="100dp"
                android:progress="2"
                android:progressBackgroundTint="#aaaaaa"
                app:layout_constraintEnd_toStartOf="@+id/cancel"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="MissingConstraints" />

            <TextView
                android:id="@+id/process_state"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="40dp"
                android:text="uploading.. 10%"
                android:textAlignment="center"
                android:textColor="#4B74FF"
                android:textSize="10dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.833"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="MissingConstraints" />

            <ImageView
                android:id="@+id/cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="36dp"
                android:layout_marginEnd="10dp"
                android:src="@drawable/ic_close_black_24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                tools:ignore="MissingConstraints" />


        </android.support.constraint.ConstraintLayout>

this is the java code

ProgressBar progressBar;

process_status = findViewById(R.id.process_state);
progressBar = findViewById(R.id.horizontal_progress_bar);
progressBar.setProgressTintList(ColorStateList.valueOf(Color.parseColor("#4B74FF")));
progressBar.setProgress(currentProgress);
textView.setText("Uploading..."+currentProgress+ "%");

setProgressTintList requires API level 21. My device has API 19. — Jan Meyer, Oct 12 '18 at 21:45
try this, https://stackoverflow.com/questions/43251550/android-tinting-progressbar-on-pre-lollipop-devices hope help full for you. — chetan mahajan, Oct 13 '18 at 16:19

score 1 · Accepted Answer · answered Oct 12 '18 at 22:31

1

This changed the color of the progressbar.

progressBar.getProgressDrawable().setColorFilter(
Color.RED, android.graphics.PorterDuff.Mode.SRC_IN);

answered Oct 12 '18 at 22:31

Jan Meyer

214
3
10

How to Create Custom ProgressBar

3 Answers3