Jak zmienić kolor w okrągłym pasku postępu?

147

Używam okrągłego paska postępu na Androidzie. Chcę zmienić kolor tego. ja używam

"?android:attr/progressBarStyleLargeInverse" 

styl. Jak więc zmienić kolor paska postępu.

Jak dostosować styl? Co więcej, jaka jest definicja stylu?

mooongcle
źródło

Odpowiedzi:

163

W folderze res / drawable umieść to:

progress.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:pivotX="50%" 
      android:pivotY="50%" 
      android:fromDegrees="0"
      android:toDegrees="360">

    <shape 
        android:shape="ring" 
        android:innerRadiusRatio="3"
        android:thicknessRatio="8" 
        android:useLevel="false">

    <size 
        android:width="76dip" 
        android:height="76dip" />

    <gradient 
        android:type="sweep" 
        android:useLevel="false"
        android:startColor="#447a29" 
        android:endColor="#00ffffff"
        android:angle="0"/>

    </shape>

</rotate> 

Ustaw startColori endColorwedług własnego wyboru.

Teraz umieść to progress.xmlw tle ProgressBar.

Lubię to

<ProgressBar
  android:id="@+id/ProgressBar01" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:indeterminateDrawable="@drawable/progress"
 />
Chirag
źródło
1
to nie działa, gdy używam niestandardowego okna dialogowego jako nagłówka widoku listy. Czy istnieje potrzeba innego podejścia?
Pankaj Kumar
22
Tworzy to zielony kształt pierścienia, ale rzeczywisty spinner ProgressBar jest nadal widoczny.
mdupls
czy istnieje sposób, aby obracające się kolory poruszały się tylko w jednym kierunku?
thepoosh
48
Zamiast ustawiać tło za pomocą „android: background”, użyj zamiast tego „android: indeterminateDrawable =„ @ drawable / progress ”, co podkreśla inna odpowiedź
baekacaek.
1
Użyj innych wartości android: startColor = "# 447a29" android: endColor = "# 227a29", aby nie tworzyły statycznego koła.
Abhishek Sengupta
137

Dla API 21 i wyższych. Po prostu ustaw właściwość indeterminateTint. Lubić:

android:indeterminateTint="@android:color/holo_orange_dark"

Aby obsługiwać urządzenia sprzed API 21:

mProgressSpin.getIndeterminateDrawable()
                .setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );
Student 222
źródło
2
z style="?android:attr/progressBarStyle"nie działa
user25
Jeśli mam tablicę kolorów i chcę ustawić kolor na tablicę kolorów na każdym pasku postępu
Prince
To zadziałało dobrze dla mnie, tylko po to, aby zmienić kolor pierścienia progressBar :)
Gastón Saillén
Dziękujemy za podkreślenie aspektu interfejsów API
JamisonMan111
Jeśli dodam ten kolor, koloruje obracający się przecięty pierścień, ale wszystko, więc zamienia się w pełny pierścień, więc nie widać, jak się porusza
Lucas Zanella
135

1. Najpierw utwórz plik xml w folderze do rysowania w zasobie

o nazwie „progress.xml”

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false" >

    <size
        android:height="76dip"
        android:width="76dip" />

    <gradient
        android:angle="0"
        android:endColor="color/pink"
        android:startColor="@android:color/transparent"
        android:type="sweep"
        android:useLevel="false" />

    </shape>

</rotate>

2. następnie utwórz pasek postępu za pomocą następującego fragmentu

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/relativeLayout1"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="20dp"
    android:indeterminate="true"
    android:indeterminateDrawable="@drawable/progress" />
Muhamed Riyas M.
źródło
Cześć Muhamed, używam niestandardowego koła postępu, próbowałem zmienić kolor w trakcie koła w czasie wykonywania. próbuję, po kliknięciu przycisku rozpoczyna się postęp. Ustawiłem kolor na zielony. Gdy postęp osiągnie 100%, chcę, żeby zaczął się od nowa, tylko tym razem jego kolor powinien być czerwony. Ale nie mogłem tego zrobić ... jeśli to możliwe, pomóż mi
harikrishnan
1
Dzięki. Działa w 100%. ustaw progress.xml na android: indeterminateDrawable
Leo Nguyen
Kiedy tego spróbowałem, utworzyło to grubą granicę koła. Jakieś pomysły, jak zmniejszyć granicę?
Tejas
Cześć Tejas, Spróbuj zmienić tę linię android: ThickRatio = "8" w progress.xml. Możesz wypróbować różne wartości. Mam nadzieję, że to zadziała.
Muhamed Riyas M
Działa, ale zamiast dwóch obracających się względem siebie pierścieni otrzymuję tylko jeden. Jakieś rozwiązanie tego problemu?
AX
66

Możesz programowo zmienić kolor za pomocą tego kodu:

ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000,
                        android.graphics.PorterDuff.Mode.MULTIPLY);

Jeśli chcesz zmienić kolor paska postępu ProgressDialog, możesz użyć tego:

mDilog.setOnShowListener(new OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            ProgressBar v = (ProgressBar)mDilog.findViewById(android.R.id.progress);
            v.getIndeterminateDrawable().setColorFilter(0xFFcc0000,
                    android.graphics.PorterDuff.Mode.MULTIPLY);

        }
    });
Dadroid
źródło
Hej, jak połączę pasek postępu ProgressDialog z Progress.xml?
Meghal Agrawal,
Jeśli mam tablicę kolorów i chcę ustawić kolor na tablicę kolorów na każdym pasku postępu
Prince
36

Aby dodać do odpowiedzi Dato, uważam, że SRC_ATOP jest preferowanym filtrem do mnożenia, ponieważ lepiej obsługuje kanał alfa.

ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.SRC_ATOP);
aikmanr
źródło
1
W wersji 2.3.x daje to wypełnione pełne koło, w którym MULTIPLY zachowuje przezroczystość.
azdev
Jeśli mam tablicę kolorów i chcę ustawić kolor na tablicę kolorów na każdym pasku postępu
Prince
28

android: indeterminateTint = "@ color / progressbar"

Bhupinder Singh
źródło
po prostu użyj powyższego atrybutu na pasku postępu: indeterminateTint = twój kolor
Bhupinder Singh
Najlepsza odpowiedź i będzie obsługiwać również wszystkie wersje
Pankaj Kumar
To wszystko, czego potrzebujesz, a nie te szalone odpowiedzi. Chociaż inni skorzystaliby na pełnym bloku kodu.
StarWind0
7
indeterminateTint jest dostępny dla interfejsu API 21 lub nowszego. Jeśli to działa, wspaniale!
Andy Weinstein
15

style.xml

<style name="CircularProgress" parent="Theme.AppCompat.Light">
    <item name="colorAccent">@color/yellow</item>
</style>

  <ProgressBar
        android:layout_width="@dimen/d_40"
        android:layout_height="@dimen/d_40"
        android:indeterminate="true"
        style="@style/Widget.AppCompat.ProgressBar"
        android:theme="@style/CircularProgress"/>
Hardik Vasani
źródło
14
android:indeterminateTint="@color/yellow"

To działa dla mnie, po prostu dodaj tę linię do kodu XML progressBar

Yıldırım
źródło
12

To działa dla mnie.

<ProgressBar
android:id="@+id/ProgressBar01" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="@color/black"/>
Kaloglu
źródło
4
Dostępne od poziomu API 21
viplezer
11

Aby dostosować okrągły pasek postępu, musimy utworzyć nieokreślonyDrawable, aby wyświetlić niestandardowy pasek postępu

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1">

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false">

        <size
            android:height="48dip"
            android:width="48dip" />

        <gradient
            android:centerColor="#f96047"
            android:centerY="0.50"
            android:endColor="#fb9c8d"
            android:startColor="#f72d0c"
            android:type="sweep"
            android:useLevel="false" />

    </shape>

</rotate>

Musimy dołączyć drawable w progressbar, tak jak poniżej:

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_centerInParent="true"
    style="?android:attr/progressBarStyleLarge"
    android:visibility="visible"
    android:progressDrawable="@drawable/widget_progressbar"
    android:indeterminateDrawable="@drawable/widget_progressbar"
    android:layout_height="wrap_content" />
Akshay Mukadam
źródło
rotatebrak tagu wcześniej shape. Bez tego pasek postępu będzie statyczny
Renan Bandeira
@RenanBandeira, możesz poprawić odpowiedź, jeśli jest poprawna
Akshay Mukadam
9

dla mnie motyw nie działał z accentColor. Ale zadziałało z colorControlActivated

    <style name="Progressbar.White" parent="AppTheme">
        <item name="colorControlActivated">@color/white</item>
    </style>

  <ProgressBar
        android:layout_width="@dimen/d_40"
        android:layout_height="@dimen/d_40"
        android:indeterminate="true"
        android:theme="@style/Progressbar.White"/>
S.Javed
źródło
4

Aby uzupełnić najpopularniejszą odpowiedź Muhameda Riyasa M.

Szybszy obrót

android:toDegrees="1080"

Cieńszy pierścień

android:thicknessRatio="16"

Jasnobiała

android:endColor="#80ffffff"
Suragch
źródło
4

sprawdź tę odpowiedź :

dla mnie musiały tam być te dwie linie, żeby działało i zmieniało kolor:

android:indeterminateTint="@color/yourColor"
android:indeterminateTintMode="src_in"

PS: ale jest dostępny tylko od Androida 21

Amin Keshavarzian
źródło
4

Spróbuj użyć stylu i ustaw colorControlActivated na zbyt pożądany kolor ProgressBar.

<style name="progressColor" parent="Widget.AppCompat.ProgressBar">
    <item name="colorControlActivated">@color/COLOR</item>
</style>

Następnie ustaw motyw ProgressBar na nowy styl.

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/progressColor"
 />
this.Mitch
źródło
3

Dodaj do motywu działania element colorControlActivated , na przykład:

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
            ...
            <item name="colorControlActivated">@color/rocket_black</item>
            ...
    </style>

Zastosuj ten styl do swojej aktywności w manifeście:

<activity
    android:name=".packege.YourActivity"
    android:theme="@style/AppTheme.NoActionBar"/>
Vladislav
źródło
2

Możesz to zrobić dość łatwo za pomocą niestandardowego okna dialogowego, ponownie wykorzystując XML z innych odpowiedzi:

<?xml version="1.0" encoding="utf-8"?>

<shape
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="8"
    android:useLevel="false" >

    <size
        android:height="76dip"
        android:width="76dip" />

    <gradient
        android:angle="0"
        android:endColor="@color/oceanBlue"
        android:startColor="@android:color/transparent"
        android:type="sweep"
        android:useLevel="false" />

</shape>

Po prostu zrób to:

public static class ModifiedProgressDialog extends ProgressDialog {
    public ModifiedProgressDialog(Context context) {
        super(context);
    }

    @Override
    public void show() {
        super.show();
        setIndeterminateDrawable(getContext().getResources().getDrawable(R.drawable.blue_progress));
    }
}
Nathaniel D. Wagoner
źródło
2

Możesz użyć stylu do zmiany koloru postępu, jak poniżej

 <style name="AppTheme.anyName">
        <item name="colorAccent">YOUR_COLOR</item>
    </style>

i użyj go w ProgressBar, jak poniżej

<ProgressBar
            style="?android:attr/progressBarStyle"
            android:theme="@style/AppTheme.WhiteAccent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/dimen_30"
        />

Mam nadzieję, że to pomoże.

Rahul
źródło
1

Dla wszystkich, którzy zastanawiają się, jak zwiększyć prędkość niestandardowego postępu

  <?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="1080"><!--HERE YOU COULD INCREASE SPEED BY SETTING TODEGRESS(1080 is 3 loops instead of 1 in same amt of time)-->
<shape android:shape="ring" android:innerRadiusRatio="3"
    android:thicknessRatio="8" android:useLevel="false">
    <size android:width="76dip" android:height="76dip" />
    <gradient android:type="sweep" android:useLevel="false"
        android:startColor="#447a29" 
        android:endColor="#447a29"
        android:angle="0"
         />
</shape>

Behl
źródło
0

Pobiera wartość koloru z Res / Values ​​/ Colors.xml -> colorAccent, jeśli to zmienisz, zmieni się również kolor progressBar.

Nocturnale
źródło
0

Zestaw android:indeterminateDrawable="@drawable/progress_custom_rotate"

Użyj poniższego kodu dla paska postępu niestandardowego okrągłego pierścienia

Skopiuj poniższy kod i utwórz plik „progress_custom_rotate.xml” w folderze do rysowania

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
    android:toDegrees="1080">

    <shape android:shape="ring" android:innerRadiusRatio="3"
        android:thicknessRatio="8" android:useLevel="false">

        <size android:width="48dip" android:height="48dip" />

        <gradient android:type="sweep" android:useLevel="false"
            android:startColor="#4c737373" android:centerColor="#4c737373"
            android:centerY="0.50" android:endColor="#ffffd300" />

    </shape>

</rotate>
Bhavesh Moradiya
źródło
0
<style name="progressColor" parent="Widget.AppCompat.ProgressBar">
    <item name="colorControlActivated">@color/colorPrimary</item>
</style>


<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="250dp"
    android:theme="@style/progressColor"
    android:layout_height="250dp"
    android:layout_centerInParent="true" />
Wyjątek zerowego wskaźnika
źródło
-1

Możesz zmienić kolor paska postępu za pomocą poniższego kodu:

progressBar.getProgressDrawable().setColorFilter(
    getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);
user3273957
źródło
Czy mam tablicę kolorów?
Prince