Cómo agregar una barra de progreso indeterminada

5 minutos de lectura

avatar de usuario
Joaquín

La interfaz de usuario de mis aplicaciones se crea con la biblioteca de soporte de Android, pero actualmente no hay una versión AppCompat de la barra de progreso (intermedia), que mi aplicación realmente necesita.

Preferiría no usar bibliotecas de terceros para lograr barras de progreso de diseño de materiales, por lo que me pregunto si alguien tiene información sobre por qué no está incluido en la biblioteca de soporte y si hay alguna señal de que llegará (y cuándo).

  • Voto para cerrar esta pregunta como fuera de tema porque se trata de la posible función futura de la tercera biblioteca y su ETA.

    – Budius

    6 de noviembre de 2015 a las 11:31

  • ¿A qué te refieres cuando dices ETA?

    – Joaquín

    06/11/2015 a las 16:35

  • ETA: “Hora estimada de llegada”

    – Budius

    6 de noviembre de 2015 a las 16:36

  • Su pregunta no es una pregunta de programación real que pueda responderse de una manera práctica adecuada. Se pregunta por qué una empresa lanzó una biblioteca sin una función que le gustaría que tuviera, y si dicha empresa está pensando en agregarla. Es puramente especulativo. La única forma de que alguien responda es si alguien de Google decide venir aquí y decirte por qué cree que no es importante. Tal vez podría volver a escribir su pregunta publicando exactamente lo que quiere lograr (con capturas de pantalla), lo que habría codificado en el nonAppCompat versión y qué soluciones alternativas sugieren otros desarrolladores.

    – Budius

    6 de noviembre de 2015 a las 17:01

  • No estoy pidiendo que nadie adivine nada. Me pregunto si hay alguna lista de características futuras para la Biblioteca de soporte y/o cuándo están planificadas.

    – Joaquín

    06/11/2015 a las 17:32

avatar de usuario
gabriele mariotti

Biblioteca de componentes de materiales

Puedes usar el LinearProgressIndicator con el android:indeterminate="true" atributo:

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:indeterminate="true"
    app:indicatorColor="?attr/colorPrimary"/>

ingrese la descripción de la imagen aquí

También puedes usar diferentes colores usando:

<com.google.android.material.progressindicator.LinearProgressIndicator
        android:indeterminate="true"
        app:indicatorColor="@array/progress_colors"
        app:indeterminateAnimationType="contiguous"/>

con:

  <integer-array name="progress_colors">
    <item>@color/...</item>
    <item>@color/....</item>
    <item>@color/....</item>
  </integer-array>

ingrese la descripción de la imagen aquí

También puede utilizar el CircularProgressIndicator componente para tener un indicador de progreso circular:

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:indeterminate="true"
    app:indicatorColor="?attr/colorPrimary"/>

ingrese la descripción de la imagen aquí

Nota: Eso requiere al menos la versión 1.3.0-alpha04


composición de jetpack

Con 1.0.x puedes usar el LinearProgressIndicator o CircularProgressIndicator

// Indeterminate
CircularProgressIndicator()
LinearProgressIndicator()

// Determinate
CircularProgressIndicator(progress = ..)
LinearProgressIndicator(progress = ..)

Ejemplo:

var progress by remember {  mutableStateOf(0.1f) }

LinearProgressIndicator(
    backgroundColor = Color.White,
    progress = progress,
    color = Blue
)

AppCompat

Puedes usar un ProgressBar con un AppCompat estilo.

Simplemente agregue esto en su diseño:

<ProgressBar
        style="@style/Base.Widget.AppCompat.ProgressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:visibility="visible" />

Si desea utilizar una barra de progreso horizontal:

  <ProgressBar
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:layout_marginTop="24dp"
        android:indeterminate="true"
        android:visibility="visible" />

Siguen el material oficial pautas.

  • ¿Cómo usar esto como barra de progreso indeterminada en la barra de acción con webView?

    – Mahoma

    4 de enero de 2016 a las 13:58

  • Me gustaría agregar que esto no funcionará para barras circulares indeterminadas. Carecen del vector animado dibujable.

    – Roberto Baker

    20/01/2016 a las 18:40

  • @Robert, ¿alguna pista sobre cómo hacer lo mismo para los círculos indeterminados? Este es uno de los mejores resultados que pude obtener con mi google-fu.

    –Richard Le Mesurier

    26 de enero de 2016 a las 7:46

  • @RichardLeMesurier Podría intentar incluir esta implementación, desde Chromium. No hace uso de dibujables vectoriales: chromium.googlesource.com/android_tools/+/master/sdk/extras/…

    – gnuf

    08/02/2016 a las 21:20

  • Esta respuesta solo describe cómo usar la barra de progreso nativa de la plataforma. En dispositivos pre-lollipop, terminará con una barra de progreso holográfica sin teñir. Esto no responde la pregunta.

    – BladeCoder

    30/10/2016 a las 20:21

avatar de usuario
FD_

Esta es una respuesta a una vieja pregunta, pero pensé que otros lectores podrían estar interesados ​​en esta solución:

Las versiones más recientes (26.1.+) de la biblioteca de soporte contienen una clase llamada CircularProgressDrawable que implementa el aspecto exacto del dibujable indeterminado Material nativo. Para usar esto fácilmente en un diseño, puede construir un MaterialProgressBar como esto:

public class MaterialProgressBar extends ProgressBar{
    // Same dimensions as medium-sized native Material progress bar
    private static final int RADIUS_DP = 16;
    private static final int WIDTH_DP = 4;

    public MaterialProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);

        // The version range is more or less arbitrary - you might want to modify it
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP
                || Build.VERSION.SDK_INT > Build.VERSION_CODES.O_MR1) {

            final DisplayMetrics metrics = getResources().getDisplayMetrics();
            final float screenDensity = metrics.density;

            CircularProgressDrawable drawable = new CircularProgressDrawable(context);
            drawable.setColorSchemeColors(getResources().getColor(R.color.colorPrimary));
            drawable.setCenterRadius(RADIUS_DP * screenDensity);
            drawable.setStrokeWidth(WIDTH_DP * screenDensity);
            setIndeterminateDrawable(drawable);
        }
    }
}

Solo estoy tratando de mejorar la respuesta del Sr. Gabriele Mariotti usando estilos.

  1. Escribe un estilo como este

    <style name="infinite_progress_horizontal" parent="Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:indeterminate">true</item>
    </style>
    
  2. Úselo con su barra de progreso de esta manera.

    <ProgressBar style="@style/infinite_progress_horizontal" />
    

¿Ha sido útil esta solución?