This is waht I need to achieve with xml
drawable
for SeekBar
:
I tried many different variations and this is best I could make.
This is seekbar_thumb_drawable.xml
:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="@color/accent_color"/>
<size
android:height="20dp"
android:width="20dp" />
</shape>
This is seekbar_drawable.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:height="5dp"
android:top="7.5dp">
<shape
android:shape="rectangle">
<solid android:color="@color/seekbar_background" />
<corners android:radius="2.5dp" />
</shape>
</item>
<item
android:id="@android:id/progress"
android:height="10dp"
android:top="5dp">
<clip>
<shape
android:shape="rectangle">
<solid android:color="@color/seekbar_progress" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
Result on API 18: Problem is that lines are not verticaly centered.
Result on API 24: This display exactly how I want it to display.
Is there any possible solution to make this appear as on first picture on all devices from API 16
?
I do not want to use nine-patch, because I need to use color from resources. I tried padding
, gravity
, top
, bottom
, inter-shape
, line
, rectangle
but I could not find solution...
This is because the android:height
and android:width
for <item>
are only available for API 23 and above. If you use these attributes for API below 23, it will not give you an error, but simply ignore it.
In your case, android:height="5dp"
, and android:height="10dp"
are not being applied.
If you look at the relevant docs or , it says that these were added in API level 23.
You probably faced with already known issue, here is the solution for it. You should define maxHeight
and minHeight
of the SeekBar
the same as the height of it. Or you can even set maxHeight
to some big value like 1000dp
, if you exepect your height to be wrap_content
, like mentioned below the suggested answer in the same thread.
<SeekBar
android:thumb="@drawable/seekbar_thumb_drawable"
android:progressDrawable="@drawable/seekbar_drawable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="1000dp"
<!-- OR -->
android:maxHeight="16dp"
android:minHeight="16dp"/>
Make update in your drawable files.
In seekbar_thumb_drawable.xml :
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="oval">
<solid android:color="@color/accent_color" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
seekbar_drawable.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:height="5dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@color/seekbar_background" />
<corners android:radius="2.5dp" />
</shape>
</item>
<item
android:id="@android:id/progress"
android:height="10dp"
android:gravity="center">
<clip>
<shape android:shape="rectangle">
<solid android:color="@color/seekbar_progress" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
I m using gravity in item, So that drawable item draw in center.
I am also facing same issue in Low API of thumb drawable come above the line So what I did for it.
<SeekBar
android:id="@+id/seekbar_transparency"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingTop="@dimen/seekbar_thumb_size_space"
android:paddingBottom="@dimen/seekbar_thumb_size_space"
android:progress="100"
android:theme="@style/SeekbarTheme"
android:thumb="@drawable/thumb_drawable" />
style.xml
<!--Seekbar background change-->
<style name="SeekbarTheme" parent="Theme.AppCompat.Light">
<!-- active seekbar progress track color -->
<item name="colorControlActivated">@color/colorSeekBar</item>
<!-- inactive seekbar progress track color -->
<item name="colorControlNormal">@color/colorGray</item>
</style>
thumb_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="2.5dp"
android:left="2.5dp"
android:right="2.5dp"
android:top="2.5dp">
<shape android:shape="rectangle">
<size
android:width="@dimen/seekbar_thumb_size"
android:height="@dimen/seekbar_thumb_size" />
<corners android:radius="20dp" />
<solid android:color="#201DE9B6" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle">
<size
android:width="@dimen/seekbar_thumb_size"
android:height="@dimen/seekbar_thumb_size" />
<corners android:radius="20dp" />
<solid android:color="#AA1DE9B6" />
</shape>
</item>
</layer-list>
dimes.xml
<!--Seeckbar thumb size-->
<dimen name="seekbar_thumb_size">10dp</dimen>
<dimen name="seekbar_thumb_size_space">5dp</dimen>
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="3dp"
android:minHeight="3dp"
android:progressDrawable="@drawable/nnl_bg_seek_bar_progress"
android:splitTrack="false"
android:thumb="@drawable/nnl_sel_seek_bar_thumb"
tools:ignore="UnusedAttribute"
/>
The code above is my way. You may need to pay attention to these attributes: maxHeight / minHeight / splitTrack.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.