Fortschrittsbalken mit abgerundeten Ecken?

Ich versuche, Fortschritte zu erzielen-bar-design:
Fortschrittsbalken mit abgerundeten Ecken?

Den aktuellen code, den ich habe, produziert dies:
Fortschrittsbalken mit abgerundeten Ecken?

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>

Meine progress bar:

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

Habe ich versucht, indem <size> - Attribut auf die <shape> im <clip um die Fortschritte machen, die Form ein bisschen kleiner, aber es hat nicht funktioniert. Auch die Fortschrittsanzeige ist flach, und ich will gebogen werden, wie pro Entwurf. Was muss ich ändern, um zu erreichen das design?

InformationsquelleAutor Georgi Koemdzhiev | 2017-03-07
  1. 93

    , Wie die Fortschritte machen, die Form ein bisschen kleiner?

    Müssen Sie zu geben, die Fortschritte, die Sache ein wenig Polsterung, etwa so:

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

    Wie man den Fortschrittsbalken, um gebogen zu werden, wie pro-design?

    Ersetzen Sie die <clip></clip> element, mit <scale android:scaleWidth="100%"></scale>. Zu machen, dass die Form halten, seine form, wie es wächst - und nicht abgeschnitten.
    Leider wird es ein wenig ungewollten visuellen Effekt am Anfang - als die Form, die Ecken nicht genug Platz, um zu zeichnen. Aber es könnte gut genug sein für die meisten Fälle.

    Vollständige 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>
    • Danke für deine Antwort. Aber wenn ich bewarb mich auf Ihre Anregungen. der ganze Fortschrittsbalken bekam eingefärbt mit meiner Hauptfarbe (colorPrimaryDark) obwohl die Fortschritte Attribut als 10% Keine Ahnung, warum das passiert ist. Ich bearbeitet meine Antwort mit der progress bar-code als auch.
    • Danke! Erreicht der Fortschrittsbalken Kurven-Effekt. Jedoch, wenn ich Ihre Vorschläge der ganze Fortschrittsbalken gefüllt wird, als es es ist zu 100% Fortschritt. Wissen Sie, was ist die Ursache? Danke!
    • Hat funktioniert! Ich danke Ihnen so sehr für Ihre Zeit! 🙂
    • Bitte sein nicht ordnungsgemäß mit Farbverlauf Fortschritt, wenn wir uns 100 % der Breite um beide enden der Fortschritt aber auch einwickeln der Steigung, aber ich will zeigen, graidient nach Fortschritt Wert. wenn Sie keine Lösung bitten teilen
    • Wie können wir entfernen Sie die unerwünschte optische Wirkung - flat Fortschritt am Anfang, wenn die Fortschritte sehr klein ist ?? @EyalBiran
    • Mithilfe der systemeigenen ProgressBar-und Layer-Liste ist sehr einschränkend. Sie können leicht implementieren Sie eine benutzerdefinierte Statusleiste an Ihre Bedürfnisse anzupassen. Zum Beispiel, wenn Sie einen einfarbigen hintergrund - verwenden Sie einfach ein Vordergrund-9-Pfad, alles zu verstecken, aber die Fortschritte. Wenn Sie auf neuere Android-Versionen können Sie einfach die eingebaute Maske-Unterstützung (nicht unterstützt in älteren Versionen). Eine weitere option ist die Verwendung einer Bibliothek, könnte dies gut für Sie: github.com/akexorcist/Android-RoundCornerProgressBar . Wenn Sie weiterhin Probleme haben, poste bitte eine neue Frage. Cheers.
    • siehe Kommentar oben
    • Wenn ich deinen vollständigen code, der ganze Fortschrittsbalken bekam eingefärbt mit meiner Hauptfarbe (colorPrimaryDark), obwohl die progressis nicht 100%. Ich fügte hinzu, clip-tag unter @android:id/hintergrund, es behoben, aber den hintergrund gegangen. Meine temp-Lösung ist das entfernen von hintergrund-Artikel und das hinzufügen von hintergrund Farbe layout (ohne abgerundete Ecken).
    • Hallo, ich danke dir für die Antwort, seine arbeiten, aber ich habe nicht den Fortschritt sehen, wenn ich versuche, führen Sie den Fortschrittsbalken von 100 auf 0, das ich jemals versuchen Sie, einen Gegenstand mit der id secondaryProgress, aber es funktioniert nicht, hast du keine Lösung? bitte teilen, danke
    • In meinem Fall, die scale mit android:scaleWidth="100%" hat den trick, um es mit abgerundeten Ecken. Vielen Dank
    • scale statt clip vor allem funktioniert der trick. Dann Ruhe ist Ihre Anpassung, ob Sie möchten, dass die abgerundeten Ecken an beiden Seiten oder nur auf einer Seite. 🙂 Danke @EyalBiran für die Antwort.

    InformationsquelleAutor Eyal Biran
  2. 2

    Dank Georgi Koemdzhiev für eine schöne Frage und Bilder. Für diejenigen, die wollen, um ähnlich zu sein, tun die folgende.

    1) Erstellen Sie einen hintergrund für ein 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) In einer layout-Datei hinzufügen, 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>
    InformationsquelleAutor CoolMind
  3. 0

    Fortschrittsbalken mit abgerundeten Ecken?

    Sie erreichen können, progress bar, die den inneren Fortschritt, Farbe ,Rahmen
    Farbe,leere Fortschritte mit transparenter Farbe. 

    <?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>
    • Hi Ravichandra, vielen Dank für deine Antwort! Hinzufügen Sie können die Erklärung, warum dein code antwortet auf seine Frage? Andernfalls werde es schwierig sein, die für andere Benutzer. Danke!
    • Vielen Dank für dieses code-snippet, die möglicherweise bieten einige begrenzte, unmittelbare Hilfe. Eine richtige Erklärung würde eine deutliche Verbesserung Ihrer langfristigen Wert, indem Sie zeigen, warum dies eine gute Lösung für das problem und würde es mehr nützlich für zukünftige Leser mit anderen, ähnlichen Fragen. Bitte Bearbeiten Ihre Antwort hinzuzufügen eine Erklärung, einschließlich der Annahmen, die Sie gemacht haben. Darüber hinaus versuchen zu erklären, warum deine Antwort ist besser, als die anderen bereits gegebenen Antworten auf diese Frage.
    InformationsquelleAutor Ravichandra S V
Schreibe einen Kommentar