Estoy tratando de lograr este diseño de barra de progreso:
El código actual que tengo produce esto:
Este es el código:
<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>
Mi barra de progreso:
<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"/>
He intentado añadir <size>
atributo en el <shape>
de <clip
hacer que el progreso a dar forma a un poco más pequeña, pero no funcionó. Además, la barra de progreso es plana y quiero que esté curvada según el diseño. ¿Qué necesito cambiar para lograr el diseño?
android
android-drawable
android-progressbar
Georgi Koemdzhiev
fuente
fuente
Respuestas:
¿Cómo hacer que la forma de progreso sea un poco más pequeña?
Debe darle un poco de relleno al elemento de progreso, así:
<item android:id="@android:id/progress" android:top="2dp" android:bottom="2dp" android:left="2dp" android:right="2dp">
¿Cómo hacer que la barra de progreso se curve según el diseño?
Reemplace el
<clip></clip>
elemento con<scale android:scaleWidth="100%"></scale>
. Eso hará que la forma mantenga su forma a medida que crece, y no se corta. Desafortunadamente, tendrá un pequeño efecto visual no deseado al principio, ya que las esquinas de las formas no tienen suficiente espacio para dibujar. Pero podría ser lo suficientemente bueno para la mayoría de los casos.Código completo:
<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>
fuente
scale
conandroid:scaleWidth="100%"
hizo el truco para mostrarlo con esquinas redondeadas. Muchas graciasGracias a Georgi Koemdzhiev por una bonita pregunta e imágenes. Para aquellos que quieran hacer algo similar al suyo, haga lo siguiente.
1) Cree un fondo para un
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) Cree una escala para el
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) En el archivo de diseño, agregue el archivo
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>
fuente
Con la biblioteca de componentes de materiales puede utilizar
ProgressIndicator
y elapp:indicatorCornerRadius
atributo.Algo como:
<com.google.android.material.progressindicator.ProgressIndicator style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate" app:indicatorSize="xxdp" app:indicatorCornerRadius="xdp"/>
Funciona también para el indicador de progreso determinado (
style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Determinate"
).Nota: requiere al menos la versión
1.3.0-alpha03
.fuente
Puede lograr una barra de progreso con color de progreso interno, color de borde, progreso vacío con color transparente.
<?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>
fuente