Supprimer le remplissage vertical de la barre de progression horizontale

Par défaut, ProgressBar a un certain remplissage au-dessus et en dessous de la barre elle-même. Existe-t-il un moyen de supprimer ce rembourrage pour n'avoir que la barre à la fin?

J'utilise ce qui suit comme solution de contournement pour ce problème.

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

Voici comment j'ai utilisé la réponse de Juozas:

ma hauteur ProgressBarest de 4dp. Donc , j'ai créé un FrameLayoutavec 4DP en hauteur et réglez le layout_gravityde ProgressBarà center. Cela fonctionne comme un charme.

<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>

J'ai fini par utiliser une bibliothèque personnalisée pour résoudre ce problème. La plupart des autres solutions fonctionnent mais les résultats ne sont pas cohérents sur les différents appareils.

MatérielProgressBar

• Apparence cohérente sur Android 4.0+.
• Corrigez la teinte sur toutes les plates-formes.
• Capable de supprimer le remplissage intrinsèque de la structure ProgressBar.
• Capable de masquer la piste de la barre de progression horizontale du cadre.
• Utilisé en remplacement de la structure ProgressBar.

Pour ajouter en tant que dépendance gradle:

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

Pour ajouter une ProgressBar sans remplissage intrinsèque à votre disposition:

<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"fait l'affaire. Pour plus de détails, consultez la page GitHub .

Si quelqu'un a encore besoin d'aide, essayez ceci:

<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" />

Ici, la barre de progression est à l'intérieur du ConstraintLayout , et les attributs constraintTop_toTopOf et constraintBottom_toTopOf doivent être appliqués au même élément (dans ce cas, il s'agit d'une ligne directrice).

*** SOLUTION COMPLÈTE: ***

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="48dp">

<View
    android:id="@+id/guideline"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<ProgressBar
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline" />
</androidx.constraintlayout.widget.ConstraintLayout>

Il est possible de dessiner ProgressBar verticalement centré à l'intérieur d'un parent qui couperait le remplissage. Puisque ProgressBar ne peut pas se dessiner plus grand que le parent, nous devons créer un grand parent à placer dans une vue de détourage.

<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>

Pour supprimer le remplissage vertical de ProgressBar , vous pouvez faire en

• fixer la hauteur de ProgressBar
• Utilisez scaleY = "value" (value = height / 4) (4 est la hauteur par défaut de la barre de progression)

L'exemple contient 1 wrap_content ProgressBar, 1 8dp ProgressBar, 1 100dpProgressBar

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

Une solution complète à ce problème serait la suivante. Juste au cas où quelqu'un aurait besoin de fragments de code, c'est ce que j'ai fait.

1. Copie de tous les 8 dessinables de barre de progression horizontale indéterminés
2. Modification des dessinables à l'aide d'un manipulateur d'image et suppression des rembourrages inutiles
3. Copie du XML dessinable nommé progress_indeterminate_horizontal_holo.xml à partir de la plate-forme Android
4. Copie du style Widget.ProgressBar.Horizontal et ses parents
5. Définissez manuellement le style et min_height dans la mise en page

Voici le 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" />

Ressources de style copiées dans mon fichier de styles 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>

Et enfin, définissez la hauteur minimale sur 4dp dans mon fichier de mise en page 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" />

J'ai rencontré le même problème en utilisant la barre de progression avec le style Horizontal.

La cause première est que le 9-patch par défaut pouvant être dessiné pour la barre de progression: (progress_bg_holo_dark.9.png) a des pixels transparents verticaux comme remplissage.

La solution finale qui a fonctionné pour moi: personnaliser le dessin de progression, mon exemple de code comme suit:

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>

extrait de disposition:

<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"/>

Une astuce consiste à ajouter des marges négatives à votre barre de progression.

Vous trouverez ci-dessous un exemple de code XML, en supposant qu'il se trouve en haut de votre écran:

<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 réponse de Subin semble être la seule (actuellement) qui ne soit pas un piratage fragile sujet à la casse dans les futures versions de la ProgressBar Android.

Mais plutôt que de me donner la peine de décomposer les ressources, de les modifier et de les maintenir indéfiniment, j'ai choisi d'utiliser la bibliothèque MaterialProgressBar , qui le fait pour nous:

<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"
/>

Dans build.gradle:

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

Ce projet a une belle démo qui montre les différences entre lui et la ProgressBar intégrée.

si quelqu'un cherche toujours une solution - vérifiez ce commentaire

régler la hauteur minimale à 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" />

J'utilise minHeight et maxHeigh. Cela aide pour différentes versions d'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" />

Il doit utiliser les deux. Api 23 fonctionne bien avec

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

Mais les versions inférieures d'API augmentent la hauteur de la barre de progression à maxHeight dans ce cas.

Essayez ce qui suit:

<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" />

... puis configurez la barre de progression en fonction de vos besoins, car elle affichera initialement une barre de taille moyenne avec une teinte de progression de couleur jaune avec une teinte de fond de progression grisâtre. Notez également qu'il n'y a pas de rembourrage vertical.

Utilisez comme ça, dans 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>

l'ajout d'Android: progressDrawable à une liste de couches définie dans drawable a résolu le problème pour moi. Cela fonctionne en masquant la barre de progression dans un dessin personnalisé

exemple d'implémentation décrit sur https://stackoverflow.com/a/4454450/1145905

J'utilise style="@style/Widget.AppCompat.ProgressBar.Horizontal"et il était assez facile de se débarrasser des marges. Ce style est:

    <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>

Je viens de remplacer la hauteur min / max:

    <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" />

Pas nécessaire de télécharger un nouveau module ou même de mettre un FrameLayout autour de votre barre de progression. Ce ne sont que des hacks. Seulement 2 étapes:

Dans votre peu importe .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, modifiez les valeurs à votre guise.

Vous n'aimez pas les coins arrondis?
Supprimer le rayon d'angle

Vous n'aimez pas les couleurs? Changez les couleurs, etc. C'est fait!

<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 général, ce sont les étapes pour changer le code de tout ce que vous n'aimez pas. Trouvez simplement le code source et déterminez ce qu'il faut changer. Si vous suivez le code source ProgressBar, vous trouverez un fichier appelé progress_horizontal.xml auquel il fait référence. En gros, comment je résous tous mes problèmes 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"/>

Utilisez simplement Material ProgressIndicator qui n'a pas de marge cachée.

<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" />

Une solution simple sans astuces, compatible avec n'importe quelle version d'Android et qui n'a pas besoin de bibliothèques externes, simule ProgressBaravec deux à l' Viewsintérieur LinearLayout. C'est ce avec quoi j'ai fini. Cela a l'air assez soigné et cette approche est assez flexible - vous pouvez l'animer de manière funky, ajouter du texte, etc.

Disposition:

<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>

Code:

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);

}

Résultat (avec une certaine élévation ajoutée):

La meilleure solution devrait être

android:minHeight="0dp"

Aucune solution de contournement et fonctionne comme un charme.