Barre de progression avec des coins arrondis?

Question

Je suis en train de réaliser des progrès bar design:

Le code actuel que j'ai produit ce:

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 l' <shape> en <clip d'accomplir les progrès forme un peu plus petit, mais cela n'a pas fonctionné. Aussi, la barre de progression est à plat et je veux être incurvée par la conception. Ce que j'ai besoin de changer afin de réaliser la conception?

Answer 1

Comment faire le progrès forme un peu plus petit?

Vous avez besoin de donner de l'avancement de l'élément un peu de rembourrage, comme suit:

<item android:id="@android:id/progress"
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">

Comment faire de la barre de progression pour être incurvée par le design?

Remplacer l' <clip></clip> élément, <scale android:scaleWidth="100%"></scale>. Qui va prendre la forme de garder sa forme à mesure qu'il grandit - et ne pas couper. Malheureusement, il aura un petit effet visuel indésirable au début - comme la forme de coins n'ont pas assez d'espace pour tirer. Mais il pourrait être assez bon pour 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>

Answer 2

Grâce à Georgi Koemdzhiev pour une belle cause et des images. Pour ceux qui veulent faire de semblable à la sienne, procédez de la manière suivante.

1) Créer une toile de fond 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éer une échelle de l' 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 ajouter l' 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>