Come cambiare colore nella barra di avanzamento circolare?


147

Sto usando la barra di avanzamento circolare su Android. Vorrei cambiare il colore di questo. sto usando

"?android:attr/progressBarStyleLargeInverse" 

stile. Quindi, come cambiare il colore della barra di avanzamento.

Come personalizzare lo stile? Inoltre, qual è la definizione dello stile?

Risposte:


163

Nella cartella res / drawable, inserisci questo:

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> 

Impostare startColore endColorsecondo la vostra scelta.

Ora impostalo progress.xmlnel ProgressBarbackgound.

Come questo

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

1
non funziona quando utilizzo la finestra di dialogo personalizzata come intestazione della visualizzazione elenco. C'è bisogno di un altro approccio?
Pankaj Kumar,

22
Questo crea una forma ad anello verde, ma il filatore del ProgressBar reale è ancora visibile.
mdupls,

c'è un modo per far muovere i colori rotanti in una sola direzione?
thepoosh,

48
Invece di impostare lo sfondo con "android: background", usa invece "android: indeterminateDrawable =" @ drawable / progress ", come evidenziato da un'altra risposta
baekacaek,

1
Usa android: startColor = "# 447a29" android: endColor = "# 227a29" valori diversi in modo che non formi un cerchio statico.
Abhishek Sengupta,

137

Per API 21 e successive. Basta impostare la proprietà indeterminateTint. Piace:

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

Per supportare i dispositivi pre-API 21:

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

2
con style="?android:attr/progressBarStyle"non funziona
user25

Se ho una matrice di colori e voglio impostare il colore su una matrice di colori su ciascuna barra di avanzamento
Principe

Questo ha funzionato bene per me, solo per cambiare il colore dell'anello progressBar :)
Gastón Saillén

Grazie per aver enfatizzato l'aspetto delle API
JamisonMan111

Se metto questo colore colora l'anello tagliato rotante ma tutto, quindi si trasforma in un anello completo in modo da non vederlo muoversi
Lucas Zanella

135

1.Prima di creare un file XML nella cartella disegnabile sotto risorsa

chiamato "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.quindi crea una barra di avanzamento usando lo snippet seguente

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

Ciao Muhamed, sto usando la ruota di avanzamento personalizzata, ho provato a cambiare la ruota di colore in corso durante l'esecuzione. sono provato per, Una volta che clicco su un pulsante, il progresso inizia. Ho impostato il colore come verde. Dopo che il progresso ha raggiunto il 100%, voglio che ricomincia, solo che questa volta il suo colore dovrebbe essere rosso. Ma non sono riuscito a farlo ... se possibile, per favore aiutami
harikrishnan,

1
Grazie. Funziona al 100%. imposta progress.xml su android: indeterminateDrawable
Leo Nguyen il

Quando ho provato questo, ha creato un bordo spesso del cerchio. Qualche idea su come ridurre il confine?
Tejas,

Ciao Tejas, prova a cambiare questa riga android: thickRatio = "8" all'interno di progress.xml. Puoi provare valori diversi. Spero che funzioni.
Muhamed Riyas M

Funziona ma invece di due anelli che ruotano l'uno contro l'altro ottengo solo un singolo anello. Qualche correzione per questo?
AX

66

Puoi cambiare il colore a livello di codice usando questo codice:

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

Se vuoi cambiare il colore della barra di avanzamento di ProgressDialog, puoi usare questo:

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

        }
    });

Ehi, come collegherò la barra di avanzamento di ProgressDialog con Progress.xml ??
Meghal Agrawal,

Se ho una matrice di colori e voglio impostare il colore su una matrice di colori su ciascuna barra di avanzamento
Principe

36

Per aggiungere alla risposta di Dato, trovo che SRC_ATOP sia un filtro preferibile da moltiplicare poiché supporta meglio il canale alfa.

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

1
Su 2.3.x questo ti dà un cerchio pieno pieno in cui MULTIPLY conserva la trasparenza.
Azdev,

Se ho una matrice di colori e voglio impostare il colore su una matrice di colori su ciascuna barra di avanzamento
Principe

28

Android: indeterminateTint = "@ colore / progressbar"


basta usare l'attributo sopra nella barra di avanzamento: indeterminateTint = your color
Bhupinder Singh

La migliore risposta e sarebbe supportata anche per tutte le versioni
Pankaj Kumar

Questo è tutto ciò di cui hai bisogno, non queste risposte folli. Anche se altri trarrebbero beneficio dal blocco di codice completo.
StarWind0

7
indeterminateTint è disponibile per API 21 o successiva. Se questo funziona per te, fantastico!
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"/>


15
android:indeterminateTint="@color/yellow"

Questo è un lavoro per me, basta aggiungere questa riga al tuo codice XML progressBar


12

Questo è lavoro per me.

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

4
Disponibile dal livello API 21
viplezer

11

Per personalizzare ProgressBar circolare, dobbiamo creare un disegno indeterminato per mostrare la barra di avanzamento personalizzata

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

Dobbiamo includere il disegno nella barra di avanzamento come di seguito:

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

rotateil tag è mancante prima shape. Senza di essa, la barra di avanzamento sarà statica
Renan Bandeira,

@RenanBandeira puoi migliorare la risposta se è corretta
Akshay Mukadam

9

per me il tema non funzionava con accentColor. Ma ha funzionato con 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

Per integrare Muhamed Riyas M's risposta più votata di :

Rotazione più rapida

android:toDegrees="1080"

Anello più sottile

android:thicknessRatio="16"

Bianco chiaro

android:endColor="#80ffffff"

4

controlla questa risposta :

per me, queste due linee dovevano essere lì per funzionare e cambiare il colore:

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

PS: ma è disponibile solo da Android 21


4

Prova a utilizzare uno stile e imposta colorControlActivated troppo desiderato ProgressBar color.

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

Quindi imposta il tema di ProgressBar su un nuovo stile.

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

3

Aggiungi al tema della tua attività, elemento colorControlActivated , ad esempio:

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

Applica questo stile alla tua attività nel manifest:

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

2

Puoi farlo con una finestra di dialogo personalizzata abbastanza facilmente, riutilizzando l'xml da altre risposte:

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

Basta fare questo:

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

Puoi usare uno stile per cambiare il colore dei progressi come di seguito

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

e utilizzalo in ProgressBar come di seguito

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

Spero che sia d'aiuto.


1

Per tutti coloro che si chiedono come aumentare la velocità dei progressi personalizzati

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

Prende il valore del colore da Res / Values ​​/ Colors.xml -> colorAccent se lo si modifica, anche il colore progressBar cambia.


0

Impostato android:indeterminateDrawable="@drawable/progress_custom_rotate"

Utilizzare il codice seguente per la barra di avanzamento dell'anello circolare personalizzato

Copia il codice sottostante e crea "progress_custom_rotate.xml" nella cartella 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

Puoi cambiare il colore della barra di avanzamento usando il codice seguente:

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

Se ho una gamma di colori allora?
Principe
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.