J'essaie de réaliser cette conception de barre de progression:
Le code actuel que j'ai produit ceci:
C'est le 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>
Ma barre de progression:
<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"/>
J'ai essayé d'ajouter <size>
attribut sur le <shape>
dans <clip
pour réduire la taille des progrès mais cela n’a pas fonctionné. En outre, la barre de progression est plate et je souhaite être courbé conformément à la conception. Qu'est-ce que je dois changer pour réaliser le design?
Comment rendre la forme de progression un peu plus petite?
Vous devez donner un peu de rembourrage à l’article de progression, comme ceci:
<item Android:id="@Android:id/progress"
Android:top="2dp"
Android:bottom="2dp"
Android:left="2dp"
Android:right="2dp">
Comment faire pour que la barre de progression soit courbée selon la conception?
Remplace le <clip></clip>
élément, avec <scale Android:scaleWidth="100%"></scale>
. Cela permettra à la forme de conserver sa forme au fur et à mesure de sa croissance - et non de la couper. Malheureusement, il aura un petit effet visuel indésirable au début, car les coins de la forme ne disposent pas de suffisamment d'espace pour être dessinés. Mais cela pourrait suffire dans la plupart des cas.
Code complet:
<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>
Merci à Georgi Koemdzhiev pour une belle question et des images. Pour ceux qui veulent faire semblable à la sienne, procédez comme suit.
1) Créez un arrière-plan pour 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) Créez une échelle pour le 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) Dans le fichier de mise en page, ajoutez le 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>
Vous pouvez obtenir une barre de progression avec une couleur de progression interne, une couleur de bordure, une progression vide avec une couleur 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>