Ich versuche, dieses Fortschrittsbalken-Design zu erreichen:
Der aktuelle Code, den ich habe, erzeugt Folgendes:
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 <clip
der 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?
android
android-drawable
android-progressbar
Georgi Koemdzhiev
quelle
quelle
Antworten:
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>
quelle
scale
mitandroid:scaleWidth="100%"
den Trick gemacht, um es mit abgerundeten Ecken anzuzeigen. Vielen DankVielen 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>
quelle
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>
quelle
Mit der Material Components Library können Sie das
ProgressIndicator
und dasapp:indicatorCornerRadius
Attribut verwenden.Etwas wie:
<com.google.android.material.progressindicator.ProgressIndicator style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate" app:indicatorSize="xxdp" app:indicatorCornerRadius="xdp"/>
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
.quelle