I wanted to style a seek bar which looks like the one in the image below.

 ![enter image description here][1]


By using default seekbar I will get something like this:

![enter image description here][2]


So what I need is to only change the color. I need no extra styles. Is there any straight forward approach to do this or should I build my custom drawable.?


I tried building custom one, but I could not get the exact one as shown above.
After using custom drawable, what I get is as shown below:

![enter image description here][3]


  [1]: http://i.stack.imgur.com/jsisv.jpg
  [2]: http://i.stack.imgur.com/AEvnf.png
  [3]: http://i.stack.imgur.com/f1NBc.png

If I need to build the custom one, then please suggest how to reduce the width of the progress line and also the shape.

my custom implementation:

background_fill.xml:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; &gt;
    
        &lt;gradient
            android:angle=&quot;90&quot;
            android:centerColor=&quot;#FF555555&quot;
            android:endColor=&quot;#FF555555&quot;
            android:startColor=&quot;#FF555555&quot; /&gt;
    
        &lt;corners android:radius=&quot;1dp&quot; /&gt;
    
        &lt;stroke
            android:width=&quot;1dp&quot;
            android:color=&quot;#50999999&quot; /&gt;
        &lt;stroke
            android:width=&quot;1dp&quot;
            android:color=&quot;#70555555&quot; /&gt;
    
    &lt;/shape&gt;

progress_fill.xml

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; &gt;
    
        &lt;gradient
            android:angle=&quot;90&quot;
            android:centerColor=&quot;#FFB80000&quot;
            android:endColor=&quot;#FFFF4400&quot;
            android:startColor=&quot;#FF470000&quot; /&gt;
    
        &lt;corners android:radius=&quot;1dp&quot; /&gt;
    
        &lt;stroke
            android:width=&quot;1dp&quot;
            android:color=&quot;#50999999&quot; /&gt;
        &lt;stroke
            android:width=&quot;1dp&quot;
            android:color=&quot;#70555555&quot; /&gt;
    
    &lt;/shape&gt;


progress.xml

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    &lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; &gt;
    
        &lt;item
            android:id=&quot;@android:id/background&quot;
            android:drawable=&quot;@drawable/background_fill&quot;/&gt;
        &lt;item android:id=&quot;@android:id/progress&quot;&gt;
            &lt;clip android:drawable=&quot;@drawable/progress_fill&quot; /&gt;
        &lt;/item&gt;
    
    &lt;/layer-list&gt;


thumb.xml

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
        android:shape=&quot;oval&quot; &gt;
    
        &lt;gradient
            android:angle=&quot;270&quot;
            android:endColor=&quot;#E5492A&quot;
            android:startColor=&quot;#E5492A&quot; /&gt;
    
        &lt;size
            android:height=&quot;20dp&quot;
            android:width=&quot;20dp&quot; /&gt;
    
    &lt;/shape&gt;


seekbar:

 

    &lt;SeekBar
            android:id=&quot;@+id/seekBarDistance&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_alignParentLeft=&quot;true&quot;
            android:layout_alignParentTop=&quot;true&quot;
            android:layout_marginTop=&quot;88dp&quot;
            android:progressDrawable=&quot;@drawable/progress&quot;
            android:thumb=&quot;@drawable/thumb&quot; &gt;
        &lt;/SeekBar&gt;


All Custom Selectors Solutions on Gang of Coders

Total of 1 Custom Selectors Solutions

Android - styling seek bar