Entfernen Sie die vertikale Polsterung von der horizontalen ProgressBar

Standardmäßig hat die ProgressBar eine bestimmte Polsterung über und unter der Leiste. Gibt es eine Möglichkeit, diese Polsterung zu entfernen, um nur die Stange am Ende zu haben?

Ich verwende Folgendes als Problemumgehung für dieses Problem.

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

So habe ich Juozas 'Antwort verwendet:

Höhe von mir ProgressBarist 4dp. Also habe ich ein FrameLayoutmit Höhe 4dp erstellt und das layout_gravityvon ProgressBarauf gesetzt center. Es funktioniert wie ein Zauber.

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

Am Ende habe ich eine benutzerdefinierte Bibliothek verwendet, um dieses Problem zu lösen. Die meisten anderen Lösungen funktionieren, aber die Ergebnisse sind auf verschiedenen Geräten nicht konsistent.

MaterialProgressBar

• Konsistentes Erscheinungsbild unter Android 4.0+.
• Korrigieren Sie plattformübergreifend.
• Kann die intrinsische Polsterung des Frameworks ProgressBar entfernen.
• Kann die Spur der horizontalen ProgressBar des Frameworks ausblenden.
• Wird als Drop-In-Ersatz für das Framework ProgressBar verwendet.

So fügen Sie eine Gradle-Abhängigkeit hinzu:

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

So fügen Sie Ihrem Layout eine ProgressBar ohne Eigenauffüllung hinzu:

<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"macht den Trick. Weitere Informationen finden Sie auf der GitHub-Seite .

Wenn jemand noch Hilfe benötigt, kann er dies versuchen:

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

Hier befindet sich der Fortschrittsbalken im ConstraintLayout , und die Attribute ConstraintTop_toTopOf und ConstraintBottom_toTopOf müssen auf dasselbe Element angewendet werden (in diesem Fall handelt es sich um eine Richtlinie).

Es ist möglich, vertikal zentrierte ProgressBar in einem übergeordneten Element zu zeichnen, das die Polsterung abschneidet. Da ProgressBar sich nicht größer als das übergeordnete Element zeichnen kann, müssen wir ein großes übergeordnetes Element erstellen, um es in einer Schnittansicht zu platzieren.

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

Um die vertikale Polsterung von zu entfernen ProgressBar, können Sie dies tun

• Fix die Höhe von ProgressBar
• Verwenden Sie scaleY = "value" (value = height / 4) (4 ist die Standardhöhe des Fortschrittsbalkens)

Beispiel enthält 1 wrap_content ProgressBar, 1 8dp ProgressBar, 1 100dpProgressBar

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

Eine vollständige Lösung für dieses Problem wäre wie folgt. Nur für den Fall, dass jemand Codefragmente benötigt, habe ich dies getan.

1. Kopierte alle 8 unbestimmten horizontalen Fortschrittsbalken-Drawables
2. Bearbeiten Sie die Zeichen mit einem Bildmanipulator und entfernen Sie unnötige Auffüllungen
3. Kopierte das zeichnbare XML mit dem Namen progress_indeterminate_horizontal_holo.xml von der Android-Plattform
4. Kopierte den Stil Widget.ProgressBar.Horizontal und seine Eltern
5. Stellen Sie den Stil und min_height manuell im Layout ein

Hier ist die 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" />

Stilressourcen in meine lokale Stildatei kopiert.

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

Und schließlich setzen Sie die minimale Höhe in meiner lokalen Layoutdatei auf 4 dp.

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

Ich habe das gleiche Problem bei der Verwendung des Fortschrittsbalkens mit horizontalem Stil festgestellt.

Die Hauptursache ist, dass der Standard-9-Patch, der für den Fortschrittsbalken gezeichnet werden kann: (progress_bg_holo_dark.9.png) einige vertikale transparente Pixel als Auffüllung enthält.

Die endgültige Lösung, die für mich funktioniert hat: Passen Sie den Zeichnungsfortschritt und meinen Beispielcode wie folgt an:

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>

Layout-Snippet:

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

Ein Trick besteht darin, Ihrem Fortschrittsbalken negative Ränder hinzuzufügen.

Unten finden Sie ein Beispiel für den XML-Code, vorausgesetzt, er befindet sich oben auf Ihrem Bildschirm:

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

Subins Antwort scheint die einzige zu sein, die (derzeit) kein fragiler Hack ist, der in zukünftigen Versionen der Android ProgressBar beschädigt werden kann.

Aber anstatt mir die Mühe zu machen, die Ressourcen aufzubrechen, zu ändern und auf unbestimmte Zeit zu warten, habe ich mich für die MaterialProgressBar-Bibliothek entschieden , die das für uns erledigt:

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

In build.gradle:

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

Dieses Projekt hat eine schöne Demo , die die Unterschiede zwischen ihm und der eingebauten ProgressBar zeigt.

Wenn noch jemand nach einer Lösung sucht, überprüfen Sie diesen Kommentar

Stellen Sie die Mindesthöhe auf 4 dp ein

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

Ich benutze minHeight und maxHeigh. Es hilft für verschiedene API-Versionen.

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

Es muss beides verwenden. Api 23 funktioniert gut mit

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

Niedrigere API-Versionen erhöhen in diesem Fall jedoch die Höhe des Fortschrittsbalkens auf maxHeight.

Versuche Folgendes:

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

... und konfigurieren Sie dann den Fortschrittsbalken nach Ihren Wünschen, da zunächst ein mittelgroßer Balken mit einem gelben Fortschrittsfarbton und einem grauen Fortschrittshintergrund angezeigt wird. Beachten Sie auch, dass keine vertikale Polsterung vorhanden ist.

Verwenden Sie diese Option in 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>

Das Hinzufügen von android: progressDrawable zu einer in drawable definierten Ebenenliste hat das Problem für mich behoben. Es funktioniert, indem die Fortschrittsleiste in einer benutzerdefinierten Zeichenleiste maskiert wird

Beispielimplementierung unter https://stackoverflow.com/a/4454450/1145905

Ich benutze style="@style/Widget.AppCompat.ProgressBar.Horizontal"und es war ziemlich einfach, die Ränder loszuwerden. Dieser Stil ist:

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

Ich habe gerade die minimale / maximale Höhe überschrieben:

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

Es ist nicht erforderlich, ein neues Modul herunterzuladen oder ein FrameLayout um Ihre Fortschrittsleiste zu legen. Dies sind alles nur Hacks. Nur 2 Schritte:

In Ihrer 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, Ändern Sie die Werte nach Ihren Wünschen.

Mögen Sie die abgerundeten Ecken nicht?
Eckenradius entfernen

Magst du die Farben nicht? Ändern Sie die Farben usw. Fertig!

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

Im Allgemeinen sind dies die Schritte, um den Code von allem zu ändern, was Ihnen nicht gefällt. Finden Sie einfach den Quellcode und finden Sie heraus, was Sie ändern müssen. Wenn Sie dem ProgressBar-Quellcode folgen, finden Sie eine Datei namens progress_horizontal.xml, auf die verwiesen wird. Grundsätzlich, wie ich alle meine XML-Probleme löse.

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

Verwenden Sie einfach Material ProgressIndicator, der keinen versteckten Rand hat.

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

Eine einfache No-Tricks-Lösung, die mit jeder Android-Version kompatibel ist und keine externen Bibliotheken benötigt, fälscht ProgressBarzwei im ViewsInneren LinearLayout. Damit bin ich gelandet. Sieht ziemlich ordentlich aus und dieser Ansatz ist ziemlich flexibel - Sie können ihn auf funky Weise animieren, Text hinzufügen usw.

Layout:

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

}

Ergebnis (mit etwas Höhe hinzugefügt):

Die beste Lösung sollte sein

android:minHeight="0dp"

Keine Problemumgehung und funktioniert wie ein Zauber.