Develop Reference

Android: Drawable vertically alignment for SeekBar

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>

Spinner with arrow in left

I'm developing an app for RTL language and want to change the position of arrow to the left of Spinner !
Is there anyway to do this without creating a custom spinner ?

You must write a custom spinner.
Sample code is below. You can edit as you wish.
<Spinner
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="wrap content"
/>
#style/spinner_style:
<style name="spinner_style">
<item name="android:background">#drawable/background_spinner</item>
</style>
#drawable/background_spinner
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
<padding android:left="8dp"/>
</shape></item>
<item><bitmap android:gravity="left"
android:src="#drawable/ic_arrow_drop_down_grey600_36dp"/>
</item>
</layer-list></item>
</selector>

An easy and simple way to set arrow in left side is,You must create .xml file in drawable folder for that as written below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite" />
</shape>
</item>
<item
android:drawable="#drawable/ic_arrow_drop_down_black_24dp"
android:right="320dp"/>
</layer-list>
You can adjust above code as your need.
And set this file as background of a spinner widget as below:
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/layout_spinner"
android:background="#drawable/arrow_left"
android:elevation="5dp"/>

This worked in my case. I have English and Arabic languages in my app
<Spinner
android:textDirection="locale"
android:id="#+id/spnGender"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/array_gender"/>
This attribute is important.
android:textDirection="locale"
NOTE : I have used the default spinner without any customizations.

Create a .xml in drawable folder : #drawable/spinner_arrow.xml
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#ECF0F1" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:width="24dp" android:height="24dp" android:gravity="end|center_vertical" android:drawable="#drawable/ic_keyboard_arrow_down_black_24dp" />
</layer-list>
</item>
- Then add it to the styles.xml
<style name="spinner_style">
<item name="android:background">#drawable/spinner_arrow</item>
</style>
then add it to the spinner
style="#style/spinner_style"

dummy.xml (drawable should be of very low size-24dp)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list android:opacity="transparent">
<item android:width="100dp" android:end="300dp">
<bitmap android:src="#drawable/down_button_dummy_dummy" android:gravity="center"/>
</item>
</layer-list>
</item>
</selector>
layout file snippet
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:cardElevation="5dp"
>
<Spinner
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/dummy">
</Spinner>
</android.support.v7.widget.CardView>
Click here for rendered layout

What about this ?
First of all make sure that you enabled rtl support in AndroidManifest.xml
<application
...
android:supportsRtl="true"
...>
after that use this in your Spinner definition :
android:layoutDirection="rtl"
android:textDirection="rtl"

The easiest way: set in Spinner 'layoutDirection'= 'rtl'

Android - Setting Pressed State and Border on a TextView - Only one Background

I have 3 TextViews stacked vertically in a LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item3"/>
</LinearLayout>
I could apply a drawable to the background attribute to render a Border
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#color/pale_grey" />
<padding android:left="24dp" android:right="24dp"
android:top="12dp" android:bottom="12dp" />
</shape>
</item>
</layer-list>
I could also apply a selector, via a drawable, to the background property so that the TextView changed color depending on states such as Pressed. However there is only one background attribute.
I do not believe i can apply the <shape> xml and the <selector> xml within the same drawable. Therefore do I need to wrap a single layout element around each TextView just so can apply another background?
It looks like google solves this by encompassing border, padding and background colour into one drawable patch-9 image. I was hoping I didn't need to do that
Thanks

In the selector set the state pressed and unpressed with your XML's that render the border
Example:
<selector xlmns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/border_unpressed" android:state_pressed="false"/>
<item android:drawable="#drawable/border_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/border_unpressed" />
</selector>
Note:
Make sure to set the TextView attribute android:clickable="true"

<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" >
<corners
android:radius="4dp">
</corners>
<stroke android:width="1dp" android:color="#ffffff"/>
<gradient
android:startColor="#187cb6"
android:endColor="#187cb6"
android:angle="270"/>
</shape>
</item>
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/gradient" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/gradient" />
</selector>
</item>
</layer-list>

Narrowed Seekbar button on sliding in Android (with own thumb xml)

I've got problem with Android SeekBar.
When I use standard thumb (blue) it's OK, but when I use own theme like scrubber_control.xml there is problem - button is narrowed. I've tried setting minimal height, padding, adding height / width to scrubber_control item, but can't fix that strange issue.
layout
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/question_seekbar"
android:thumb="#drawable/scrubber_control"
/>
scrubber_control.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/scrubber_control_disabled_holo" />
<item android:state_pressed="true" android:drawable="#drawable/scrubber_control_pressed_holo" />
<item android:state_selected="true" android:drawable="#drawable/scrubber_control_focused_holo" />
<item android:drawable="#drawable/scrubber_control_normal_holo" />
</selector>

Create custom shape xmls in drawables which define the height and width of thumb
that is used for all three shapes used in scrubber_control.xml
For Example :
In drawable folder add these xmls
custom_scrubber_control_pressed_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_pressed_holo"/>
</layer-list>
custom_scrubber_control_focused_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_focused_holo"/>
</layer-list>
custom_scrubber_control_disabled_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_disabled_holo"/>
</layer-list>
custom_scrubber_control_normal_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_normal_holo"/>
</layer-list>
After that you just need to change your selector like this.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/custom_scrubber_control_disabled_holo" />
<item android:state_pressed="true" android:drawable="#drawable/custom_scrubber_control_pressed_holo" />
<item android:state_selected="true" android:drawable="#drawable/custom_scrubber_control_focused_holo" />
<item android:drawable="#drawable/custom_scrubber_control_normal_holo" />
</selector>

How to create custom spinner like border around the spinner with down triangle on the right side?

I want to develop custom spinner like line around spinner with triangle at right bottom corner.
like following image
For above fig I wrote my custom spinner like a
spinner.xml
<Spinner android:background="#drawable/spinner_background"/>
spinner_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<item android:state_pressed="true"
android:drawable="#drawable/spinner_ab_pressed_new_theme_bs">
<shape>
<solid
android:color="#color/White" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/skyblue" />
</shape>
</item>
<!-- spinner_ab_default_new_theme_bs -> this image for corner triangle -->
<item
android:drawable="#drawable/spinner_ab_default_new_theme_bs" >
<shape>
<solid
android:color="#color/White">
</solid>
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/gray"/>
</shape>
</item>
And I got output like following image
I tried lot but not achieve my goal please anybody have solution to develop spinner.
like above first one image.

Spinner
<Spinner
android:id="#+id/To_Units"
style="#style/spinner_style" />
style.xml
<style name="spinner_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/gradient_spinner</item>
<item name="android:layout_margin">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:popupBackground">#DFFFFFFF</item>
</style>
gradient_spinner.xml (in drawable folder)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#B3BBCC" android:startColor="#E8EBEF" android:type="linear" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:radius="4dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_arrow" />
</item>
</layer-list></item>
</selector>
#drawable/spinner_arrow is your bottom right corner image

This is a simple one.
your_layout.xml
<android.support.v7.widget.AppCompatSpinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner_background"
/>
In the drawable folder, spinner_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item>
<shape>
<solid
android:color="#color/colorWhite">
</solid>
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/colorDarkGrey"/>
</shape>
</item>
<item >
<bitmap android:gravity="bottom|right"
android:src="#drawable/ic_arrow_drop_down_black_24dp" />
</item>
</layer-list></item>
</selector>
Preview:

You can achieve the following by using a single line in your spinner declaration in XML:
Just add this: style="#android:style/Widget.Holo.Light.Spinner"
This is a default generated style in android. It doesn't contain borders around it though. For that you'd better search something on google.
Hope this helps.
UPDATE:
AFter a lot of digging I got something which works well for introducing border around spinner.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:top="8dp">
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
<stroke
android:width="2dp"
android:color="#9E9E9E" />
<padding
android:bottom="16dp"
android:left="8dp"
android:right="16dp"
android:top="16dp" />
</shape>
</item>
</layer-list>
Place this in the drawable folder and use it as a background for spinner. Like this:
<RelativeLayout
android:id="#+id/speaker_relative_layout"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/spinner_style"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/select_speaker_spinner"
style="#style/Widget.AppCompat.DropDownItem.Spinner"
android:layout_width="match_parent"
android:layout_height="70dp"
android:entries="#array/select_speaker_spinner_array"
android:spinnerMode="dialog" />
</RelativeLayout>

If you don't prefer to create multiple XML files, try:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:strokeWidth="1dp"
app:strokeColor="#color/black"
app:cardCornerRadius="4dp">
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"/>
</com.google.android.material.card.MaterialCardView>
To change the border color:
app:strokeColor="YOUR_COLOR_HERE"
To change the border's width:
app:strokeWidth="YOUR_DP_WIDTH_HERE"

There are two ways to achieve this.
1- As already proposed u can set the background of your spinner as custom 9 patch Image with all the adjustments made into it .
android:background="#drawable/btn_dropdown"
android:clickable="true"
android:dropDownVerticalOffset="-10dip"
android:dropDownHorizontalOffset="0dip"
android:gravity="center"
If you want your Spinner to show With various different background colors i would recommend making the drop down image transparent, & loading that spinner in a relative layout with your color set in.
btn _dropdown is as:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/spinner_default" />
<item
android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/spinner_default" />
<item
android:state_pressed="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/spinner_default" />
<item
android:state_focused="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:drawable="#drawable/spinner_default" />
</selector>
where the various states of pngwould define your various States of spinner seleti

To change only "background" (add corners, change color, ....) you can put it into FrameLayout with wanted background drawable, else you need to make nine patch background for to not lose spinner arrow. Spinner background is transparent.

You could design a simple nine-patch png image and use it as the background of spinner. Using GIMP you can put both border and right triangle in image.

It's super easy you can just add this to your Adapter -> getDropDownView
getDropDownView:
convertView.setBackground(getContext().getResources().getDrawable(R.drawable.bg_spinner_dropdown));
bg_spinner_dropdown:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<corners
android:bottomLeftRadius=enter code here"25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>