All done in XML
(no .png
images). The clever bit is border_shadow.xml
.
All about the vectors
these days...
Screenshot:
This is your SeekBar
(res/layout/???.xml
):
<SeekBar
android:id="@+id/seekBar_luminosite"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:progress="@integer/luminosite_defaut"
android:progressDrawable="@drawable/seekbar_style"
android:thumb="@drawable/custom_thumb"/>
Let's make it stylish (so you can easily customize it later):
res/drawable/seekbar_style.xml
:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/border_shadow" >
</item>
<item
android:id="@android:id/progress" >
<clip
android:drawable="@drawable/seekbar_progress" />
</item>
</layer-list>
res/drawable/custom_thumb.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="@color/colorDekraOrange"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
</item>
</layer-list>
res/drawable/seekbar_progress.xml
:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/progressshape" >
<clip>
<shape
android:shape="rectangle" >
<size android:height="5dp"/>
<corners
android:radius="5dp" />
<solid android:color="@color/colorDekraYellow"/>
</shape>
</clip>
</item>
</layer-list>
res/drawable/border_shadow.xml
:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners
android:radius="5dp" />
<gradient
android:angle="270"
android:startColor="#33000000"
android:centerColor="#11000000"
android:endColor="#11000000"
android:centerY="0.2"
android:type="linear"
/>
</shape>
</item>
</layer-list>