CODEWITHSUNDEEP
androidstylesprogress-bar
user5699130
user5699130

Reputation:

Change Horizontal Progress Bar Color

Problem Description

I'm trying to change ProgressBar color using custom style defined in the style.xml

layout.xml

<ProgressBar
        android:id="@+id/progress_bar"
        style="@style/ProgressTheme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:indeterminateBehavior="repeat" />

style.xml

<style name="ProgressTheme" parent="Widget.AppCompat.ProgressBar.Horizontal">
        <item name="colorAccent">#000</item>
</style>

Question

I find some useful articles about how to change color programatically or by adding some layer-list, but I want simple solution. And I guess that the way how I implemented should work.

How I can change color?

Upvotes: 3

Views: 9576

Answers (4)

Volodymyr Zakharov
Volodymyr Zakharov

Reputation: 93

You need add android:indeterminateTint="@color/red"

Upvotes: 0

anshajkhare
anshajkhare

Reputation: 317

Might be late, but I am putting this here for anyone else who might run into the same issue.

In your styles.xml file, add a new style for your Progress Bar

<style name="CustomProgressBarTheme">
    <item name="colorAccent">@color/myProgressBarColor</item>
    <item name="android:progressBarStyle">@style/Widget.AppCompat.ProgressBar.Horizontal</item>
</style>

The android:progressBarStyle attribute ensures the Progress Bar is horizontal.

And just add this style to your progress bar, and set android:indeterminate="true".

<ProgressBar
    android:id="@+id/progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:theme="@style/slang_lib_ProgressBarTheme" />

NOTE: Using style attribute would not work here, use android:theme instead.

Upvotes: 0

Ronit kadwane
Ronit kadwane

Reputation: 564

You can style your progress dialog this way: create a drawable file with your ring shape (circular_progress_dialog.xml)

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
    android:innerRadiusRatio="2.5"
    android:shape="ring"
    android:thickness="2dp"
    android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

    <gradient
        android:angle="0"
        android:endColor="@color/main_background"
        android:startColor="@color/main_orange"
        android:type="sweep"
        android:useLevel="false" />
</shape>
</rotate>

one to style your progress bar

 <style name="ProgressBar" parent="@android:style/Widget.ProgressBar">
    <item name="android:layout_centerHorizontal">true</item>
    <item name="android:layout_centerVertical">true</item>
    <item name="android:visibility">gone</item>
    <item name="android:background">@color/transparency_pleca</item>
    <item name="android:indeterminateDrawable">@drawable/circular_progress_dialog</item>
</style>

Notice your "android:indeterminateDrawable" property

Yout can create an instance of ProgressDialog and add your style with

// create progressDialog
final ProgressDialog myProgressDialog = new  ProgressDialog(MyActivity.this);
myProgressDialog.setProgressStyle(R.style.ProgressBar)
myProgressDialog.show();

Upvotes: 0

Chintan Soni
Chintan Soni

Reputation: 25287

you can try using:

mProgressBar.getProgressDrawable().setColorFilter(Color.BLACK, android.graphics.PorterDuff.Mode.SRC_IN);

For lollipop and above,use:

mProgressBar.setProgressTintList(ColorStateList.valueOf(Color.BLACK));

If looking for xml solution, try these properties of ProgressBar (Api 21 +):

android:indeterminateTintMode="src_atop"
android:indeterminateTint="@android:color/black"

Create the below <style.../> in styles.xml(v21) works on Api 21+:

<style name="blackProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
    <item name="android:indeterminateTintMode">src_atop</item>
    <item name="android:indeterminateTint">@android:color/black</item>
</style>

And apply it as:

<ProgressBar
    ...
    style="@style/blackProgressBar" />

Upvotes: 5

Related Questions