Seekbar Progress image issue

Question

I am trying to implement a seekbar , which has different progress color to signify the progress

What i want to implement is like this

but what i am ending up with is this

as you can see the progress light blue color img is not coming over the darkblue color line img

both of these are png images

XML for seekbar

 <SeekBar
        android:id="@+id/custom_seekBar"
        android:layout_width="365dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="-12dp"
        android:max="100"
        android:paddingLeft="7dp"
        android:paddingRight="20dp"
        android:progressDrawable="@drawable/progress_background_selector"
        android:thumb="@drawable/slider_button" />

android:progressDrawable="@drawable/progress_background_selector" referes this xml

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

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/normal_slider_bg"/>
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/normal_slider_bg"
            android:scaleWidth="100%" />
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/selected_slider_bg"
            android:scaleWidth="100%" />
    </item>

</layer-list>

Answer 1

Use .setProgressDrawable to change the color {Reference}

<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="@color/progress_start"
                android:endColor="@color/progress_end"
                android:angle="270" />
        </shape>
    </clip>
</item>

</layer-list>

---

Also Check this Link

Answer 2

public class LSeekBar extends SeekBar {

     public LSeekBar (Context context) {
            super(context);
            Initialise();
        }
        public LSeekBar (Context context, AttributeSet attrs) {
            super(context, attrs);
            Initialise();
        }
        public LSeekBar (Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            Initialise();
        }
        private void Initialise(){
            this.setProgressDrawable(getResources().getDrawable(
                    R.drawable.seek_bar_background));
        }

}

---->seek_bar_background(make in drawable)

<item android:id="@android:id/background">
    <nine-patch
        android:src="@drawable/progress_cyan"
        >
    </nine-patch>
</item>
<item android:id="@android:id/progress">
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <item>
            <clip>
                <bitmap
                    xmlns:android="http://schemas.android.com/apk/res/android"
                    android:src="@drawable/progress_red"
                    />
            </clip>
        </item>
    </layer-list>
</item>

normal_slider_bg it should be nine-patch.in your case.

======>SeekBar as

                   <com.TestView.views.LSeekBar
                    android:id="@+id/seekBar1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_centerVertical="true"
                    android:maxHeight="6dip"
                    android:minHeight="6dip"
                    android:paddingBottom="10dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="10dp"
                    android:thumb="@drawable/thumbler_small" 
                    android:layout_toLeftOf="@+id/imageButton2"/>