Comment changer de couleur dans la barre de progression circulaire?

147

J'utilise la barre de progression circulaire sur Android. Je souhaite changer la couleur de ceci. j'utilise

"?android:attr/progressBarStyleLargeInverse" 

style. Alors, comment changer la couleur de la barre de progression.

Comment personnaliser le style? De plus, quelle est la définition du style?

mooongcle
la source

Réponses:

163

Dans le dossier res / drawable, mettez ceci:

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 startColoret endColorselon votre choix.

Maintenant, placez cela progress.xmldans ProgressBarle fond.

Comme ça

<ProgressBar
  android:id="@+id/ProgressBar01" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:indeterminateDrawable="@drawable/progress"
 />
Chirag
la source
1
cela ne fonctionne pas lorsque j'utilise une boîte de dialogue personnalisée comme en-tête de vue de liste. Une autre approche est-elle nécessaire?
Pankaj Kumar le
22
Cela crée une forme d'anneau vert, mais le spinner de ProgressBar est toujours visible.
mdupls
existe-t-il un moyen de faire bouger les couleurs tournantes dans une seule direction?
thepoosh
48
Au lieu de définir l'arrière-plan avec "android: background", utilisez plutôt "android: indeterminateDrawable =" @ drawable / progress ", comme le souligne une autre réponse
baekacaek
1
Utilisez des valeurs android: startColor = "# 447a29" android: endColor = "# 227a29" différentes afin qu'il ne forme pas un cercle statique.
Abhishek Sengupta
137

Pour API 21 et supérieur. Définissez simplement la propriété indeterminateTint. Comme:

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

Pour prendre en charge les appareils pré-API 21:

mProgressSpin.getIndeterminateDrawable()
                .setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );
Étudiant222
la source
2
avec style="?android:attr/progressBarStyle"ne fonctionne pas
user25
Si j'ai un tableau de couleurs et que je veux définir la couleur d'un tableau de couleurs sur chaque barre de progression
Prince
Cela a bien fonctionné pour moi, juste pour changer la couleur de la bague progressBar :)
Gastón Saillén
Merci d'avoir mis l'accent sur l'aspect des API
JamisonMan111
Si je mets cette couleur, cela colore l'anneau coupé en rotation, mais tout cela, donc il se transforme en un anneau complet pour que vous ne le voyiez pas bouger
Lucas Zanella
135

1.Créez d'abord un fichier xml dans un dossier pouvant être dessiné sous la ressource

nommé "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. puis créez une barre de progression à l'aide de l'extrait suivant

<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
la source
Salut Muhamed, j'utilise la roue de progression personnalisée, j'ai essayé de changer la couleur de la roue de progression au moment de l'exécution. je suis essayé pour, une fois que je clique sur un bouton, la progression commence. J'ai défini la couleur en vert. Une fois que la progression atteint 100%, je veux qu'il recommence, mais cette fois sa couleur doit être rouge. Mais, je ne pouvais pas faire ça ... si possible, aidez-moi
harikrishnan
1
Merci. Cela fonctionne à 100%. définir progress.xml sur android: indeterminateDrawable
Leo Nguyen
Quand j'ai essayé cela, cela a créé une bordure épaisse de cercle. Des idées pour réduire la frontière?
Tejas
Salut Tejas, Essayez de changer cette ligne android: thickRatio = "8" dans le progress.xml. Vous pouvez essayer différentes valeurs. J'espère que cela fonctionnera.
Muhamed Riyas M
Cela fonctionne mais au lieu de deux anneaux qui tournent l'un contre l'autre, j'obtiens juste un seul anneau. Une solution à cela?
AX
66

Vous pouvez changer la couleur par programme en utilisant ce code:

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

Si vous voulez changer la couleur de la barre de progression de ProgressDialog, vous pouvez utiliser ceci:

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
la source
Hé, comment vais-je connecter la barre de progression de ProgressDialog avec Progress.xml ??
Meghal Agrawal
Si j'ai un tableau de couleurs et que je veux définir la couleur d'un tableau de couleurs sur chaque barre de progression
Prince
36

Pour ajouter à la réponse de Dato, je trouve que SRC_ATOP est un filtre préférable pour multiplier car il prend mieux en charge le canal alpha.

ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.SRC_ATOP);
aikmanr
la source
1
Sur 2.3.x, cela vous donne un cercle plein plein où MULTIPLY préserve la transparence.
azdev
Si j'ai un tableau de couleurs et que je veux définir la couleur d'un tableau de couleurs sur chaque barre de progression
Prince
28

android: indeterminateTint = "@ color / progressbar"

Bhupinder Singh
la source
il suffit d'utiliser l'attribut ci-dessus dans la barre de progression: indeterminateTint = your color
Bhupinder Singh
Meilleure réponse et il prendrait en charge toutes les versions également
Pankaj Kumar
C'est tout ce dont vous avez besoin, pas ces réponses folles. Bien que d'autres bénéficieraient du bloc de code complet.
StarWind0
7
indeterminateTint est disponible pour l'API 21 ou version ultérieure. Si cela fonctionne pour vous, génial!
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"/>
Hardik Vasani
la source
15
android:indeterminateTint="@color/yellow"

Cela fonctionne pour moi, ajoutez simplement cette ligne à votre code xml progressBar

Yıldırım
la source
12

C'est du travail pour moi.

<ProgressBar
android:id="@+id/ProgressBar01" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="@color/black"/>
Kaloglu
la source
4
Disponible à partir du niveau d'API 21
viplezer
11

Pour personnaliser ProgressBar circulaire, nous devons créer un indeterminateDrawable pour afficher la barre de progression personnalisée

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

Nous devons inclure drawable dans la barre de progression comme ci-dessous:

<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
la source
rotatela balise est manquante avant shape. Sans cela, la barre de progression sera statique
Renan Bandeira
@RenanBandeira, vous pouvez améliorer la réponse si elle est correcte
Akshay Mukadam
9

pour moi, le thème ne fonctionnait pas avec accentColor. Mais cela a fonctionné avec 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
la source
4

Pour compléter la réponse la plus votée de Muhamed Riyas M :

Rotation plus rapide

android:toDegrees="1080"

Anneau plus mince

android:thicknessRatio="16"

Blanc clair

android:endColor="#80ffffff"
Suragch
la source
4

Vérifiez cette réponse :

pour moi, ces deux lignes devaient être là pour que ça marche et change la couleur:

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

PS: mais il n'est disponible qu'à partir d'Android 21

Amin Keshavarzian
la source
4

Essayez d'utiliser un style et définissez la couleur ProgressBar trop souhaitée pour colorControlActivated.

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

Définissez ensuite le thème de ProgressBar sur un nouveau style.

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/progressColor"
 />
this.Mitch
la source
3

Ajoutez à votre thème d'activité, l'élément colorControlActivated , par exemple:

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

Appliquez ce style à votre activité dans le manifeste:

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

Vous pouvez le faire avec une boîte de dialogue personnalisée assez facilement, en réutilisant le xml d'autres réponses:

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

Faites juste ceci:

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
la source
2

Vous pouvez utiliser un style pour changer la couleur de la progression comme ci-dessous

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

et utilisez-le dans ProgressBar comme ci-dessous

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

J'espère que ça aide.

Rahul
la source
1

Pour tous ceux qui se demandent comment augmenter la vitesse de progression personnalisée

  <?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
la source
0

Il prend la valeur de couleur de votre Res / Values ​​/ Colors.xml -> colorAccent si vous le changez, la couleur de votre progressBar change également.

Nocturne
la source
0

Ensemble android:indeterminateDrawable="@drawable/progress_custom_rotate"

Utilisez le code ci-dessous pour la barre de progression d'anneau circulaire personnalisée

Copiez le code ci-dessous et créez "progress_custom_rotate.xml" dans le dossier 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>
Bhavesh Moradiya
la source
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" />
Exception de pointeur nul
la source
-1

Vous pouvez changer la couleur de votre barre de progression en utilisant le code ci-dessous:

progressBar.getProgressDrawable().setColorFilter(
    getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);
user3273957
la source
Si j'ai un tableau de couleurs alors?
Prince