Estoy tratando de lograr este progreso de la barra de diseño:
Barra de progreso con las esquinas redondeadas?

El actual código que he produce esto:
Barra de progreso con las esquinas redondeadas?

Este es el código:

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </clip>
</item>

Mi barra de progreso:

 <ProgressBar
            android:id="@+id/activeProgress"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:progress="10"
            android:progressDrawable="@drawable/rounded_corners_progress_bar"/>

He intentado añadir <size> atributo en el <shape> en <clip para hacer el progreso de forma un poco más pequeño, pero no funcionó. Además, la barra de progreso es plana y quiero ser curvo como por el diseño. ¿Qué tengo que cambiar para lograr el diseño?

3 Comentarios

  1. 97

    Cómo hacer que el progreso de forma un poco más pequeño?

    Que necesita para dar el punto el progreso un poco de relleno, así:

    <item android:id="@android:id/progress"
        android:top="2dp"
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp">

    Cómo hacer que la barra de progreso se curva como por el diseño?

    Reemplazar el <clip></clip> elemento, con <scale android:scaleWidth="100%"></scale>. Que va a hacer la forma de mantener su forma a medida que crece y no se cortan.
    Desafortunadamente, va a tener un poco de no deseados efecto visual al principio – como la forma de las esquinas no tienen suficiente espacio para dibujar. Pero podría ser lo suficientemente bueno para la mayoría de los casos.

    Código completo:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:id="@android:id/background">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/dirtyWhite"/>
        </shape>
     </item>
    
     <item android:id="@android:id/progress"
        android:top="1dp"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp">
    
        <scale android:scaleWidth="100%">
            <shape>
                <corners android:radius="8dp"/>
                <solid android:color="@color/colorPrimaryDark"/>
            </shape>
        </scale>
     </item>
    </layer-list>
    • Gracias por tu respuesta. Sin embargo, cuando he aplicado sus sugerencias. toda la barra de progreso recibió de color con mi color principal (colorPrimaryDark) a pesar de los avances atributo tal y como se establece en el 10% ni idea de por qué sucedió esto. He editado mi respuesta con la barra de progreso de código.
    • Gracias! Se consigue la barra de progreso de la curva de efecto. Sin embargo, al aplicar sus sugerencias a toda la barra de progreso se llena como se establece en el 100% de avance. ¿Sabe usted cuál es la causa de esto? Gracias!
    • Funcionó! Muchas gracias por su tiempo! 🙂
    • Por favor, no funciona correctamente con gradiente de progreso, cuando damos el 100% de ancho , redondo, de ambos extremos de progreso, pero también wrapup el gradiente, pero quiero mostrar graidient según el valor de progreso. si usted tiene alguna solución súplicas compartir
    • ¿Cómo podemos eliminar los no deseados efecto visual – plano de progreso en el comienzo, cuando el progreso es muy pequeña ?? @EyalBiran
    • El uso de los nativos ProgressBar y Capa-Lista es muy restrictivo. Usted puede implementar fácilmente una barra de progreso personalizada para satisfacer sus necesidades. Por ejemplo, si usted tiene un fondo de color sólido – sólo tiene que utilizar un primer plano 9-ruta a ocultar todo, pero el progreso. Si usted está apuntando a nuevas Versiones de Android, usted puede simplemente utilizar el construido en la máscara de soporte (no se admiten en versiones anteriores). Otra opción es utilizar una biblioteca, esto puede ser bueno para usted: github.com/akexorcist/Android-RoundCornerProgressBar . Si usted todavía tiene problemas, por favor enviar una nueva pregunta. Saludos.
    • véase el comentario de arriba
    • Cuando solicité su código completo, toda la barra de progreso recibió de color con mi color principal (colorPrimaryDark) aunque el progressis no al 100%. He añadido un clip de etiqueta bajo @android:id/fondo, es fijo, pero de fondo se ha ido. Mi temp solución es quitar elemento de fondo y de agregar color de fondo para el diseño (sin esquinas redondeadas).
    • hola, gracias por la respuesta, su trabajo, pero no veo el progreso cuando intento ejecutar la barra de progreso de 100 a 0, yo nunca trate de añadir un elemento más con el id secondaryProgress, pero no funciona, ¿tiene solución? por favor compartir, gracias
    • En mi caso, la scale con android:scaleWidth="100%" hizo el truco para que se pueda ver con las esquinas redondeadas. Muchas gracias
    • scale en lugar de clip principalmente hace el truco. Luego el resto es su personalización si desea que las esquinas redondeadas en ambos lados o de un solo lado. 🙂 Gracias @EyalBiran para la respuesta.

  2. 2

    Gracias a Georgi Koemdzhiev para una buena pregunta y las imágenes. Para aquellos que quieren hacer algo similar a lo suyo, a hacer lo siguiente.

    1) Crear un fondo para un ProgressBar.

    progress_bar_background.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        >
        <corners android:radius="3dp" />
        <stroke android:color="@color/white" android:width="1dp" />
    </shape>

    2) Crear una escala para la ProgressBar.

    curved_progress_bar.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="2dp" />
                <solid android:color="@color/transparent" />
            </shape>
        </item>
    
        <item android:id="@android:id/progress">
            <clip>
                <shape>
                    <corners android:radius="2dp" />
                    <solid android:color="#ffff00" />
                </shape>
            </clip>
        </item>
    </layer-list>

    3) En el archivo de diseño agregar el ProgressBar.

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="20dp"
        android:background="@drawable/progress_bar_background"
        >
    
        <ProgressBar
            android:id="@+id/progress_bar"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:layout_margin="1dp"
            android:indeterminate="false"
            android:progressDrawable="@drawable/curved_progress_bar"
            />
    
    </FrameLayout>
  3. 0

    Barra de progreso con las esquinas redondeadas?

    Usted puede alcanzar el progreso de la barra con ambas interior de progreso de color ,frontera
    el color,el progreso vacío con color transparente.

    <?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="15dip" />
            <stroke android:width="1dp" android:color="@color/black" />
        </shape>
    </item>
    
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="@color/black"
                    android:centerColor="@color/trans"
                    android:centerY="0.75"
                    android:endColor="@color/black"
                    android:angle="270"
    
                    />
            </shape>
        </clip>
     </item>
    
    
     <item
        android:id="@android:id/progress"
        >
        <clip>
            <shape>
                <corners
                    android:radius="5dip" />
                <gradient
                    android:startColor="@color/black"
                    android:endColor="@color/black"
                    android:angle="270" />
            </shape>
        </clip>
     </item>
     </layer-list>
    • Hola Ravichandra, gracias por tu respuesta! Puedes añadir la explicación de por qué el código responde a su pregunta? De lo contrario, será difícil utilizar para otros usuarios. Gracias!
    • Gracias por este fragmento de código, que podría proporcionar cierta ayuda inmediata. Una explicación adecuada mejoraría en gran medida su valor de largo plazo demostrando por qué es una buena solución para el problema y sería más útil para los lectores futuros con otras preguntas similares. Por favor, editar su respuesta a añadir alguna explicación, incluyendo las suposiciones que hemos hecho. Además, trate de explicar por qué su respuesta es mejor que las otras respuestas ya dadas a esta pregunta.

Dejar respuesta

Please enter your comment!
Please enter your name here