Eliminar el relleno vertical de la barra de progreso horizontal

Por defecto, la barra de progreso tiene un cierto relleno encima y debajo de la barra. ¿Hay alguna forma de eliminar este relleno para tener la barra al final?

Utilizo lo siguiente como solución para este problema.

android:layout_marginBottom="-8dp"
android:layout_marginTop="-4dp"

Así es como usé la respuesta de Juozas:

La altura de mi ProgressBares 4dp. Así que creé un FrameLayoutcon altura 4dp y configuré el layout_gravityde ProgressBara center. Funciona como un encanto.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="4dp">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_gravity="center"
        android:indeterminate="true"/>

</FrameLayout>

Terminé usando una biblioteca personalizada para resolver este problema. La mayoría de las otras soluciones funcionan, pero los resultados no son consistentes en varios dispositivos.

MaterialProgressBar

• Apariencia consistente en Android 4.0+.
• Corrección del tinte en las plataformas.
• Capaz de eliminar el relleno intrínseco del marco ProgressBar.
• Capaz de ocultar la pista del marco horizontal ProgressBar.
• Se utiliza como reemplazo directo para el marco ProgressBar.

Para agregar como dependencia de gradle:

compile 'me.zhanghai.android.materialprogressbar:library:1.1.7'

Para agregar una barra de progreso sin relleno intrínseco a su diseño:

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:layout_width="wrap_content"
    android:layout_height="4dp"
    android:indeterminate="true"
    app:mpb_progressStyle="horizontal"
    app:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />

app:mpb_useIntrinsicPadding="false"Hace el truco. Para más detalles ver la página de GitHub .

Si alguien aún necesita ayuda, puede intentar esto:

<androidx.core.widget.ContentLoadingProgressBar
    android:id="@+id/progress"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    android:indeterminate="true"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/guideline" />

Aquí, la barra de progreso está dentro de ConstraintLayout , y los atributos restrictintTop_toTopOf y restrictintBottom_toTopOf deben aplicarse al mismo elemento (en este caso, es una guía).

Es posible dibujar ProgressBar centrado verticalmente dentro de un padre que recortaría el relleno. Como ProgressBar no puede dibujarse a sí mismo más grande que el padre, debemos crear un padre grande para colocarlo dentro de una vista de recorte.

<FrameLayout
    android:id="@+id/clippedProgressBar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    tools:ignore="UselessParent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="16dp"
        android:layout_gravity="center_vertical">

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="true"/>

    </FrameLayout>

</FrameLayout>

Para eliminar el relleno vertical de ProgressBar, puede hacerlo por

• arreglar la altura de ProgressBar
• Use scaleY = "value" (value = height / 4) (4 es la altura predeterminada de la barra de progreso)

El ejemplo contiene 1 wrap_content ProgressBar, 1 8dp ProgressBar, 1 100dpProgressBar

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    ...
    android:layout_height="8dp"
    android:scaleY="2" />

Una solución completa a este problema sería la siguiente. En caso de que alguien necesite fragmentos de código, esto es lo que hice.

1. Copié los 8 dibujables de la barra de progreso horizontal indeterminada
2. Editó los dibujables usando un manipulador de imágenes y eliminó rellenos innecesarios
3. Copié el XML dibujable llamado progress_indeterminate_horizontal_holo.xml de la plataforma Android
4. Copié el estilo Widget.ProgressBar.Horizontal y sus padres
5. Establezca el estilo y min_height manualmente en el diseño

Aquí está el progress_indeterminate_horizontal_holo.xml

<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
<item android:drawable="@drawable/progressbar_indeterminate_holo1" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo2" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo3" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo4" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo5" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo6" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo7" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo8" android:duration="50" />

Recursos de estilo copiados a mi archivo de estilos local.

<style name="Widget">
    <item name="android:textAppearance">@android:attr/textAppearance</item>
</style>

<style name="Widget.ProgressBar">
    <item name="android:indeterminateOnly">true</item>
    <item name="android:indeterminateBehavior">repeat</item>
    <item name="android:indeterminateDuration">3500</item>
</style>

<style name="Widget.ProgressBar.Horizontal">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item>
</style>

Y finalmente, establezca la altura mínima en 4dp en mi archivo de diseño local.

<ProgressBar
    android:id="@+id/pb_loading"
    style="@style/Widget.ProgressBar.Horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:indeterminate="true"
    android:minHeight="4dp"
    android:minWidth="48dp"
    android:progressDrawable="@drawable/progress_indeterminate_horizontal_holo" />

Encontré el mismo problema al usar la barra de progreso con estilo horizontal.

La causa raíz es que el dibujo de 9 parches predeterminado para la barra de progreso: (progress_bg_holo_dark.9.png) tiene algunos píxeles transparentes verticales como relleno.

La solución final que funcionó para mí: personalizar el progreso dibujable, mi código de muestra de la siguiente manera:

custom_horizontal_progressbar_drawable.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 android:shape="rectangle">
            <solid android:color="#33ffffff" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#ff9800" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#E91E63" />
            </shape>
        </clip>
    </item>
</layer-list>

fragmento de diseño:

<ProgressBar
    android:id="@+id/song_progress_normal"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_alignParentBottom="true"
    android:progressDrawable="@drawable/custom_horizontal_progressbar_drawable"
    android:progress="0"/>

Un truco es agregar márgenes negativos a su barra de progreso.

A continuación se muestra un ejemplo del código XML, suponiendo que esté en la parte superior de la pantalla:

<ProgressBar
    android:id="@+id/progressBar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="-7dp"
    android:layout_marginBottom="-7dp"
    android:indeterminate="true" />

La respuesta de Subin parece ser la única (actualmente) que no es un hack frágil sujeto a roturas en futuras versiones de Android ProgressBar.

Pero en lugar de pasar por la molestia de dividir los recursos, modificarlos y mantenerlos indefinidamente, he optado por utilizar la biblioteca MaterialProgressBar , que lo hace por nosotros:

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:layout_gravity="bottom"
    custom:mpb_progressStyle="horizontal"
    custom:mpb_showTrack="false"
    custom:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal.NoPadding"
/>

En build.gradle:

// Android horizontal ProgressBar doesn't allow removal of top/bottom padding
compile 'me.zhanghai.android.materialprogressbar:library:1.1.6'

Ese proyecto tiene una buena demostración que muestra las diferencias entre él y el ProgressBar incorporado.

si alguien sigue buscando una solución, revise este comentario

establecer la altura mínima en 4 dp

   android:minHeight="4dp"

-

  <ProgressBar
    android:id="@+id/web_view_progress_bar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:max="100"
    android:min="0"
    android:progress="5"
    android:minHeight="4dp"
    android:progressTint="@color/vodafone_red"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:progress="60" />

Yo uso minHeight y maxHeigh. Ayuda para diferentes versiones de Api.

<ProgressBar
    android:id="@+id/progress_bar"
    style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="3dp"
    android:minHeight="3dp" />

Necesita usar ambos. Api 23 funciona bien con

android:layout_height="wrap_content"
android:minHeight="0dp"

Pero las versiones inferiores de Api aumentan la altura de la barra de progreso a maxHeight en ese caso.

Intenta lo siguiente:

<ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progress="25"
    android:progressTint="@color/colorWhite"
    android:progressBackgroundTint="@color/colorPrimaryLight"
    android:layout_width="match_parent"
    android:layout_height="4dp" />

... y luego configure la barra de progreso según sus necesidades, ya que inicialmente mostrará una barra de tamaño medio con un tinte de progreso de color amarillo con un tinte de fondo de progreso grisáceo. Además, tenga en cuenta que no hay relleno vertical.

Úselo así, dentro de Linearlayout

 <LinearLayout
        android:layout_width="match_parent"
        android:background="#efefef"
        android:layout_height="wrap_content">

        <ProgressBar
            android:id="@+id/progressBar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:visibility="gone"
            android:layout_marginTop="-7dp"
            android:layout_marginBottom="-7dp"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            />

    </LinearLayout>

agregar el android: progressDrawable a una lista de capas definida en drawable solucionó el problema para mí. Funciona enmascarando la barra de progreso en un dibujo personalizado

implementación de ejemplo descrita en https://stackoverflow.com/a/4454450/1145905

Estoy usando style="@style/Widget.AppCompat.ProgressBar.Horizontal"y fue bastante fácil deshacerse de los márgenes. Ese estilo es:

    <item name="progressDrawable">@drawable/progress_horizontal_material</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>

Acabo de anular la altura mínima / máxima:

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:indeterminate="true"
        android:minHeight="2dp"
        android:maxHeight="2dp" />

No es necesario descargar ningún módulo nuevo o incluso colocar un FrameLayout alrededor de su barra de progreso. Todos estos son solo hacks. Solo 2 pasos:

En tu whatever.xml

<ProgressBar
    android:id="@+id/workoutSessionGlobalProgress"
    android:layout_width="match_parent"
    android:layout_height="YOUR_HEIGHT"
    android:progressDrawable="@drawable/progress_horizontal"
    android:progress="0"
    <!-- High value to make ValueAnimator smoother -->
    android:max="DURATION * 1000"
    android:indeterminate="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"/>

progress_horizontal.xml, cambie los valores como desee.

¿No te gustan las esquinas redondeadas?
Eliminar radio de esquina

¿No te gustan los colores? Cambiar los colores, etc. ¡Listo!

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
                    />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                        />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                        />
            </shape>
        </clip>
    </item>

</layer-list>

En general, estos son los pasos para cambiar el código de cualquier cosa que no le guste. Simplemente encuentre el código fuente y descubra qué cambiar. Si sigue el código fuente de ProgressBar, encontrará un archivo llamado progress_horizontal.xml al que hace referencia. Básicamente cómo resuelvo todos mis problemas XML.

 <ProgressBar
        android:layout_marginTop="-8dp"
        android:layout_marginLeft="-8dp"
        android:layout_marginRight="-8dp"
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:indeterminate="false"
        android:indeterminateTint="@color/white"
        android:max="100"
        android:paddingStart="8dp"
        android:paddingRight="0dp"
        android:progressDrawable="@drawable/progress_bg" />

<androidx.core.widget.ContentLoadingProgressBar
                    android:id="@+id/progressBar"
                    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:indeterminate="true"
                    android:paddingTop="2dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"/>

Simplemente haga uso de Material ProgressIndicator que no tiene margen oculto.

<com.google.android.material.progressindicator.ProgressIndicator
        android:id="@+id/progressBar"
        style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicatorColor="@color/colorPrimary"
        app:trackColor="@color/colorAccent" />

Una solución simple sin trucos que es compatible con cualquier versión de Android y no necesita bibliotecas externas está fingiendo ProgressBarcon dos Viewsadentro LinearLayout. Esto es con lo que terminé. Parece bastante ordenado y este enfoque es bastante flexible: puede animarlo de manera original, agregar texto, etc.

Diseño:

<LinearLayout
    android:id="@+id/inventory_progress_layout"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/inventory_progress_value"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/inventory_progress_remaining"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Código:

public void setProgressValue(float percentage) {
    TextView progressValue = (TextView) findViewById(R.id.inventory_progress_value);
    TextView progressRemaining = (TextView) findViewById(R.id.inventory_progress_remaining);

    LinearLayout.LayoutParams paramsValue = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    LinearLayout.LayoutParams paramsRemaining = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

    paramsValue.weight = (100 - percentage);
    paramsRemaining.weight = percentage;

    progressValue.setLayoutParams(paramsValue);
    progressRemaining.setLayoutParams(paramsRemaining);

}

Resultado (con alguna elevación añadida):

La mejor solución debería ser

android:minHeight="0dp"

Sin solución y funciona como un encanto.