Dessin personnalisé pour ProgressBar / ProgressDialog

128

En lisant la documentation limitée fournie par Google, j'ai le sentiment qu'il est possible de changer l'apparence (dessinable) d'un ProgressBar / ProgressDialog en créant simplement un nouveau style et en l'attribuant à la propriété style de ProgressBar. Mais je ne peux pas faire fonctionner cela correctement. Voici ce que j'ai fait jusqu'à présent:

J'ai créé une forme comme celle-ci (mp2.xml)

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="ring"
  android:innerRadiusRatio="4"
  android:thicknessRatio="4"
  android:useLevel="false">
 <size android:width="50dip" android:height="50dip" />
 <gradient android:type="sweep" android:useLevel="false" android:startColor="#300000ff" android:centerColor="#500000ff" android:endColor="#ff0000ff" />
</shape>

puis créé une animation (mp3.xml) comme celle-ci:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="30" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="30" android:toDegrees="60" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="60" android:toDegrees="90" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="90" android:toDegrees="120" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="120" android:toDegrees="150" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="150" android:toDegrees="180" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="180" android:toDegrees="210" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="210" android:toDegrees="240" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="240" android:toDegrees="270" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="270" android:toDegrees="300" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="300" android:toDegrees="330" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="330" android:toDegrees="360" android:repeatCount="1" />
 </item>
</animation-list>

puis créé un style (attrs.xml) comme celui-ci:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style parent="@android:style/Widget.ProgressBar" name="customProgressBar">
  <item name="android:progressDrawable">@anim/mp3</item>
 </style>
</resources>

et dans mon main.xml, j'ai défini le style comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent" android:drawingCacheQuality="high">
 <ProgressBar android:id="@+id/ProgressBar01"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" style="@style/customProgressBar"/>
</LinearLayout>

Mais il montre toujours le même dessinable qu'avant. Qu'est-ce que je fais mal?

android  progress-bar  progressdialog 
— Sam
source
Je viens de parcourir des échantillons et je suis tombé sur le vôtre après avoir lu ceci . Espérons que cela résout votre problème.
— reuscam
Je savais créer des formes / dégradé / animation. Celui que j'ai créé ci-dessus est basé sur la publication à laquelle vous faites référence (j'ai dû le changer un peu car il semble très saccadé et lent). J'espérais juste pouvoir réaliser ceci en utilisant le "style". Merci pour le rapport quand même
— Sam
Si vous souhaitez personnaliser complètement votre barre de progression et devenir vraiment fantaisiste, jetez un œil à cet article de blog . J'espère que ça aide!
— jagsaund

Réponses:

142

J'ai utilisé ce qui suit pour créer une barre de progression personnalisée.

Le fichier res/drawable/progress_bar_states.xmldéclare les couleurs des différents états:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <gradient
                    android:startColor="#000001"
                    android:centerColor="#0b131e"
                    android:centerY="0.75"
                    android:endColor="#0d1522"
                    android:angle="270"
            />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                        android:startColor="#234"
                        android:centerColor="#234"
                        android:centerY="0.75"
                        android:endColor="#a24"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#144281"
                    android:centerColor="#0b1f3c"
                    android:centerY="0.75"
                    android:endColor="#06101d"
                    android:angle="270"
                />
            </shape>
        </clip>
    </item>

</layer-list>

Et le code à l'intérieur de votre mise en page xml:

<ProgressBar android:id="@+id/progressBar"
    android:progressDrawable="@drawable/progress_bar_states"
    android:layout_width="fill_parent" android:layout_height="8dip" 
    style="?android:attr/progressBarStyleHorizontal" 
    android:indeterminateOnly="false" 
    android:max="100">
</ProgressBar>

Prendre plaisir!

— Jona
source
@YuliaRogovaya est-ce parce que les dessinables ne sont pas dans des éléments de clip? Je ne pouvais pas le faire fonctionner non plus; soupçonnez que l'élément de clip est la clé.
— Andrew Wyld
2
comment faire cela pour un ProgressDialog?
— Nezam
@Nezam Je ne peux pas vous donner de code ou d'échantillons exacts mais c'est ce que vous auriez besoin de faire. Fournissez un thème personnalisé à ProgressDialog. Le thème personnalisé définirait le style de la barre de progression.
— Jona
Ce serait bien de voir une capture d'écran de cette chose en action
— QED
@Jona Je sais que ça fait un moment, mais comment pourrais-je rendre ce dessin plus petit en hauteur ??
— leofontes
55

J'avais du mal à utiliser une boîte de dialogue de progression indéterminée avec la solution ici, après quelques travaux et essais et erreurs, je l'ai fait fonctionner.

Commencez par créer l'animation que vous souhaitez utiliser pour la boîte de dialogue de progression. Dans mon cas, j'ai utilisé 5 images.

../res/anim/progress_dialog_icon_drawable_animation.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_progress_dialog_drawable_1" android:duration="150" />
    <item android:drawable="@drawable/icon_progress_dialog_drawable_2" android:duration="150" />
    <item android:drawable="@drawable/icon_progress_dialog_drawable_3" android:duration="150" />
    <item android:drawable="@drawable/icon_progress_dialog_drawable_4" android:duration="150" />
    <item android:drawable="@drawable/icon_progress_dialog_drawable_5" android:duration="150" />
</animation-list>

Où vous souhaitez afficher un ProgressDialog:

dialog = new ProgressDialog(Context.this);
dialog.setIndeterminate(true);
dialog.setIndeterminateDrawable(getResources().getDrawable(R.anim.progress_dialog_icon_drawable_animation));
dialog.setMessage("Some Text");
dialog.show();

Cette solution est vraiment simple et a fonctionné pour moi, vous pouvez étendre ProgressDialog et le faire remplacer le dessinable en interne, cependant, c'était vraiment trop compliqué pour ce dont j'avais besoin donc je ne l'ai pas fait.

— aveugle
source
1
Merci d'avoir noté "dialog.setIndeterminateDrawable ()"
— scottyab
Existe-t-il un moyen d'avoir juste une image dans la boîte de dialogue, donc pas de message, mais un dessinable dans toute la boîte de dialogue?
— Diego
@Diego Je ne l'ai pas essayé, mais je ne vois pas pourquoi. Avez-vous essayé d'utiliser un dessin qui prendrait l'espace que vous vouliez (c'est-à-dire avait un rapport hauteur / largeur long) sans définir de texte dans la boîte de dialogue?
— blindstuff
40

Essayez de régler:

android:indeterminateDrawable="@drawable/progress"

Cela a fonctionné pour moi. Voici également le code pour 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="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>
— mudit
source
3
Si vous souhaitez utiliser un dessinable, insérez simplement android:drawable=la balise de rotation, puis supprimez la forme. Enfin quelqu'un qui répond à la question de la barre de progression tournante.
— MinceMan
2
Il définit la couleur mais la barre de progression ne tourne pas
— Crawler
Pour ajuster rapidement la vitesse de rotation android:toDegreespeut être réglée sur une valeur plus élevée. Le régler sur android:toDegrees="1080"augmentera la rotation en 3 fois.
— Levor
10

Votre style devrait ressembler à ceci:

<style parent="@android:style/Widget.ProgressBar" name="customProgressBar">
    <item name="android:indeterminateDrawable">@anim/mp3</item>
</style>
— Victor
source
6

Progression personnalisée avec échelle!

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:duration="150">
        <scale
            android:drawable="@drawable/face_no_smile_eyes_off"
            android:scaleGravity="center" />
    </item>
    <item android:duration="150">
        <scale
            android:drawable="@drawable/face_no_smile_eyes_on"
            android:scaleGravity="center" />
    </item>
    <item android:duration="150">
        <scale
            android:drawable="@drawable/face_smile_eyes_off"
            android:scaleGravity="center" />
    </item>
    <item android:duration="150">
        <scale
            android:drawable="@drawable/face_smile_eyes_on"
            android:scaleGravity="center" />
    </item>

</animation-list>
— Dmitry
source
5

Je fais votre code. Je peux courir mais j'ai besoin de modifier deux endroits:

  1. name="android:indeterminateDrawable" au lieu de android:progressDrawable

  2. modifier le nom attrs.xml ---> styles.xml

— Pengwang
source
vous modifiez votre android: startColor = "# 300000ff" en # FF00ff00, modifiez une autre couleur
— pengwang
0

Je ne suis pas sûr, mais dans ce cas, vous pouvez toujours utiliser un AlertDialog personnalisé complet en définissant un fichier de mise en page séparé dans la boîte de dialogue d'alerte et en définissant l'animation de votre imageview en utilisant une partie de votre code ci-dessus qui devrait également le faire!

— Jayshil Dave
source
0 
public class CustomProgressBar {
    private RelativeLayout rl;
    private ProgressBar mProgressBar;
    private Context mContext;
    private String color__ = "#FF4081";
    private ViewGroup layout;
    public CustomProgressBar (Context context, boolean isMiddle, ViewGroup layout) {
        initProgressBar(context, isMiddle, layout);
    }

    public CustomProgressBar (Context context, boolean isMiddle) {
        try {
            layout = (ViewGroup) ((Activity) context).findViewById(android.R.id.content).getRootView();
        } catch (Exception e) {
            e.printStackTrace();
        }
        initProgressBar(context, isMiddle, layout);
    }

    void initProgressBar(Context context, boolean isMiddle, ViewGroup layout) {
        mContext = context;
        if (layout != null) {
            int padding;
            if (isMiddle) {
                mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleSmall);
                // mProgressBar.setBackgroundResource(R.drawable.pb_custom_progress);//Color.parseColor("#55000000")
                padding = context.getResources().getDimensionPixelOffset(R.dimen.padding);
            } else {
                padding = context.getResources().getDimensionPixelOffset(R.dimen.padding);
                mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleSmall);
            }
            mProgressBar.setPadding(padding, padding, padding, padding);
            mProgressBar.setBackgroundResource(R.drawable.pg_back);
            mProgressBar.setIndeterminate(true);
                try {
                    color__ = AppData.getTopColor(context);//UservaluesModel.getAppSettings().getSelectedColor();
                } catch (Exception e) {
                    color__ = "#FF4081";
                }
                int color = Color.parseColor(color__);
//                color=getContrastColor(color);
//                color__ = color__.replaceAll("#", "");//R.color.colorAccent
                mProgressBar.getIndeterminateDrawable().setColorFilter(color, android.graphics.PorterDuff.Mode.SRC_ATOP);
            } 
            }

            RelativeLayout.LayoutParams params = new
                    RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            rl = new RelativeLayout(context);
            if (!isMiddle) {
                int valueInPixels = (int) context.getResources().getDimension(R.dimen.padding);
                lp.setMargins(0, 0, 0, (int) (valueInPixels / 1.5));//(int) Utils.convertDpToPixel(valueInPixels, context));
                rl.setClickable(false);
                lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
            } else {
                rl.setGravity(Gravity.CENTER);
                rl.setClickable(true);
            }
            lp.addRule(RelativeLayout.CENTER_IN_PARENT);
            mProgressBar.setScaleY(1.55f);
            mProgressBar.setScaleX(1.55f);
            mProgressBar.setLayoutParams(lp);

            rl.addView(mProgressBar);
            layout.addView(rl, params);
        }
    }

    public void show() {
        if (mProgressBar != null)
            mProgressBar.setVisibility(View.VISIBLE);
    }

    public void hide() {
        if (mProgressBar != null) {
            rl.setClickable(false);
            mProgressBar.setVisibility(View.INVISIBLE);
        }
    }
}

Et puis appelle 

customProgressBar = new CustomProgressBar (Activity, true);
customProgressBar .show();
— VV W
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.