web-dev-qa-db-fra.com

Comment personnaliser une barre de progression sous Android

Je travaille sur une application dans laquelle je souhaite afficher une ProgressBar, mais je souhaite remplacer la valeur par défaut Android ProgressBar.

Alors, comment puis-je personnaliser la ProgressBar?

Ai-je besoin de graphiques et d'animations pour cela?

J'ai lu le post suivant mais je ne pouvais pas le faire fonctionner:

Barre de progression personnalisée Android

javaandroiduser-interfacecustom-controlsandroid-progressbar
131
user2446494

Personnaliser une ProgressBar nécessite de définir l'attribut ou les propriétés pour l'arrière-plan et la progression de votre barre de progression.

Créez un fichier XML nommé customprogressbar.xml dans votre dossier res->drawable:

custom_progressbar.xml 

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

    <!-- Define the background properties like color etc -->
    <item Android:id="@Android:id/background">
    <shape>
        <gradient
                Android:startColor="#000001"
                Android:centerColor="#0b131e"
                Android:centerY="1.0"
                Android:endColor="#0d1522"
                Android:angle="270"
        />
    </shape>
   </item>

  <!-- Define the progress properties like start color, end color etc -->
  <item Android:id="@Android:id/progress">
    <clip>
        <shape>
            <gradient
                Android:startColor="#007A00"
                Android:centerColor="#007A00"
                Android:centerY="1.0"
                Android:endColor="#06101d"
                Android:angle="270"
            />
        </shape>
    </clip>
    </item>
</layer-list>

Maintenant, vous devez définir la propriété progressDrawable dans customprogressbar.xml (drawable)

Vous pouvez le faire dans le fichier XML ou dans l'activité (au moment de l'exécution).

Procédez comme suit dans votre XML:

<ProgressBar
    Android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    Android:progressDrawable="@drawable/custom_progressbar"         
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content" />

Au moment de l'exécution, procédez comme suit 

// Get the Drawable custom_progressbar                     
    Drawable draw=res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawable
    progressBar.setProgressDrawable(draw);

Edit: mise en page XML corrigée

260
user2446474

dans votre xml

<ProgressBar
        Android:id="@+id/progressBar1"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        style="@style/CustomProgressBar" 
        Android:layout_margin="5dip" />

Et en res/values/styles.xml:

<resources> 
        <style name="CustomProgressBar" parent="Android:Widget.ProgressBar.Horizontal">
          <item name="Android:indeterminateOnly">false</item>
          <item name="Android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
          <item name="Android:minHeight">10dip</item>
          <item name="Android:maxHeight">20dip</item>
        </style>       
    <style name="AppTheme" parent="Android:Theme.Light" />
</resources>

Et custom_progress_bar_horizontal est un fichier XML stocké dans un dossier pouvant être dessiné qui définit votre barre de progression personnalisée. Pour plus de détails voir ce blog .

J'espère que cela t'aidera.

30
Gunaseelan

En cas de complexe ProgressBar comme celui-ci,

enter image description here

utilisez ClipDrawable. 

REMARQUE: je n'ai pas utilisé ProgressBar ici dans cet exemple. J'ai atteint cela en utilisant ClipDrawable en coupant l'image avec Animation.

Drawable qui coupe une autre Drawable en fonction du niveau actuel de cette Drawable. Vous pouvez contrôler le degré de largeur et de hauteur de l'enfant Drawable en fonction du niveau, ainsi qu'une gravité permettant de contrôler l'emplacement du conteneur dans son ensemble. Most often used to implement things like progress bars, en augmentant le niveau du dessin avec setLevel().

NOTE: Le dessin est complètement coupé et n'est pas visible quand le niveau est 0 et complètement révélé lorsque le niveau est 10 000.

J'ai utilisé ces deux images pour rendre cette CustomProgressBar.

scall.png

scall.png

ballon_progress.png

ballon_progress.png

MainActivity.Java

public class MainActivity extends ActionBarActivity {

private EditText etPercent;
private ClipDrawable mImageDrawable;

// a field in your class
private int mLevel = 0;
private int fromLevel = 0;
private int toLevel = 0;

public static final int MAX_LEVEL = 10000;
public static final int LEVEL_DIFF = 100;
public static final int DELAY = 30;

private Handler mUpHandler = new Handler();
private Runnable animateUpImage = new Runnable() {

    @Override
    public void run() {
        doTheUpAnimation(fromLevel, toLevel);
    }
};

private Handler mDownHandler = new Handler();
private Runnable animateDownImage = new Runnable() {

    @Override
    public void run() {
        doTheDownAnimation(fromLevel, toLevel);
    }
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    etPercent = (EditText) findViewById(R.id.etPercent);

    ImageView img = (ImageView) findViewById(R.id.imageView1);
    mImageDrawable = (ClipDrawable) img.getDrawable();
    mImageDrawable.setLevel(0);
}

private void doTheUpAnimation(int fromLevel, int toLevel) {
    mLevel += LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel <= toLevel) {
        mUpHandler.postDelayed(animateUpImage, DELAY);
    } else {
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

private void doTheDownAnimation(int fromLevel, int toLevel) {
    mLevel -= LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel >= toLevel) {
        mDownHandler.postDelayed(animateDownImage, DELAY);
    } else {
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

public void onClickOk(View v) {
    int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100;

    if (toLevel == temp_level || temp_level > MAX_LEVEL) {
        return;
    }
    toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel;
    if (toLevel > fromLevel) {
        // cancel previous process first
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;

        mUpHandler.post(animateUpImage);
    } else {
        // cancel previous process first
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;

        mDownHandler.post(animateDownImage);
    }
}
}

activity_main.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:paddingLeft="16dp"
Android:paddingRight="16dp"
Android:paddingTop="16dp"
Android:paddingBottom="16dp"
Android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal">

    <EditText
        Android:id="@+id/etPercent"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:inputType="number"
        Android:maxLength="3" />

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Ok"
        Android:onClick="onClickOk" />

</LinearLayout>

<FrameLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center">

    <ImageView
        Android:id="@+id/imageView2"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:src="@drawable/scall" />

    <ImageView
        Android:id="@+id/imageView1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/clip_source" />

</FrameLayout>

clip_source.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:clipOrientation="vertical"
    Android:drawable="@drawable/ballon_progress"
    Android:gravity="bottom" />

En cas de complexe HorizontalProgressBar, il suffit de changer cliporientation dans clip_source.xml comme ceci,

Android:clipOrientation="horizontal"

Vous pouvez télécharger la démo complète à partir de ici .

30
Jaydipsinh Zala

La personnalisation de la couleur de la barre de progression, notamment en cas de type de filage, nécessite un fichier XML et des codes d’initiation dans leurs fichiers Java respectifs.

Créez un fichier XML et nommez-le progressbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center"
    tools:context=".Radio_Activity" >

    <LinearLayout
        Android:id="@+id/progressbar"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" >

        <ProgressBar
            Android:id="@+id/spinner"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" >
        </ProgressBar>
    </LinearLayout>

</LinearLayout>

Utilisez le code suivant pour obtenir le disque dans la couleur attendue. Ici, nous utilisons le code hexadécimal pour afficher le disque en couleur bleue.

Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner);
spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"),
                Android.graphics.PorterDuff.Mode.MULTIPLY);
9
user4125837

Il existe deux types de barres de progression appelées barre de progression déterminée (durée fixe) et barre de progression indéterminée (durée inconnue). 

Les tirages pour les deux types de barres de progression peuvent être personnalisés en définissant dessin comme ressources xml. Pour plus d'informations sur les styles et la personnalisation de la barre de progression, visitez la page http://www.zoftino.com/Android-progressbar-and-custom-progressbar-examples .

Personnalisation de la barre de progression fixe ou horizontale:

Au-dessous de xml, vous trouverez une ressource utilisable pour la personnalisation de la barre de progression horizontale.

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/background"
        Android:gravity="center_vertical|fill_horizontal">
        <shape Android:shape="rectangle"
            Android:tint="?attr/colorControlNormal">
            <corners Android:radius="8dp"/>
            <size Android:height="20dp" />
            <solid Android:color="#90caf9" />
        </shape>
    </item>
    <item Android:id="@Android:id/progress"
        Android:gravity="center_vertical|fill_horizontal">
        <scale Android:scaleWidth="100%">
            <shape Android:shape="rectangle"
                Android:tint="?attr/colorControlActivated">
                <corners Android:radius="8dp"/>
                <size Android:height="20dp" />
                <solid Android:color="#b9f6ca" />
            </shape>
        </scale>
    </item>
</layer-list>

Personnalisation de la barre de progression indéterminée

Au-dessous de xml, vous trouverez une ressource utilisable pour la personnalisation de la barre de progression circulaire. 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/progress"
        Android:top="16dp"
        Android:bottom="16dp">
                <rotate
                    Android:fromDegrees="45"
                    Android:pivotX="50%"
                    Android:pivotY="50%"
                    Android:toDegrees="315">
                    <shape Android:shape="rectangle">
                        <size
                            Android:width="80dp"
                            Android:height="80dp" />
                        <stroke
                            Android:width="6dp"
                            Android:color="#b71c1c" />
                    </shape>
                </rotate>           
    </item>
</layer-list>
6
Arnav Rao

Créer une barre de progression personnalisée comme Hotstar.

  1. Ajoutez une barre de progression sur le fichier de mise en page et définissez indeterminateDrawable avec le fichier pouvant être dessiné.

activity_main.xml

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_centerVertical="true"
    Android:layout_centerHorizontal="true"
    Android:id="@+id/player_progressbar"
    Android:indeterminateDrawable="@drawable/custom_progress_bar"
    />
  1. Créer un nouveau fichier XML dans res\drawable

custom_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
    <rotate  xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:duration="2000"
    Android:fromDegrees="0"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:toDegrees="1080" >

    <shape
        Android:innerRadius="35dp"
        Android:shape="ring"
        Android:thickness="3dp"
        Android:useLevel="false" >
       <size
           Android:height="80dp"
           Android:width="80dp" />

       <gradient
            Android:centerColor="#80b7b4b2"
            Android:centerY="0.5"
            Android:endColor="#f4eef0"
            Android:startColor="#00938c87"
            Android:type="sweep"
            Android:useLevel="false" />
    </shape>

</rotate>
4
Rajesh Shetty

Le moyen le plus simple de créer une barre de progression sous Android:

  1. Initialiser et afficher le dialogue:

    MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
progressdialog.show();

  2. Créer une méthode:

    public class MyProgressDialog extends AlertDialog {
      public MyProgressDialog(Context context) {
          super(context);
          getWindow().setBackgroundDrawable(new ColorDrawable(Android.graphics.Color.TRANSPARENT));
      }

      @Override
      public void show() {
          super.show();
          setContentView(R.layout.dialog_progress);
      }
}

  3. Créer une mise en page XML:

    <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
  xmlns:tools="http://schemas.Android.com/tools"
  Android:layout_width="match_parent"
  Android:layout_height="match_parent"
  Android:background="@Android:color/transparent"
  Android:clickable="true">

    <RelativeLayout
         Android:layout_width="wrap_content"
         Android:layout_height="wrap_content"
         Android:layout_centerInParent="true">

      <ProgressBar
         Android:id="@+id/progressbarr"
         Android:layout_width="@dimen/eightfive"
         Android:layout_height="@dimen/eightfive"
         Android:layout_centerInParent="true"
        Android:indeterminateDrawable="@drawable/progresscustombg" />

      <TextView
         Android:layout_width="wrap_content"
         Android:layout_height="wrap_content"
         Android:layout_centerHorizontal="true"
         Android:layout_below="@+id/progressbarr"
         Android:layout_marginTop="@dimen/_3sdp"
         Android:textColor="@color/white"
         Android:text="Please wait"/>
    </RelativeLayout>
</RelativeLayout>

  4. Créez la forme progresscustombg.xml et mettez res/drawable: 

    <?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="20"
       Android:useLevel="false" >
        <size
            Android:height="@dimen/eightfive"
            Android:width="@dimen/eightfive" />

        <gradient
            Android:centerY="0.50"
            Android:endColor="@color/color_green_icash"
            Android:startColor="#FFFFFF"
            Android:type="sweep"
            Android:useLevel="false" />
    </shape>

</rotate>
3
Jaydeep Dobariya

Pour utiliser des dessins personnalisés:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fromDegrees="0"
Android:toDegrees="360"
Android:drawable="@drawable/my_drawable"
Android:pivotX="50%"
Android:pivotY="50%" />

(ajouter sous res/drawable progress.xml). my_drawable peut être xml, png

Ensuite, dans votre mise en page, utilisez

<ProgressBar
        Android:id="@+id/progressBar"
        Android:indeterminateDrawable="@drawable/progress_circle"
...
/>
1
Evgenii Vorobei

Si vous voulez faire cela dans le code, voici un exemple:

pd = new ProgressDialog(MainActivity.this);
pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
pd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
pd.getWindow().setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
TextView tv = new TextView(this);
tv.setTextColor(Color.WHITE);
tv.setTextSize(20);
tv.setText("Waiting...");
pd.setCustomTitle(tv);
pd.setIndeterminate(true);
pd.show();

L'utilisation de TextView vous permet de modifier la couleur, la taille et la police de votre texte. Sinon, vous pouvez simplement appeler setMessage (), comme d'habitude.

1
Flot2011