web-dev-qa-db-fra.com

Android change la couleur de la barre de progression horizontale

J'ai mis la barre de progression horizontale.

Je voudrais changer la couleur de progression du jaune.

<ProgressBar 
    Android:id="@+id/progressbar" 
    Android:layout_width="80dip" 
    Android:layout_height="20dip"  
    Android:focusable="false" 
    style="?android:attr/progressBarStyleHorizontal" />

Le problème, c’est que la couleur de progression est différente d’un appareil à l’autre ... Je souhaite donc que la couleur de progression soit corrigée.

androidcolorsprogress-barandroid-progressbar
143
Nishant Shah

Je l'ai copiée depuis l'une de mes applications, il y a donc quelques attributs supplémentaires, mais je devrais vous en donner l'idée C'est à partir de la mise en page qui a la barre de progression:

<ProgressBar
    Android:id="@+id/ProgressBar"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:indeterminate="false"
    Android:maxHeight="10dip"
    Android:minHeight="10dip"
    Android:progress="50"
    Android:progressDrawable="@drawable/greenprogress" />

Créez ensuite un nouveau dessin avec quelque chose de similaire au suivant (dans ce cas, greenprogress.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:id="@Android:id/background">
    <shape>
        <corners Android:radius="5dip" />
        <gradient
                Android:startColor="#ff9d9e9d"
                Android:centerColor="#ff5a5d5a"
                Android:centerY="0.75"
                Android:endColor="#ff747674"
                Android:angle="270"
        />
    </shape>
</item>

<item Android:id="@Android:id/secondaryProgress">
    <clip>
        <shape>
            <corners Android:radius="5dip" />
            <gradient
                    Android:startColor="#80ffd300"
                    Android:centerColor="#80ffb600"
                    Android:centerY="0.75"
                    Android:endColor="#a0ffcb00"
                    Android:angle="270"
            />
        </shape>
    </clip>
</item>
<item
    Android:id="@Android:id/progress"
>
    <clip>
        <shape>
            <corners
                Android:radius="5dip" />
            <gradient
                Android:startColor="#33FF33"
                Android:endColor="#008000"
                Android:angle="270" />
        </shape>
    </clip>
</item>

</layer-list>

Vous pouvez changer les couleurs au besoin, cela vous donnera une barre de progression verte. 

332
Ryan

Une solution plus simple:

progess_drawable_blue

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:id="@Android:id/background">
    <shape>
        <solid
                Android:color="@color/disabled" />
    </shape>
</item>

<item
    Android:id="@Android:id/progress">
    <clip>
        <shape>
            <solid
                Android:color="@color/blue" />
        </shape>
    </clip>
</item>

</layer-list>
94
Nitin Saxena

Si vous souhaitez uniquement modifier la couleur de la barre de progression, vous pouvez simplement utiliser un filtre de couleur dans la méthode onCreate () de votre activité:

ProgressBar progressbar = (ProgressBar) findViewById(R.id.progressbar);
int color = 0xFF00FF00;
progressbar.getIndeterminateDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);
progressbar.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);

Idée de ici .

Vous devez uniquement faire cela pour les versions antérieures à Lollipop. Sur Lollipop, vous pouvez utiliser l'attribut de style colorAccent.

34
amfcosta

Créez simplement un style dans values/styles.xml.

<style name="ProgressBarStyle">
    <item name="colorAccent">@color/greenLight</item>
</style>

Puis définissez ce style comme thème ProgressBar. 

<ProgressBar
    Android:theme="@style/ProgressBarStyle"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"/>

et peu importe votre barre de progression est horizontale ou circulaire . C'est tout.

24
Ali Zeynali

pour les API de niveau 21 ou supérieur, il suffit d'utiliser

Android:progressBackgroundTint="@color/yourBackgroundColor"
Android:progressTint="@color/yourColor"
9
mohammad mousavi

Il y a 3 façons de résoudre cette question:

  1. Comment ajuster la couleur de la barre de progression de manière déclarative
  2. Comment ajuster la couleur de la barre de progression par programme, mais choisir la couleur parmi différentes couleurs prédéterminées déclarées avant la compilation
  3. Comment ajuster la couleur de la barre de progression par programme et également créer la couleur par programme.

En particulier, il y a beaucoup de confusion autour des numéros 2 et 3, comme le montrent les commentaires sur la réponse de amfcosta. Cette réponse produira des résultats de couleur imprévisibles chaque fois que vous souhaitez définir la barre de progression sur autre chose que les couleurs primaires, car elle ne modifie que la couleur d'arrière-plan, et la zone de "plan" de la barre de progression réelle sera toujours une superposition jaune avec une opacité réduite. Par exemple, si vous utilisez cette méthode pour définir l’arrière-plan sur le fond violet foncé, vous obtiendrez une couleur de "clip" de barre de progression d’une couleur rose folle résultant du mélange violet et jaune foncé via une valeur alpha réduite.

De toute façon, Ryan répond parfaitement à la question n ° 1 et Štarke répond à la plupart des questions n ° 3, mais pour ceux qui recherchent une solution complète aux points n ° 2 et n ° 3:

Comment ajuster la couleur de la barre de progression par programme, mais choisir la couleur parmi une couleur prédéterminée déclarée en XML

res/drawable/my_progressbar.xml :

Créez ce fichier mais changez les couleurs dans my_progress et my_secondsProgress:

(REMARQUE: il ne s'agit que d'une copie du fichier XML définissant le ProgressBar du SDK Android par défaut, mais j'ai modifié les identifiants et les couleurs. L'original est nommé progress_horizontal.)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

<item Android:id="@+id/my_progress_background">
    <shape>
        <corners Android:radius="5dip" />
        <gradient
            Android:startColor="#ff9d9e9d"
            Android:centerColor="#ff5a5d5a"
            Android:centerY="0.75"
            Android:endColor="#ff747674"
            Android:angle="270"
            />
    </shape>
</item>

<item Android:id="@+id/my_secondaryProgress">
    <clip>
        <shape>
            <corners Android:radius="5dip" />
            <gradient
                Android:startColor="#80ff171d"
                Android:centerColor="#80ff1315"
                Android:centerY="0.75"
                Android:endColor="#a0ff0208"
                Android:angle="270"
                />
        </shape>
    </clip>
</item>

<item Android:id="@+id/my_progress">
    <clip>
        <shape>
            <corners Android:radius="5dip" />
            <gradient
                Android:startColor="#7d2afdff"
                Android:centerColor="#ff2afdff"
                Android:centerY="0.75"
                Android:endColor="#ff22b9ba"
                Android:angle="270"
                />
        </shape>
    </clip>
</item>

Dans votre Java :

final Drawable drawable;
int sdk = Android.os.Build.VERSION.SDK_INT;
    if(sdk < 16) {
        drawable =  ctx.getResources().getDrawable(R.drawable.my_progressbar);
    } else {
        drawable = ContextCompat.getDrawable(ctx, R.drawable.my_progressbar);
    }
progressBar.setProgressDrawable(drawable)

Comment ajuster la couleur de la barre de progression par programme et également créer la couleur par programme

EDIT: J'ai trouvé le temps de résoudre ce problème correctement. Ma réponse précédente laissait cela un peu ambigu.

Une barre de progression est composée de 3 éléments dessinables dans un objet LayerDrawable. 

  1. La couche 1 est le fond
  2. La couche 2 est la couleur de progression secondaire
  3. La couche 3 est la couleur principale de la barre de progression

Dans l'exemple ci-dessous, je vais changer la couleur de la barre de progression principale en cyan.

//Create new ClipDrawable to replace the old one
float pxCornerRadius = viewUtils.convertDpToPixel(5);
final float[] roundedCorners = new float[] { pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius };
ShapeDrawable shpDrawable = new ShapeDrawable(new RoundRectShape(roundedCorners, null, null));
shpDrawable.getPaint().setColor(Color.CYAN);
final ClipDrawable newProgressClip = new ClipDrawable(shpDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);

//Replace the existing ClipDrawable with this new one
final LayerDrawable layers = (LayerDrawable) progressBar.getProgressDrawable();
layers.setDrawableByLayerId(R.id.my_progress, newProgressClip);

Cet exemple lui a donné une couleur unie. Vous pouvez définir une couleur dégradée en remplaçant

shpDrawable.getPaint().setColor(Color.CYAN);

avec

Shader shader = new LinearGradient(0, 0, 0, progressBar.getHeight(), Color.WHITE, Color.BLACK, Shader.TileMode.CLAMP);
shpDrawable.getPaint().setShader(shader);

À votre santé.

-Lance

5
lance.dolan

Pour ceux qui cherchent comment le faire par programme:

    Drawable bckgrndDr = new ColorDrawable(Color.RED);
    Drawable secProgressDr = new ColorDrawable(Color.GRAY);
    Drawable progressDr = new ScaleDrawable(new ColorDrawable(Color.BLUE), Gravity.LEFT, 1, -1);
    LayerDrawable resultDr = new LayerDrawable(new Drawable[] { bckgrndDr, secProgressDr, progressDr });
    //setting ids is important
    resultDr.setId(0, Android.R.id.background);
    resultDr.setId(1, Android.R.id.secondaryProgress);
    resultDr.setId(2, Android.R.id.progress);

Définir les identifiants sur drawables est crucial et veille à préserver les limites et l'état actuel de la barre de progression

2
Štarke

La solution la plus simple que j'ai découverte ressemble à ceci:

<item name="colorAccent">@color/white_or_any_color</item>

Placez ce qui précède dans le fichier styles.xml dans le dossier res > values.

NOTE: / Si vous utilisez une autre couleur d'accent, alors les solutions précédentes devraient être bonnes à utiliser.

API 21 ou SUPÉRIEUR

2
Sazid

Vous me donnez vraiment mal à la tête. Ce que vous pouvez faire est de rendre votre liste de calques dessinable via xml en premier (ce qui signifie un arrière-plan en tant que premier calque, dessinable représentant la progression secondaire en tant que deuxième couche et un autre dessinable représentant la progression principale en tant que le dernier calque), puis modifiez la couleur du code en procédant comme suit:

public void setPrimaryProgressColor(int colorInstance) {
      if (progressBar.getProgressDrawable() instanceof LayerDrawable) {
        Log.d(mLogTag, "Drawable is a layer drawable");
        LayerDrawable layered = (LayerDrawable) progressBar.getProgressDrawable();
        Drawable circleDrawableExample = layered.getDrawable(<whichever is your index of Android.R.id.progress>);
        circleDrawableExample.setColorFilter(colorInstance, PorterDuff.Mode.SRC_IN);
        progressBar.setProgressDrawable(layered);
    } else {
        Log.d(mLogTag, "Fallback in case it's not a LayerDrawable");
        progressBar.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);
    }
}

Cette méthode vous donnera la meilleure flexibilité pour déclarer la mesure de votre dessin d'origine sur le xml, SANS MODIFICATION APRES SA STRUCTURE, en particulier si vous avez besoin du dossier d'écran du fichier xml spécifique, puis modifiez SEULEMENT LA COULEUR via le code. Pas de ré-instanciation d'un nouveau ShapeDrawable à partir de zéro.

1
Pier Betos

La couleur de ProgressBar peut être modifiée comme suit:

/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorAccent">#FF4081</color>
</resources>

/res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorAccent">@color/colorAccent</item>
</style>

onCreate:

progressBar = (ProgressBar) findViewById(R.id.progressBar);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Lollipop) {
    Drawable drawable = progressBar.getIndeterminateDrawable().mutate();
    drawable.setColorFilter(ContextCompat.getColor(this, R.color.colorAccent), PorterDuff.Mode.SRC_IN);
    progressBar.setIndeterminateDrawable(drawable);
}
1
Milan Hlinák

Créez une ressource attirable quel que soit l'arrière-plan dont vous avez besoin. Dans mon cas, je l'ai nommé bg_custom_progressbar.xml.

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape Android:shape="rectangle" >
        <corners Android:radius="5dp"/>

        <gradient
            Android:angle="180"
            Android:endColor="#DADFD6"
            Android:startColor="#AEB9A3" />
    </shape>
</item>
<item>
    <clip>
        <shape Android:shape="rectangle" >
            <corners Android:radius="5dp" />

            <gradient
                Android:angle="180"
                Android:endColor="#44CF4A"
                Android:startColor="#2BB930" />
        </shape>
    </clip>
</item>
<item>
    <clip>
        <shape Android:shape="rectangle" >
            <corners Android:radius="5dp" />

            <gradient
                Android:angle="180"
                Android:endColor="#44CF4A"
                Android:startColor="#2BB930" />
        </shape>
    </clip>
</item>

Ensuite, utilisez cet arrière-plan personnalisé comme

 <ProgressBar
                Android:id="@+id/progressBarBarMenuHome"
                style="?android:attr/progressBarStyleHorizontal"
                Android:layout_width="match_parent"
                Android:layout_height="20dp"
                Android:layout_marginStart="10dp"
                Android:layout_marginEnd="10dp"
                Android:layout_marginBottom="6dp"
                Android:indeterminate="false"
                Android:max="100"
                Android:minWidth="200dp"
                Android:minHeight="50dp"
                Android:progress="10"
                Android:progressDrawable="@drawable/bg_custom_progressbar" />

Cela fonctionne bien pour moi

0
Juyel Rana

Cela a fonctionné pour moi. pour API de niveau 21 et supérieur 

 Android:indeterminateTint="@color/white"
0
Ghanshyam Nayma

les réponses ci-dessus changent toute la couleur de fond et il est ambigu de changer la hauteur de la barre de progression à un maximum, ce qui ne peut pas changer en XML. Un meilleur moyen de changer uniquement l’état de la barre de progression indiquant le nombre de tâches complétées est de 20% de couleur rouge, 50% de couleur jaune et 70% de couleur verte. vous pouvez le faire par programme en Java.

partagez votre réponse si vous avez une autre solution.

0
Mubashar

final LayerDrawable layers = (LayerDrawable) progressBar.getProgressDrawable (); layers.getDrawable (2) .setColorFilter (color, PorterDuff.Mode.SRC_IN);

0
user3135773