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.