Custom seekbar android

Question

I am trying to achieve custom seekbar as like below image

for that I did the code below
I have created drawable for seekbar progressDrawable let me know if code is required, I'll post it here.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/llScale"
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:orientation="vertical"
          android:paddingBottom="5dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="vertical"
    android:padding="5dp">

    <TextView
        android:id="@+id/sliderText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:text="Bernard"
        android:textColor="@color/blue"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/slider_background"
            android:padding="3dp">

            <SeekBar
                android:id="@+id/ratingBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:max="10"
                android:maxHeight="100dp"
                android:thumbTintMode="multiply"
                android:progressDrawable="@drawable/progressbar"
                android:thumb="@drawable/ic_slider_secondary"/>

            <TextView
                android:id="@+id/seekBarHint"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="Drag slider across"
                android:textColor="@color/dark_gray"/>
        </FrameLayout>

        <TextView
            android:id="@+id/progressText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_slider_progress"
            android:gravity="center"
            android:textColor="@color/white"
            android:textStyle="bold"/>
    </FrameLayout>
</LinearLayout>

but with above code what I'm getting is as below image
light red color is not being filled fully, it lefts some space and at the end circle goes out of the boundries.

Gradle

compileSdkVersion 23
buildToolsVersion "23.0.2"
defaultConfig {
    applicationId "com.myapp"
    minSdkVersion 16
    targetSdkVersion 23
    multiDexEnabled true
    versionCode 1
    versionName "1.0"
    testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}  

can anyone please help me with this

Answer 1

I used your code and created demo in which I did 2 changes as below:

1. Set thumbOffset with appropriate value for me 16.5dp worked.

2. Add one more property android:splitTrack="false" which will help removing which space around thumb drawable.

    <SeekBar
       android:id="@+id/ratingBar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:maxHeight="100dp"
       android:progressDrawable="@drawable/progressbar"
       android:thumb="@drawable/ic_slider_secondary"
       android:splitTrack="false"
       android:thumbOffset="16.5dp"/>  
   

Happy Coding :)