Comment Personnaliser une Barre de Progression Dans Android

La personnalisation d'un ProgressBar exige la définition de l'attribut ou les propriétés de l'arrière-plan et les progrès de votre barre de progression.

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

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 progressDrawable propriété dans customprogressbar.xml (drawable)

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

Effectuer les opérations suivantes 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 de la manière suivante

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

Edit: correction de la mise en page xml

Dans le cas du complexe ProgressBar comme ça,

utilisation ClipDrawable.

NOTE : je n'ai pas utilisé ProgressBar ici dans cet exemple. J'ai réalisé
cette aide ClipDrawable par découpage de l'image avec Animation.

Un Drawable que des clips un autre Drawable sur cette base Drawablele niveau actuel de la valeur. Vous pouvez contrôler combien l'enfant Drawable est écrêtée dans la largeur et la hauteur en fonction du niveau, ainsi que la gravité de contrôle où il est placé dans l'ensemble de son conteneur. Most often used to implement things like progress bars, en augmentant le drawable au niveau de setLevel().

REMARQUE : Le drawable est coupé complètement et n'est pas visible lorsque le niveau est à 0
et pleinement révélé lorsque le niveau est de 10 000.

J'ai utilisé ces deux images pour en faire ce CustomProgressBar.

scall.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" />

Dans le cas du complexe HorizontalProgressBar il suffit de changer cliporientation dans clip_source.xml comme ça,

android:clipOrientation="horizontal"

Vous pouvez télécharger la démo de ici.

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

Un drawable pour les deux types de barre de progression peut être personnalisée en définissant drawable comme ressource xml. Vous pouvez trouver plus d'informations sur la barre de progression de styles et de personnalisation à http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples.

Personnalisation fixe ou horizontale de la barre de progression :

Code xml ci-dessous est un drawable ressources horizontale de la barre de progression de personnalisation.

 <?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

Code xml ci-dessous est un drawable des ressources pour la circulaire de progression de la barre de personnalisation.

<?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>

Façon la plus simple pour créer, personnaliser une barre de progression dans Android:

1. Initialiser et afficher la boîte de dialogue:

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

2. Méthode de création:

   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 la 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éer la forme progresscustombg.xml et mettre 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>

Pour l'aide personnalisée drawable:

<?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 dans res/drawable progress.xml). my_drawable peut être xml, png

Puis de la mise en page utiliser

<ProgressBar
android:id="@+id/progressBar"
android:indeterminateDrawable="@drawable/progress_circle"
...
/>