Wie ändere ich die Farbe im kreisförmigen Fortschrittsbalken?


147

Ich verwende den kreisförmigen Fortschrittsbalken unter Android. Ich möchte die Farbe ändern. ich benutze

"?android:attr/progressBarStyleLargeInverse" 

Stil. So ändern Sie die Farbe des Fortschrittsbalkens.

Wie kann ich den Stil anpassen? Was ist außerdem die Definition des Stils?

Antworten:


163

Fügen Sie im Ordner res / drawable Folgendes ein:

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> 

Set startColorund endColornach Ihrer Wahl.

Stellen Sie das jetzt progress.xmlin ProgressBarden Hintergrund.

So was

<ProgressBar
  android:id="@+id/ProgressBar01" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:indeterminateDrawable="@drawable/progress"
 />

1
Es funktioniert nicht, wenn ich ein benutzerdefiniertes Dialogfeld als Kopfzeile der Listenansicht verwende. Muss ein anderer Ansatz gewählt werden?
Pankaj Kumar

22
Dadurch entsteht eine grüne Ringform, aber der eigentliche ProgressBar-Spinner ist weiterhin sichtbar.
Mdupls

Gibt es eine Möglichkeit, die sich drehenden Farben nur in eine Richtung zu bewegen?
Thepoosh

48
Anstatt den Hintergrund mit "android: background" festzulegen, verwenden Sie stattdessen "android: indeterminateDrawable =" @ drawable / progress ", wie durch eine andere Antwort hervorgehoben
baekacaek

1
Verwenden Sie android: startColor = "# 447a29" android: endColor = "# 227a29" unterschiedliche Werte, damit kein statischer Kreis entsteht.
Abhishek Sengupta

137

Für API 21 und höher. Legen Sie einfach die Eigenschaft indeterminateTint fest. Mögen:

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

So unterstützen Sie Geräte vor der API 21:

mProgressSpin.getIndeterminateDrawable()
                .setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );

2
mit style="?android:attr/progressBarStyle"funktioniert nicht
user25

Wenn ich eine Reihe von Farben habe und die Farbe in jedem Fortschrittsbalken auf eine Farbreihe einstellen möchte
Prinz

Dies funktionierte gut für mich, nur um die Farbe des progressBar-Rings zu ändern :)
Gastón Saillén

Vielen Dank, dass Sie den Aspekt der APIs hervorgehoben haben
JamisonMan111

Wenn ich diese Farbe einsetze, färbt sie den sich drehenden geschnittenen Ring, aber alles, so dass er sich in einen vollen Ring verwandelt, sodass Sie nicht sehen, wie er sich bewegt
Lucas Zanella

135

1.Erstens Erstellen Sie eine XML-Datei in einem Zeichenordner unter Ressource

benannt "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. Machen Sie dann einen Fortschrittsbalken mit dem folgenden Snippet

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

Hallo Muhamed, ich verwende ein benutzerdefiniertes Fortschrittsrad. Ich habe versucht, das Farblaufrad zur Laufzeit zu ändern. Ich werde versucht, Sobald ich auf eine Schaltfläche klicke, beginnt der Fortschritt. Ich habe die Farbe als grün eingestellt. Nachdem der Fortschritt 100% erreicht hat, möchte ich, dass er erneut startet. Nur dieses Mal sollte seine Farbe rot sein. Aber ich konnte das nicht tun .. wenn möglich pls hilf mir
harikrishnan

1
Vielen Dank. Es funktioniert zu 100%. setze progress.xml auf android: unbestimmtDrawable
Leo Nguyen

Als ich das versuchte, wurde ein dicker Kreisrand erstellt. Irgendwelche Ideen, wie man die Grenze verkleinert?
Tejas

Hallo Tejas, versuche diese Zeile zu ändern android: thinRatio = "8" in der progress.xml. Sie können verschiedene Werte ausprobieren. Hoffe es wird funktionieren.
Muhamed Riyas M

Es funktioniert, aber anstatt zwei Ringe, die sich gegeneinander drehen, bekomme ich nur einen einzigen Ring. Irgendeine Lösung dafür?
AX

66

Mit diesem Code können Sie die Farbe programmgesteuert ändern:

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

Wenn Sie die Fortschrittsbalkenfarbe von ProgressDialog ändern möchten, können Sie Folgendes verwenden:

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

        }
    });

Hey, wie verbinde ich die Fortschrittsleiste von ProgressDialog mit Progress.xml?
Meghal Agrawal

Wenn ich eine Reihe von Farben habe und die Farbe in jedem Fortschrittsbalken auf eine Farbreihe einstellen möchte
Prinz

36

Um Datos Antwort zu ergänzen, finde ich, dass SRC_ATOP ein bevorzugter Filter zum Multiplizieren ist, da er den Alphakanal besser unterstützt.

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

1
Auf 2.3.x erhalten Sie einen ausgefüllten Kreis, in dem MULTIPLY die Transparenz bewahrt.
Azdev

Wenn ich eine Reihe von Farben habe und die Farbe in jedem Fortschrittsbalken auf eine Farbreihe einstellen möchte
Prinz

28

android: indeterminateTint = "@ color / progressbar"


Verwenden Sie einfach das obige Attribut im Fortschrittsbalken: indeterminateTint = Ihre Farbe
Bhupinder Singh

Beste Antwort und es würde auch für alle Versionen unterstützen
Pankaj Kumar

Das ist alles was du brauchst, nicht diese verrückten Antworten. Andere würden jedoch vom vollständigen Codeblock profitieren.
StarWind0

7
indeterminateTint ist für API 21 oder höher verfügbar. Wenn das für Sie funktioniert, großartig!
Andy Weinstein

15

styles.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"

Dies ist Arbeit für mich, fügen Sie einfach diese Zeile zu Ihrem progressBar-XML-Code hinzu


12

Das ist Arbeit für mich.

<ProgressBar
android:id="@+id/ProgressBar01" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="@color/black"/>

4
Verfügbar ab API Level 21
Viplezer

11

Um die zirkuläre Fortschrittsleiste anzupassen, müssen Sie eine unbestimmte Zeichnungsleiste erstellen , um die benutzerdefinierte Fortschrittsanzeige anzuzeigen

<?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>

Wir müssen Drawable wie folgt in die Fortschrittsanzeige aufnehmen:

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

rotateTag fehlt vorher shape. Ohne sie wird der Fortschrittsbalken statisch sein
Renan Bandeira

@ RenanBandeira Sie können die Antwort verbessern, wenn es richtig ist
Akshay Mukadam

9

Für mich funktionierte das Thema nicht mit AccentColor. Aber es hat mit colorControlActivated funktioniert

    <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

Als Ergänzung zu Muhamed Riyas Ms bester Antwort:

Schnellere Rotation

android:toDegrees="1080"

Dünnerer Ring

android:thicknessRatio="16"

Hellweiß

android:endColor="#80ffffff"

4

Überprüfen Sie diese Antwort aus:

Für mich mussten diese beiden Linien vorhanden sein, damit sie funktionieren und die Farbe ändern konnten:

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

PS: aber es ist nur von Android 21 erhältlich


3

Fügen Sie Ihrem Aktivitätsthema das Element colorControlActivated hinzu , zum Beispiel:

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

Wenden Sie diesen Stil auf Ihre Aktivität im Manifest an:

<activity
    android:name=".packege.YourActivity"
    android:theme="@style/AppTheme.NoActionBar"/>

3

Versuchen Sie es mit einem Stil und stellen Sie colorControlActivated auf die gewünschte ProgressBar-Farbe ein.

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

Stellen Sie dann das Thema der ProgressBar auf einen neuen Stil ein.

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/progressColor"
 />

2

Sie können dies ganz einfach mit einem benutzerdefinierten Dialogfeld tun, indem Sie die XML-Datei aus anderen Antworten wiederverwenden:

<?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>

Mach das einfach:

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

Sie können einen Stil zum Ändern der Fortschrittsfarbe wie unten verwenden

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

und verwenden Sie es in der ProgressBar wie unten

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

Ich hoffe es hilft.


1

Für alle, die sich fragen, wie Sie die Geschwindigkeit des benutzerdefinierten Fortschritts erhöhen können

  <?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

Der Farbwert wird aus Ihrer Datei Res / Values ​​/ Colors.xml -> colorAccent übernommen. Wenn Sie ihn ändern, ändert sich auch die Farbe Ihrer progressBar.


0

einstellen android:indeterminateDrawable="@drawable/progress_custom_rotate"

Verwenden Sie den folgenden Code für den benutzerdefinierten Fortschrittsbalken für Kreisringe

Kopieren Sie den folgenden Code und erstellen Sie "progress_custom_rotate.xml" im Ordner "Drawable"

<?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

Sie können Ihre Fortschrittsbalkenfarbe mit dem folgenden Code ändern:

progressBar.getProgressDrawable().setColorFilter(
    getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);

Wenn ich dann eine Reihe von Farben habe?
Prinz
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.