Fortschrittsbalken mit abgerundeten Ecken?

81

Ich versuche, dieses Fortschrittsbalken-Design zu erreichen: Geben Sie hier die Bildbeschreibung ein

Der aktuelle Code, den ich habe, erzeugt Folgendes: Geben Sie hier die Bildbeschreibung ein

Dies ist der Code:

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

Mein Fortschrittsbalken:

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

Ich habe versucht , das Hinzufügen <size>Attribut auf die <shape>in <clipder Fortschritt etwas kleiner Form zu machen , aber es hat nicht funktioniert. Außerdem ist der Fortschrittsbalken flach und ich möchte gemäß Design gebogen werden. Was muss ich ändern, um das Design zu erreichen?

Georgi Koemdzhiev
quelle

Antworten:

162

Wie kann man die Fortschrittsform etwas verkleinern?

Sie müssen dem Fortschrittselement eine kleine Polsterung geben, wie folgt:

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

Wie kann der Fortschrittsbalken gemäß dem Design gekrümmt werden?

Ersetzen Sie das <clip></clip>Element durch <scale android:scaleWidth="100%"></scale>. Dadurch behält die Form ihre Form, wenn sie wächst - und nicht abgeschnitten. Leider hat es zu Beginn einen etwas unerwünschten visuellen Effekt, da die Formecken nicht genügend Platz zum Zeichnen haben. Aber es könnte für die meisten Fälle gut genug sein.

Vollständiger Code:

<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>
Eyal Biran
quelle
4
@habibullah Die Verwendung der nativen ProgressBar und Layer-Liste ist sehr einschränkend. Sie können ganz einfach einen benutzerdefinierten Fortschrittsbalken implementieren, der Ihren Anforderungen entspricht. Wenn Sie beispielsweise einen einfarbigen Hintergrund haben, verwenden Sie einfach einen 9-Pfad im Vordergrund, um alles außer dem Fortschritt auszublenden. Wenn Sie auf neuere Android-Versionen abzielen, können Sie einfach die integrierte Maskenunterstützung verwenden (in älteren Versionen nicht unterstützt). Eine andere Möglichkeit ist die Verwendung einer Bibliothek. Dies kann für Sie von Vorteil sein : github.com/akexorcist/Android-RoundCornerProgressBar . Wenn Sie immer noch Probleme haben, stellen Sie bitte eine neue Frage. Prost.
Eyal Biran
1
@AkshayMahajan siehe Kommentar oben
Eyal Biran
1
Als ich Ihren vollständigen Code angewendet habe, wurde der gesamte Fortschrittsbalken mit meiner Hauptfarbe (colorPrimaryDark) gefärbt, obwohl der Fortschritt nicht 100% beträgt. Ich habe ein Clip-Tag unter @android hinzugefügt: id / background, es wurde behoben, aber der Hintergrund ist verschwunden. Meine temporäre Lösung besteht darin, Hintergrundelemente zu entfernen und dem Layout Hintergrundfarbe hinzuzufügen (ohne abgerundete Ecken).
Oğuzhan Koşar
5
In meinem Fall hat das scalemit android:scaleWidth="100%"den Trick gemacht, um es mit abgerundeten Ecken anzuzeigen. Vielen Dank
Edison Spencer
1
Vielen Dank. Du hast meinen Tag gerettet.
Nguyễn Anh Tuấn
8

Vielen Dank an Georgi Koemdzhiev für eine schöne Frage und Bilder. Für diejenigen, die ähnlich wie er machen wollen, machen Sie Folgendes.

1) Erstellen Sie einen Hintergrund für a 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) Erstellen Sie eine Skala für die 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) Fügen Sie in der Layoutdatei die 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>
CoolMind
quelle
4

Der Code erzeugt den folgenden Fortschrittsbalken
Sie können einen Fortschrittsbalken sowohl mit der inneren Fortschrittsfarbe als auch mit der Rahmenfarbe und dem leeren Fortschritt mit transparenter Farbe erzielen.

<?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>
Ravichandra SV
quelle
Hallo Ravichandra, danke für deine Antwort! Können Sie eine Erklärung hinzufügen, warum Ihr Code seine Frage beantwortet? Andernfalls ist die Verwendung für andere Benutzer schwierig. Vielen Dank!
Nander Speerstra
Vielen Dank für dieses Code-Snippet, das möglicherweise nur begrenzte, sofortige Hilfe bietet. Eine richtige Erklärung würde ihren langfristigen Wert erheblich verbessern, indem sie zeigt, warum dies eine gute Lösung für das Problem ist, und es für zukünftige Leser mit anderen, ähnlichen Fragen nützlicher machen. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der von Ihnen getroffenen Annahmen. Versuchen Sie außerdem zu erklären, warum Ihre Antwort besser ist als die anderen Antworten, die bereits auf diese Frage gegeben wurden.
Qw3ry
3

Mit der Material Components Library können Sie das ProgressIndicatorund das app:indicatorCornerRadiusAttribut verwenden.
Etwas wie:

    <com.google.android.material.progressindicator.ProgressIndicator
        style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate"
        app:indicatorSize="xxdp"
        app:indicatorCornerRadius="xdp"/>

Geben Sie hier die Bildbeschreibung ein

Es funktioniert auch für den bestimmten Fortschrittsindikator ( style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Determinate").

Hinweis: Es ist mindestens die Version erforderlich 1.3.0-alpha03.

Gabriele Mariotti
quelle