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?

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"
 />

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 );

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" />

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);

        }
    });

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);

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"


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"/>


14
android:indeterminateTint="@color/yellow"

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


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"/>

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" />

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"/>

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"

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


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"
 />

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"/>

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));
    }
}

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.


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>


0

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


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>

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" />

-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);

Czy mam tablicę kolorów?
— Prince
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.