customized seekBar

Question

My goal is to get like this result in my SeekBar

Here is a my code

  <SeekBar
                    android:id="@+id/seekBar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:max="10"
                    android:splitTrack="false"
                    android:progress="1"
                    android:progressDrawable="@drawable/seek_bar_ruler"
                    android:thumb="@drawable/seek_bar_slider" />

seek_bar_ruler.xml code

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
    android:height="@dimen/dimen_p_20">
    <shape android:shape="rectangle">
        <solid
            android:color="#D8D8D8" />
        <corners android:radius="@dimen/dimen_p_16" />
    </shape>
</item>
<item android:id="@android:id/progress"
    android:height="@dimen/dimen_p_20">
    <clip>
        <shape android:shape="rectangle">
            <solid
                android:color="#0099FF" />
            <corners android:radius="@dimen/dimen_p_16" />
        </shape>
    </clip>
</item>

seek_bar_slider.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>

<solid android:color="@android:color/white" />
<stroke
    android:width="@dimen/dimen_p_10"
    android:color="@color/light_blue"
    />
<size
    android:width="@dimen/dimen_p_40"
    android:height="@dimen/dimen_p_40"
    />

With my code,I got like this result

As you can see second first image is from Scatch file and second with code and both are not same. I have several questions 1) Is any way to add shadow in thumb xml file? (like first image) 2) How I can decrease progress height ? In second image, progress height is large 3) When progress is 0 position thumb image 'not in left position thanks

Ehsan msz · Answer 1 · 2019-10-23T13:49:52.347

For API level 23 and higher

in seek_bar_ruler.xml , wrap <layer-list> with <inset> and set android:insetToplike this:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
     android:insetTop="8dp">

     <layer-list>
         <item
             android:id="@android:id/background"
             android:height="6dp"> <!--changed-->
             <shape android:shape="rectangle">
                 <solid android:color="#D8D8D8" />
                 <corners android:radius="16dp" />
             </shape>
         </item>

         <item
             android:id="@android:id/progress"
             android:height="6dp">  <!--changed-->
             <clip>
                 <shape android:shape="rectangle">
                     <solid android:color="#0099FF" />
                     <corners android:radius="16dp" />
                 </shape>
             </clip>
         </item>
     </layer-list>

 </inset>

result :

customized seekBar

1 Answers1