Create a custom SeekBar with a triangular background

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.

Empty seekbar

3/4 Full SeekBar

Full seekbar

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

9 patch patch

The result is as follows

Incorrect SeekBar

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

thanks

+4
source share

Source: https://habr.com/ru/post/1468982/


All Articles