Próbuję osiągnąć taki projekt paska postępu:
Obecny kod, który mam, daje to:
To jest kod:
<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>
Mój pasek postępu:
<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"/>
Próbowałem, dodając <size>
atrybut na <shape>
w <clip
celu uczynić postęp kształt nieco mniejszy, ale to nie działa. Ponadto pasek postępu jest płaski i chcę być zakrzywiony zgodnie z projektem. Co muszę zmienić, aby uzyskać projekt?
android
android-drawable
android-progressbar
Georgi Koemdzhiev
źródło
źródło
Odpowiedzi:
Jak nieco zmniejszyć kształt postępu?
Musisz trochę dopełnić element postępu, na przykład:
<item android:id="@android:id/progress" android:top="2dp" android:bottom="2dp" android:left="2dp" android:right="2dp">
Jak sprawić, by pasek postępu był zakrzywiony zgodnie z projektem?
Zamień
<clip></clip>
element na<scale android:scaleWidth="100%"></scale>
. Dzięki temu kształt zachowa swój kształt w miarę wzrostu - i nie zostanie odcięty. Niestety na początku będzie to miało trochę niechciany efekt wizualny - rogi kształtu nie mają wystarczająco dużo miejsca na rysowanie. Ale w większości przypadków może wystarczyć.Pełny kod:
<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>
źródło
scale
zandroid:scaleWidth="100%"
wystarczyły, aby wyświetlić go z zaokrąglonymi narożnikami. Wielkie dziękiZ komponentów biblioteki Materiały można użyć
LinearProgressIndicator
, aapp:trackCornerRadius
atrybut.Coś jak:
<com.google.android.material.progressindicator.LinearProgressIndicator android:indeterminate="true" app:trackThickness="xxdp" app:trackCornerRadius="xdp"/>
Działa również dla określonego wskaźnika postępu usuwania
android:indeterminate="true"
lub używaniaandroid:indeterminate="false"
Uwaga: wymaga co najmniej wersji
1.3.0-alpha04
.źródło
Podziękowania dla Georgi Koemdzhieva za miłe pytanie i zdjęcia. Dla tych, którzy chcą zrobić coś podobnego do jego, wykonaj następujące czynności.
1) Utwórz tło dla pliku
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) Utwórz skalę dla
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) W pliku układu dodaj rozszerzenie
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>
źródło
Możesz uzyskać pasek postępu z wewnętrznym kolorem postępu, kolorem obramowania, pustym postępem z przezroczystym kolorem.
<?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>
źródło