23

i want to change Horizontal ProgressBar color

i have tried this

How to change the color of an indefinite ProgressBar?

its not working still progress run in blue color

this is my code

<ProgressBar
                 android:id="@+id/mini_progress"
                 android:layout_marginLeft="10dip"
                 android:layout_marginRight="10dip"
                 style="?android:attr/progressBarStyleHorizontal"
                 android:layout_width="match_parent"
                 android:layout_height="20dip"
                 android:layout_gravity="center_horizontal"
                 android:indeterminate="false"
                 android:indeterminateBehavior="repeat"
                 android:indeterminateOnly="true"
                 android:visibility="gone"/>

how i can change the color to Pink ?

6 Answers 6

33

Try this code -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <solid android:color="#f58233" />
            </shape>
        </clip>

        <color android:color="#f58233" />
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <solid android:color="#f58233" />
            </shape>
        </clip>

        <color android:color="#f58233" />
    </item>

</layer-list>

Progress Bar -

<ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="200dp"
            android:layout_height="3dip"
            android:progressDrawable="@drawable/progress_bar" />

Change color codes according to your need

4
  • Which one to change for background and foreground color ? Commented Jun 23, 2015 at 9:12
  • Secondary Progress is for bg color, and progress for foreground color, I guess. Dont exactly remember. Commented Jun 23, 2015 at 21:41
  • 2
    Initially the progress bar is not visible at all. When I added <item android:id="@android:id/background"> its visible. I think secondaryprogress is not the bg! Commented Dec 15, 2015 at 7:43
  • How do you change colour of progress bar when its completely filled?
    – Jono
    Commented Jul 8, 2020 at 10:36
14

I did this to get the required color :

    android:indeterminate="true"
    android:indeterminateTintMode="src_atop"
    android:indeterminateTint="@color/myColor"

Works perfectly for me.(API 21 or higher)

0
12

For me this worked well.

enter image description here

<ProgressBar
            android:id="@+id/verify_progress"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:layout_below="@id/verify_phone"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:indeterminate="false"
            android:progressDrawable="@drawable/progress_bar" </ProgressBar>

drawable/progress_bar -

  <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background">
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="@color/Gray"
                    android:centerColor="@color/Gray"
                    android:endColor="@color/Gray"
                    />
            </shape>
        </item>


        <item
            android:id="@android:id/progress"
            >
            <clip>
                <shape>
                    <corners
                        android:radius="5dip" />
                    <gradient
                        android:startColor="@color/PrimaryColor"
                        android:endColor="@color/PrimaryColor" />
                </shape>
            </clip>
        </item>

    </layer-list>
1
  • Yep. Works across all android versions. Commented Apr 11, 2021 at 23:42
3

Since API 21 it's a one liner:

<ProgressBar
            ...
            android:progressTint="@color/colorAccent"/>
0

Add a renderer:

public class CustomProgressBarRenderer :ProgressBarRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e)
    {
        base.OnElementChanged(e);

        Control.ProgressDrawable.SetColorFilter(Color.FromRgb(182, 231, 233).ToAndroid(), Android.Graphics.PorterDuff.Mode.SrcIn);
        //Control.ProgressTintListColor.FromRgb(182, 231, 233).ToAndroid();
        Control.ProgressTintList = Android.Content.Res.ColorStateList.ValueOf(Color.FromRgb(182, 231, 233).ToAndroid());


    }
}
0

this works on pre-lollipop devices.

progressBar.getProgressDrawable().setColorFilter(ContextCompat.getColor(getActivity(),R.color.product_status_color), PorterDuff.Mode.MULTIPLY)
1
  • 1
    This will fires a NullPointerException as getProgressDrawable() is null
    – blueware
    Commented Feb 18, 2017 at 19:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.