web-dev-qa-db-fra.com

Barre de progression avec des coins arrondis?

J'essaie de réaliser cette conception de barre de progression: enter image description here

Le code actuel que j'ai produit ceci: enter image description here

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?

androidandroid-drawableandroid-progressbar
42
Georgi Koemdzhiev

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>
99
Eyal Biran

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>
2
CoolMind

The code produce following progress bar
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>
0
Ravichandra S V