On devices running Android API <= 22, my custom SeekBar looks as follows:
On devices running Android API >= 23, my custom SeekBar looks as follows:
Why does my SeekBar drawable look incorrect on devices API >= 23? Here is my XML
seekbar_progress.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/seekbar_progress_bg" />
<item android:id="#android:id/progress">
<scale
android:drawable="#drawable/seekbar_progress_fill"
android:scaleWidth="100%" />
</item>
</layer-list>
seekbar_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">
<size
android:width="#dimen/seekbar_thumb"
android:height="#dimen/seekbar_thumb" />
<solid android:color="#color/white" />
<stroke
android:width="#dimen/seekbar_thumb_border"
android:color="#color/gray" />
</shape>
</item>
</layer-list>
layout file
<SeekBar
android:thumb="#drawable/seekbar_thumb"
android:progressDrawable="#drawable/seekbar_progress"
android:splitTrack="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:progress="50" />
For reasons unknown, by playing with minHeight and maxHeight I was able to get the desired behavior
Related
I have created custom drawable for AppCompatButton and it is working perfectly fine for API level 23 and above.
Here is custom drawable.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked" android:state_checked="false" />
</selector>
background_radio_checked -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-8dp"
android:right="-8dp"
android:top="-8dp">
<shape>
<solid android:color="#FFF1EEFF" />
<stroke
android:width="1dp"
android:color="#color/color_ask_question" />
</shape>
</item>
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_add_filled_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
background_radio_unchecked -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/color_employer_divider" />
<solid android:color="#F2F2F2" />
<corners android:topLeftRadius="#dimen/screen_margin_half_half_half" />
</shape>
</item>
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_add_empty_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
The drawables used are SVGs and have height width of 24dp.
How it looks on API 23+
But the same thing looks horrible on API level 21.
The image used in drawable stretches out to full width.
Tried removing animation but still the same results.
Not sure what wrong I'm doing or missing out.
Seems I'm using some property which is not available only from API 23 and above but not sure which one.
I'll answer by self, hopefully It'll help someone.
I was setting this drawable as background to my radiobutton and passing "#null" in button property.
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_radio_button_backgorund"
android:button="#null"
android:checked="true" />
This wasn't working, so I created two separate custom drawables for button and background.
For custom drawable for background I just used shape with border, background color, radius etc but NO ICON. And for custom drawable for Button, I used icon.
Assigning these two custom drawables in background and button makes things work in both, lollipop devices and above.
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_radio_background"
android:button="#drawable/custom_radio_button"
android:checked="true" />
-----------Custom drawable for background-----------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked_background" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked_background" android:state_checked="false" />
</selector>
background_radio_checked_background -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-8dp"
android:right="-8dp"
android:top="-8dp">
<shape>
<solid android:color="#EBFFF7" />
<stroke
android:width="1dp"
android:color="#118F5D" />
</shape>
</item>
</layer-list>
background_radio_unchecked_background -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/color_employer_divider" />
<solid android:color="#F2F2F2" />
<corners android:topRightRadius="#dimen/screen_margin_half_half_half" />
</shape>
</item>
</layer-list>
-----------Custom drawable for button-----------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked_button" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked_button" android:state_checked="false" />
</selector>
background_radio_checked_button -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_poll_filled_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
background_radio_unchecked_button -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_poll_empty_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
I'm still not sure why creating a single drawable which has both icon and border/background color, does not work with lollipop devices.
Suggestions, corrections on this solution are welcome.
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.
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.
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"/>
<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.
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>
I have a problem with my seekBar. When I am implementing to Android Studio, seebars look good and works perfectly.
Here is a photo.
View in Android Studio
When I run app in real device seekBars is ruined out, but I do not know why ?
Here is a photo of problem.
View in app on real device
Any idea ? of course here is a code ...
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:orientation="vertical">
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBarIsVisibleFps"
android:thumb="#drawable/thumb"
android:progressDrawable="#drawable/progressline"
android:max="1"
android:layout_weight="1"
android:progress="1"/>
... ... ...
Here is a code from thumb
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#c60026" />
<size
android:width="16dp"
android:height="16dp" />
</shape>
... and here is a progressline
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="line">
<stroke
android:width="12dp"
android:color="#878787" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="line">
<stroke
android:width="12dp"
android:color="#5e5e5e" />
</shape>
</clip>
</item>
</layer-list>
I need to set size for item in layer-list. For using as windowBackground in launch activity. I wrote this XML file and Android Studio displays it correctly. But in application the logo always full screen. How to make it?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:endColor="#000004"
android:gradientRadius="1000"
android:startColor="#1f3371"
android:type="radial" >
</gradient>
</shape>
</item>
<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/texture_5"
android:tileMode="repeat" />
</item>
<item android:drawable="#drawable/logo"
android:height="100dp"
android:width="77dp"
android:gravity="center"
>
</item>
</layer-list>
I found solution, but I expected better way.
Here is final code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:endColor="#000004"
android:gradientRadius="1000"
android:startColor="#1f3371"
android:type="radial" >
</gradient>
</shape>
</item>
<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/texture_5"
android:tileMode="repeat" />
</item>
<item android:drawable="#drawable/logo"
android:bottom="214dp"
android:top="214dp"
android:left="100dp"
android:right="100dp"
android:gravity="center"
android:tileMode="repeat"
>
</item>
</layer-list>
At least it works at xxhdpi and xhdpi without distortion.
Starting from API 23, it is possible to set width and height right within the "item" tag:
<item android:drawable="#drawable/logo" android:width="..." android:height="..." />
You can do the followin
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/blanco"/>
<item
android:width="200dp"
android:height="200dp"
android:gravity="center">
<bitmap
android:gravity="fill"
android:src="#drawable/your_image"
android:mipMap="true"/>
</item>
</layer-list>
Just change width and height
I had the same problem and found the solution here.
I had to use my vector drawable as the source to a bitmap object:
<item>
<bitmap
android:gravity="center"
android:src="#drawable/ic_logo_splash"/>
</item>
I am trying to create a simple layer-list drawable for my Android app. When I set the drawable as src of an ImageView it is not drawn correctly:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Just two ovals with a little offset to each other. Nothing special (just a test) but it does not work.
It seems that android:left|right|bottom|top is the problem. If I use only of of these commands the drawable is drawn correctly. If two or more are used the ImageView stays empty.
Works:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Does NOT work (like the first example):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="..." >
<item android:top="20dp" android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
What is wrong here?
EDIT: # Rod_Algonquin
I use a quite simple layout to test the drawable:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#aaa" >
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/testDrawable" >
</ImageView>
</LinearLayout>
It seems that the number of android:left|right|bottom|top arguments is not the source of the problem but the concrete value being used.
This drawable works fine and:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
This one does not draw anything (the ImageView is just transparent):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="1dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
The only difference here is the value of android:top. 1dp does not work. 2dp works without any problem.
Any idea?
The problem is that you are using the layer-list drawable as an image resource of the ImageView. android:src will only accept an image not a drawable thus giving you nothing in there.
solution:
Instead of putting it in the android:src put it in the background where you can freely use the drawable.
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/testDrawable" >
</ImageView>