0

I'm trying to create a progress bar like in the picture below:

enter image description here

I don't need to create thise separations, my main goal is to find out how to to create the green colour for the current progress, and the grey colour for the background. Thanks

  • Possible duplicate of [How to change progress bar's progress color in Android](http://stackoverflow.com/questions/2020882/how-to-change-progress-bars-progress-color-in-android) – Chris Stillwell Mar 10 '16 at 21:37
  • Yes but the problem that some grey background colour apperaing –  Mar 10 '16 at 21:43

1 Answers1

0

I'm mostly pulling my answer from here. Your question has a lot of similarities, but I'm unsure if they are close enough to be closed. In the linked question, they use the ProgressBar View by defining it in the layout.xml:

<ProgressBar
android:id="@+id/ProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="50"
android:progressDrawable="@drawable/greenprogress" />

It should be noted that the last attribute is a drawable. This can be any drawable resource, but I think your best best is going to be to follow suit with their solution and create a similar xml file. In this case, greenprogess.xml (note that the file name matches "@drawable/greenprogress" above:

<?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="5dip" />
        <gradient
            android:startColor="#ff9d9e9d"
            android:centerColor="#ff5a5d5a"
            android:centerY="0.75"
            android:endColor="#ff747674"
            android:angle="270"
        />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
<clip>
    <shape>
        <corners android:radius="5dip" />
        <gradient
                android:startColor="#80ffd300"
                android:centerColor="#80ffb600"
                android:centerY="0.75"
                android:endColor="#a0ffcb00"
                android:angle="270"
        />
    </shape>
</clip>
</item>
<item
    android:id="@android:id/progress"
>
<clip>
    <shape>
        <corners
            android:radius="5dip" />
        <gradient
            android:startColor="#33FF33"
            android:endColor="#008000"
            android:angle="270" />
     </shape>
 </clip>
 </item>
 </layer-list>

Also note that the linked Question has a simpler Answer as well. However,I think this will give you more flexibility that you may be searching for.

Community
  • 1
  • 1
Matt
  • 5,404
  • 3
  • 27
  • 39