Android
Barre de progression
Recherche…
Remarques
Documentation Officielle: ProgressBar
ProgressBar Indéterminé
Un ProgressBar indéterminé montre une animation cyclique sans indication de progrès.
ProgressBar de base indéterminé (rouet)
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
ProgressBar horizontal indéterminé (barre plate)
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@android:style/Widget.ProgressBar.Horizontal"/>
Autres styles ProgressBar intégrés
style="@android:style/Widget.ProgressBar.Small"
style="@android:style/Widget.ProgressBar.Large"
style="@android:style/Widget.ProgressBar.Inverse"
style="@android:style/Widget.ProgressBar.Small.Inverse"
style="@android:style/Widget.ProgressBar.Large.Inverse"
Pour utiliser la barre de progression indéterminée dans une activité
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setVisibility(View.VISIBLE);
progressBar.setVisibility(View.GONE);
Déterminer ProgressBar
Un ProgressBar déterminé indique la progression actuelle vers une valeur maximale spécifique.
ProgressBar à détermination horizontale
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="false"
android:layout_width="match_parent"
android:layout_height="10dp"
style="@android:style/Widget.ProgressBar.Horizontal"/>
ProgressBar à détermination verticale
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="false"
android:layout_width="10dp"
android:layout_height="match_parent"
android:progressDrawable="@drawable/progress_vertical"
style="@android:style/Widget.ProgressBar.Horizontal"/>
res / drawable / progress_vertical.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="3dp"/>
<solid android:color="@android:color/darker_gray"/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip android:clipOrientation="vertical" android:gravity="bottom">
<shape>
<corners android:radius="3dp"/>
<solid android:color="@android:color/holo_blue_light"/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip android:clipOrientation="vertical" android:gravity="bottom">
<shape>
<corners android:radius="3dp"/>
<solid android:color="@android:color/holo_blue_dark"/>
</shape>
</clip>
</item>
</layer-list>
Anneau déterminé ProgressBar
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/progress_ring"
style="@android:style/Widget.ProgressBar.Horizontal"/>
res / drawable / progress_ring.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/secondaryProgress">
<shape
android:shape="ring"
android:useLevel="true"
android:thicknessRatio="24"
android:innerRadiusRatio="2.2">
<corners android:radius="3dp"/>
<solid android:color="#0000FF"/>
</shape>
</item>
<item android:id="@android:id/progress">
<shape
android:shape="ring"
android:useLevel="true"
android:thicknessRatio="24"
android:innerRadiusRatio="2.2">
<corners android:radius="3dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</item>
</layer-list>
Pour utiliser la barre de progression déterminée dans une activité.
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setSecondaryProgress(100);
progressBar.setProgress(10);
progressBar.setMax(100);
Barre de progression personnalisée
CustomProgressBarActivity.java :
public class CustomProgressBarActivity extends AppCompatActivity {
private TextView txtProgress;
private ProgressBar progressBar;
private int pStatus = 0;
private Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom_progressbar);
txtProgress = (TextView) findViewById(R.id.txtProgress);
progressBar = (ProgressBar) findViewById(R.id.progressBar);
new Thread(new Runnable() {
@Override
public void run() {
while (pStatus <= 100) {
handler.post(new Runnable() {
@Override
public void run() {
progressBar.setProgress(pStatus);
txtProgress.setText(pStatus + " %");
}
});
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
pStatus++;
}
}
}).start();
}
}
activity_custom_progressbar.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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.skholingua.android.custom_progressbar_circular.MainActivity" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content">
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:indeterminate="false"
android:max="100"
android:progress="0"
android:progressDrawable="@drawable/custom_progressbar_drawable"
android:secondaryProgress="0" />
<TextView
android:id="@+id/txtProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/progressBar"
android:layout_centerInParent="true"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
</RelativeLayout>
custom_progressbar_drawable.xml :
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="-90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:shape="ring"
android:useLevel="false" >
<gradient
android:centerY="0.5"
android:endColor="#FA5858"
android:startColor="#0099CC"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Capture d'écran de référence:
Tinting ProgressBar
En utilisant un thème AppCompat, la couleur du ProgressBar sera le colorAccent vous avez défini.
Pour modifier la couleur ProgressBar sans modifier la couleur d'accentuation, vous pouvez utiliser l'attribut android:theme pour remplacer la couleur d'accentuation:
<ProgressBar
android:theme="@style/MyProgress"
style="@style/Widget.AppCompat.ProgressBar" />
<!-- res/values/styles.xml -->
<style name="MyProgress" parent="Theme.AppCompat.Light">
<item name="colorAccent">@color/myColor</item>
</style>
Pour colorer la ProgressBar vous pouvez utiliser dans le fichier xml les attributs android:indeterminateTintMode et android:indeterminateTint
<ProgressBar
android:indeterminateTintMode="src_in"
android:indeterminateTint="@color/my_color"
/>
Progressbar matériel linéaire
Selon la documentation matérielle :
Un indicateur de progression linéaire devrait toujours remplir de 0% à 100% et ne jamais diminuer en valeur.
Il doit être représenté par des barres sur le bord d'un en-tête ou d'une feuille qui apparaissent et disparaissent.
Pour utiliser une barre de progression linéaire, utilisez simplement dans votre fichier xml:
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Indéterminé
Pour créer ProgressBar indéterminé, définissez l'attribut android:indeterminate sur true .
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"/>
Déterminé
Pour créer un ProgressBar déterminé, définissez l'attribut android:indeterminate sur false et utilisez les attributs android:max et android:progress :
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:indeterminate="false"
android:max="100"
android:progress="10"/>
Utilisez simplement ce code pour mettre à jour la valeur:
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setProgress(20);
Tampon
Pour créer un effet tampon avec ProgressBar, définissez l'attribut android:indeterminate sur false et utilisez les attributs android:max , android:progress et android:secondaryProgress :
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:progress="10"
android:secondaryProgress="25"/>
La valeur du tampon est définie par android:secondaryProgress attribut android:secondaryProgress .
Utilisez simplement ce code pour mettre à jour les valeurs:
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setProgress(20);
progressBar.setSecondaryProgress(50);
Indéterminé et Déterminé
Pour obtenir ce type de ProgressBar, utilisez simplement un ProgressBar indéterminé utilisant l'attribut android:indeterminate à true.
<ProgressBar
android:id="@+id/progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:indeterminate="true"/>
Ensuite, lorsque vous devez passer d'une progression indéterminée à une progression déterminée, utilisez la méthode setIndeterminate() .
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setIndeterminate(false);
Création d'une boîte de dialogue de progression personnalisée
En créant une classe de dialogue de progression personnalisée, la boîte de dialogue peut être utilisée pour afficher une instance de l'interface utilisateur sans recréer la boîte de dialogue.
Commencez par créer une classe de dialogue de progression personnalisée.
CustomProgress.java
public class CustomProgress {
public static CustomProgress customProgress = null;
private Dialog mDialog;
public static CustomProgress getInstance() {
if (customProgress == null) {
customProgress = new CustomProgress();
}
return customProgress;
}
public void showProgress(Context context, String message, boolean cancelable) {
mDialog = new Dialog(context);
// no tile for the dialog
mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
mDialog.setContentView(R.layout.prograss_bar_dialog);
mProgressBar = (ProgressBar) mDialog.findViewById(R.id.progress_bar);
// mProgressBar.getIndeterminateDrawable().setColorFilter(context.getResources()
// .getColor(R.color.material_blue_gray_500), PorterDuff.Mode.SRC_IN);
TextView progressText = (TextView) mDialog.findViewById(R.id.progress_text);
progressText.setText("" + message);
progressText.setVisibility(View.VISIBLE);
mProgressBar.setVisibility(View.VISIBLE);
// you can change or add this line according to your need
mProgressBar.setIndeterminate(true);
mDialog.setCancelable(cancelable);
mDialog.setCanceledOnTouchOutside(cancelable);
mDialog.show();
}
public void hideProgress() {
if (mDialog != null) {
mDialog.dismiss();
mDialog = null;
}
}
}
Maintenant créer la mise en page de progression personnalisée
prograss_bar_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:background="@android:color/background_dark"
android:orientation="vertical">
<TextView
android:id="@+id/progress_text"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_above="@+id/progress_bar"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:background="@android:color/transparent"
android:gravity="center_vertical"
android:text=""
android:textColor="@android:color/white"
android:textSize="16sp"
android:visibility="gone" />
<-- Where the style can be changed to any kind of ProgressBar -->
<ProgressBar
android:id="@+id/progress_bar"
style="@android:style/Widget.DeviceDefault.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_gravity="center"
android:background="@color/cardview_dark_background"
android:maxHeight="20dp"
android:minHeight="20dp" />
</RelativeLayout>
Ça y est. Maintenant, pour appeler le dialogue dans le code
CustomProgress customProgress = CustomProgress.getInstance();
// now you have the instance of CustomProgres
// for showing the ProgressBar
customProgress.showProgress(#Context, getString(#StringId), #boolean);
// for hiding the ProgressBar
customProgress.hideProgress();