Android
Barra de progreso
Buscar..
Observaciones
Documentación oficial: ProgressBar
Barra de progreso indeterminado
Una barra de progreso indeterminada muestra una animación cíclica sin una indicación de progreso.
Barra de progreso indeterminada básica (rueda giratoria)
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Barra de progreso horizontal indeterminada (barra plana)
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@android:style/Widget.ProgressBar.Horizontal"/>
Otros estilos incorporados de ProgressBar
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"
Para usar la barra de progreso indeterminada en una actividad
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setVisibility(View.VISIBLE);
progressBar.setVisibility(View.GONE);
Barra de progreso determinada
Una barra de progreso determinada muestra el progreso actual hacia un valor máximo específico.
Barra de progreso horizontal determinada
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="false"
android:layout_width="match_parent"
android:layout_height="10dp"
style="@android:style/Widget.ProgressBar.Horizontal"/>
Barra de progreso vertical determinada
<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>
Anillo determinado 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>
Para utilizar el ProgressBar determinado en una actividad.
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setSecondaryProgress(100);
progressBar.setProgress(10);
progressBar.setMax(100);
Barra de progreso personalizada
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>
Captura de pantalla de referencia:
Barra de progreso de tintado
Usando un tema de AppCompat, el color de ProgressBar será el colorAccent que haya definido.
Para cambiar el color de la ProgressBar sin cambiar el color de acento, puede usar el atributo android:theme invalida el color de acento:
<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>
Para teñir la Barra de ProgressBar , puede usar en el archivo xml los atributos android:indeterminateTintMode y android:indeterminateTint
<ProgressBar
android:indeterminateTintMode="src_in"
android:indeterminateTint="@color/my_color"
/>
Material Linear ProgressBar
Según la documentación del material :
Un indicador de progreso lineal siempre debe llenar de 0% a 100% y nunca disminuir en valor.
Debe representarse con barras en el borde de un encabezado o una hoja que aparecen y desaparecen.
Para usar un material Linear ProgressBar solo use en su xml:
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Indeterminado
Para crear ProgressBar indeterminado, establezca el atributo android:indeterminate en 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"/>
Determinado
Para crear una barra de progreso determinada, establezca el atributo android:indeterminate en false y use los atributos android:max y android:progress :
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:indeterminate="false"
android:max="100"
android:progress="10"/>
Solo usa este código para actualizar el valor:
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setProgress(20);
Buffer
Para crear un efecto de búfer con la Barra de progreso, establezca el atributo android:indeterminate en false y use los atributos de android:max , android:progress y 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"/>
El valor del búfer está definido por el atributo android:secondaryProgress .
Solo usa este código para actualizar los valores:
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setProgress(20);
progressBar.setSecondaryProgress(50);
Indeterminado y determinado
Para obtener este tipo de ProgressBar solo usa una ProgressBar indeterminada usando el atributo android:indeterminate como verdadero.
<ProgressBar
android:id="@+id/progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:indeterminate="true"/>
Luego, cuando necesite cambiar del progreso indeterminado al progreso determinado, use el método setIndeterminate() .
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setIndeterminate(false);
Creación de un diálogo de progreso personalizado
Al crear una clase de diálogo de progreso personalizado, el diálogo se puede usar para mostrar en la instancia de la interfaz de usuario, sin volver a crear el diálogo.
Primero crea una clase personalizada de diálogo de progreso.
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;
}
}
}
Ahora creando el diseño de progreso personalizado
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>
Eso es todo. Ahora para llamar al Dialog in 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();