programacion - manual de android en pdf

¿Barra de progreso con esquinas redondeadas?

Question

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

Intenté agregar el atributo <size> en el <shape> en el <clip para hacer que el progreso sea un poco más pequeño pero no funcionó. Además, la barra de progreso es plana y quiero ser curvada según el diseño. ¿Qué necesito cambiar para lograr el diseño?

Answer 1

Gracias a Georgi Koemdzhiev por una buena pregunta e imágenes. Para aquellos que quieran hacer similares a los suyos, hagan lo siguiente.

1) Crear un fondo para una 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) Crea una escala para la 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 la 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>

Answer 2

¿Cómo hacer que la forma del progreso sea un poco más pequeña?

Necesitas darle al elemento de progreso un poco de relleno, 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 sea curva según el diseño?

Reemplace el elemento <clip></clip> , con <scale android:scaleWidth="100%"></scale> . Eso hará que la forma mantenga su forma a medida que crece, y no se corte. Desafortunadamente, tendrá un pequeño efecto visual no deseado al principio, ya que las esquinas de 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>