Gradient de couleur sur ProgressBar

Version imprimable

24/09/2016, 19h42
Deamons

Gradient de couleur sur ProgressBar

Hello,

J'aurais aimé savoir s'il était possible sur Android, de manière plus ou moins native, de changer dynamiquement la couleur d'une progressBar à partir d'un gradient de couleur et en fonction du pourcentage de progression ?

Par exemple, quand la valeur de progression de la barre est entre 0 et 50%, on a une multitude de teintes entre le Rouge et le Orange, et quand la progression de la barre est entre 50% et 100%, on a une multitude de teintes entre le Orange et le Vert.

Est-ce géré par Android ou bien va-t-il falloir que je code cette fonctionnalité from scratch ?

Merci !
25/09/2016, 16h23
nicroman

Alors je ne veux pas dire de bétise, mais dans Android, une progress bar n'est ni plus ni moins qu'un "drawable".
Ce drawable peut donc parfaitement être un gradient dans le genre...

Par contre, un double gradient aucune idée.

Bonjour;
Effectivement, tu peux modifier ton progressBar en fonction d'un pourcentage.
Je le fait dans une application actuellement pour demander à l'utilisateur, la valeur de sa douleur: de bleu (0) à rouge (10)
Si tu patiente ce soir, je te mets le code (je suis au boulot, je n'ai pas ma machine perso)

Edit:
pour l'utilisation d'une progressBar, voila comment je m'y suis pris. Dans mon layout, j'ai placé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
                <SeekBar
                    android:id="@+id/Douleur"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:max="10"
                    android:progress="0"
                    android:progressDrawable="@drawable/progress"
                    android:thumbOffset="10dp"
                    android:thumb="@drawable/curseur"
                    android:paddingEnd="6dip"
                    android:paddingStart="6dip" />

Mon @drawable/progress:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background">
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />
                <gradient
                    android:angle="0"
                    android:startColor="@color/min_douleur"
                    android:centerX="0.5"
                    android:endColor="@color/max_douleur"/>
            </shape>
        </item>
        <item>
            <clip>
                <shape android:shape="rectangle" >
                    <corners android:radius="5dp" />
                    <gradient
 
                        android:startColor="@color/min_douleur"
                        android:centerY="0.5"
                        android:endColor="@color/max_douleur"/>
                </shape>
            </clip>
        </item>
        <item android:state_pressed="true">
            <shape android:shape="rectangle" >
                <corners android:radius="5dp"/>
                <gradient
 
                    android:startColor="@color/min_douleur"
                    android:centerY="0.5"
                    android:endColor="@color/max_douleur"/>
            </shape>
        </item>
</selector>

les couleurs min et max sont simplement dans le fichier des couleurs, et y font réréfences.
Le drawable/curseur est un petit png de ma confection qu'android-studio a mis à la bonne taille..

Pour le code, à présent:
Pour info, et oui, selon la douleur j'ai une indication en chiffre par des radio-bouton qui s'active en même temps que la position de la seekbarr

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        final SeekBar seekBar;
        seekBar = (SeekBar) findViewById(R.id.Douleur);
        // on met le premier bouton à "true"
((RadioButton) rg.getChildAt(0)).setChecked(true);
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){
public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton rEnCours=(RadioButton)findViewById(checkedId);
seekBar.setProgress(checkedId);
            }
        });

        // gestion de la seekbarr de la douleur
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                // à partir de la on change l'état des radio bouton quand la seekbar change
((RadioButton) rg.getChildAt(progress)).setChecked(true);
            }

        });
.../...suite du code

Voila, si cela peut t'aider.
Cordialement.

rectification:
je n'avais pas tout compris.
pour faire moitié/moitié, je placerai ç dans le layout.
Code:

1 2 3 4 5 6 7 <gradient android:angle="0" android:startColor="@color/min_douleur" android:centerX="0.5" android:endColor="@color/max_douleur"/>
et je couperai en trois et non en deux comme j'ai fait (android:centerX="0,5")

Cherche de ce côté.

06/10/2016, 17h00
Deamons

1 pièce(s) jointe(s)

Hello,

Merci de ta réponse !

Malheureusement, ce n'est pas exactement ce que je souhaite, et je pense que je me suis mal exprimé.

En fait, la couleur de la progressBar doit être une couleur unie.
C'est juste que la teinte change en fonction de la valeur du pourcentage.

Prenons ce tableau comme base :
Pièce jointe 222098

Je souhaiterais que tous les 2% de la progressBar, on change la teinte de la progressBar avec la couleur correspondante sur le tableau.

Mais j'imagine que c'est un fonctionnement qu'il faut que j'établisse moi-même, du coup.
07/10/2016, 10h25
rsuinux

Effectivement, je pense qu'il va falloir réécrire la méthode .
Cela dépasse un peu mes compétences.
Mais le sujet m'intéresse.
07/10/2016, 17h09
grunk
Tu peux spécifier une couleur à la progressBar avec :

Code:

progressBar.getProgressDrawable().setColorFilter(Color.RED, android.graphics.PorterDuff.Mode.SRC_IN); // ici en rouge

voir une teinte si API >= 21 :

Code:

progressBar.setProgressTintList(ColorStateList.valueOf(Color.RED));

Donc tu devrais être en mesure de faire quelque chose comme :
Code:

1 2 3 progressBar.setProgress(value); // value entre 0 et 100 int color = getGradient(value); progressBar.getProgressDrawable().setColorFilter(color, android.graphics.PorterDuff.Mode.SRC_IN);
Avec la génération de couleur :
Code:

1 2 3 4 int getGradient(int value){ double val = value / 100; return Color.HSVToColor(new float[]{(float)val*120f,1f,1f}); }