I am trying to create a custom SeekBar with a triangular background. The thumb icon is missing. Below are some images of what I want to achieve.



Below is my code
Res / Drawable / segment_bg
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <clip> <shape> <gradient android:startColor="#FF5e8ea3" android:centerColor="#FF32a0d2" android:centerY="0.1" android:endColor="#FF13729e" android:angle="270" /> </shape> </clip> </item> </layer-list>
Res / Drawable / Segment
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/slider" android:dither="true" /> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <gradient android:startColor="#80028ac8" android:centerColor="#80127fb1" android:centerY="0.75" android:endColor="#a004638f" android:angle="270" /> </shape> </clip> </item> <item android:id="@android:id/progress" android:drawable="@drawable/segment_bg" /> </layer-list>
activity.xml
<SeekBar android:id="@+id/frequency_slider" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="100dp" android:max="20" android:progress="0" android:secondaryProgress="0" android:progressDrawable="@drawable/segment" />
Used image with 9 patches

The result is as follows

My questions are: how can I find the shape for the triangle? Then, how to remove the thumb icon is not necessary.
thanks
source share