Discussion :

[Deamons]

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 !

[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.

[rsuinux]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[rsuinux]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

[Deamons]

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 :


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.

[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.

[grunk]

Tu peux spécifier une couleur à la progressBar avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

voir une teinte si API >= 21 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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