mercredi 13 mai 2015

How can I improve my progress bar match to follow image (color, angle, shape etc.)

I have created a circular progress-bar, and have made it follow as closely as possible to the design in the image below.

But I'm having difficulty having it match the design in the picture below (color, angle, shape etc.):

I don't know how to match :

  • the color of the above?
  • or the shape?

Design I'm wanting to follow:

http://ift.tt/1H9IMFf

My current design looks like the below:

http://ift.tt/1ItUQo1

My code so far is below:

activity_main.xml

 <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/progressBar"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="75"
        android:progressDrawable="@drawable/style_circular_fill"
        android:secondaryProgress="10"
        android:layout_alignParentBottom="false"
        android:layout_alignParentStart="false"
        android:focusableInTouchMode="false"
        android:layout_alignParentTop="true"
        android:layout_marginTop="70dp"
        xmlns:android="http://ift.tt/nIICcg" />

style_circular_fill.xml

<item android:id="@android:id/secondaryProgress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true" >
            <gradient
                android:centerColor="#A9E2F3"
                android:endColor="#A9E2F3"
                android:startColor="#A9E2F3"
                android:type="sweep" />
        </shape>
    </rotate>
</item>
<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true" >
            <gradient
                android:centerColor="#26ce61"
                android:endColor="#26ce61"
                android:startColor="#26ce61"
                android:type="sweep" />
        </shape>
    </rotate>
</item>

Aucun commentaire:

Enregistrer un commentaire