2

enter image description here

Hello, I want to create progress bar which should look like above image. Here, I have created one like below image.

enter image description here

Below is the xml file which I created in drawable folder under res,

progress.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 android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="@color/lightgreen"/>
            </shape>
        </clip>
    </item>

</layer-list>

But I want exactly the same progress bar as image 1 when progress continues, how to implement it?

thumber nirmal
  • 1,639
  • 3
  • 16
  • 27
  • 1
    Maybe [this similar question](http://stackoverflow.com/q/9921621/1051783) will help you? – gunar Nov 19 '13 at 06:03
  • i think if your use right image in background with rectangle corners.it will make you able to get what you want in the image you have shown in your question.You will just require to write a customize style for your progress bar. – NetStarter Nov 19 '13 at 06:09
  • @thumber nirmal Check out my answer. – GrIsHu Nov 19 '13 at 07:04

2 Answers2

3

Customizing a progress bar requires defining the attribute or properties for background and and progress of your progress bar.

create a xml file named customprogressbar.xml in your res-> drawable folder

customprogressbar.xml

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the background properties like color etc -->
<item android:id="@android:id/background">
<shape>
    <gradient
            android:startColor="#000001"
            android:centerColor="#0b131e"
            android:centerY="1.0"
            android:endColor="#0d1522"
            android:angle="270"
    />
</shape>
</item>
 <!-- Define the progress properties like start color, end color etc -->
 <item android:id="@android:id/progress">
<clip>
    <shape>
        <gradient
            android:startColor="#007A00"
            android:centerColor="#007A00"
            android:centerY="1.0"
            android:endColor="#06101d"
            android:angle="270"
        />
    </shape>
</clip>
</item>

Now you need to set the to set the progressDrawable property to customprogressbar.xml(drawable)

you can do it in xml file or in Activity(at run time)

In your xml do like following

<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="@drawable/custom_progressbar"         
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

at runtime do the following

  // Get the Drawable custom_progressbar                     
   Drawable draw= res.getDrawable(R.drawable.custom_progressbar);
   // set the drawable as progress drawavle
    progressBar.setProgressDrawable(draw);

For more details check out HERE

Also check How to Customize ProgressBar in Android?

GrIsHu
  • 29,068
  • 10
  • 64
  • 102
0

You need to change xml to mention start-color, end-color and center.

Mention color values properly: start-color: left, end-color: right and center.

Charan
  • 942
  • 1
  • 6
  • 18
  • hello. I implemented ur solution but I can't get the exact output, I can see only 2 colors here, 1: background color of progress bar and 2: when progess bar continues then only 1 color changes, it doesn't effect when it reaches at center. – thumber nirmal Nov 19 '13 at 07:05