I have a spinner, whose background is defined in a drawable file:
<style name="spinner_style" parent="android:Widget.Material.Light.Spinner">
<item name="android:background">#drawable/background_spinner</item>
</style>
And the style:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/red" />
<corners android:radius="3dp" />
</shape>
The problem is that the arrow isn't displayed. It's due to: <item name="android:background">#drawable/background_spinner</item>.
How could I add it, for example within the drawable file?
Solution:
You should define an <layer-list> to do so:
<?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="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="0.33dp" android:color="#0fb1fa" />
<corners android:radius="0dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/arrow_down_gray" />
</item>
</layer-list>
</item>
</selector>
Then, replace the line: android:src="#drawable/arrow_down_gray" with your arrow drawable.
Finally, apply this as your style="#style/spinner_style" in your spinner.
Explaination: <layer-list> info can be found here: https://developer.android.com/guide/topics/resources/drawable-resource#LayerList and <bitmap> are used to draw an image on the screen. We choose the drawable image and set the gravity.
More info on this may be other senior experts can provide you.
Hope it helps.
Related
I tried this below code its showing normal effects.I want when i click on spinner the down should hide..
<?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>
Thank is Advance...
I have made my custom spinner like this follow these step:
Step 1: create one Drawable resource file inside your drawable folder say spinnerbg.xml and write below code in your xml file.
<?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="#color/spinner"
android:startColor="#color/spinner"
android:type="linear" />
<corners android:radius="0dp" />
</shape>
</item>
<item>
<bitmap android:gravity="bottom|right"
android:src="#drawable/dropdown" />
</item>
</layer-list>
</item>
</selector>
Step:2 Inside your style.xml write below code
<style name="spinner_style" >
<item name="android:background">#drawable/spinnerbg</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
</style>
step:3 And finallay inside your spinner use style like this.
<Spinner
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</Spinner>
I created a custom spinner. But I cant find the default spinner arrow resource.
In the line
<bitmap android:gravity="bottom|right" android:src="#drawable/RESOURCE" />
the drawable is needed.
spinner.xml
<?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="#color/white" android:type="linear" />
<stroke android:width="1dp" android:color="#color/primary_light" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item >
<bitmap android:gravity="bottom|right" android:src="" />
</item>
</layer-list>
</item>
</selector>
SOLUTION:
Download from: Link "arrow drop down"
Android Spinner widget by default uses below image - btn_dropdown_normal.9.png
There are several others for different states like pressed, diabled,etc.
So, the arrow is not a different resource instead it is a part of the complete dropdown image.
I am trying to create a custom design for EditText. See the attached image below,
I am trying to achieve this using a custom shape like the one defined below.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/places_ic_search"
android:width="30dp">
<shape
android:shape="rectangle"></shape>
</item>
<item
android:left="30dp"
android:drawable="#color/white">
<shape android:shape="rectangle" >
<gradient android:startColor="#000000" android:endColor="#FFFFFF" android:angle="90"/>
</shape>
</item>
</layer-list>
But the search icon is not displayed. How can I achieve this?
Thanks.
I have applied the answer by tiny sunlight and the EditBox looks like this, Search icon is no aligned to the left.
I edit my answer. Edit Shape.xml as below:
Shape.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<stroke android:width="5dp" android:color="#FF0000" />
</shape>
</item>
<item
android:left="3dp"
android:right="3dp"
android:top="3dp"
android:bottom="3dp"
>
<shape android:shape="rectangle" >
<stroke android:width="1dp" android:color="#FF0000" />\
<solid android:color="#FFFFFF" />
<corners android:radius="3dp" />
</shape>
</item>
<item android:gravity="left" android:left="10dp">
<bitmap android:src="#android:drawable/ic_menu_search" android:gravity="left">
</bitmap>
</item>
</layer-list>
I would do it like this :
For the border part, you could do it with a drawable like you did
For the search icon, instead of trying to put it in the drawable file, why not set it in you EditText xml layout, using android:drawableLeft, you can then set padding using android:paddingLeft and android:drawablePadding
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF" android:angle="90"/>
<corners android:radius="3dp"></corners>
</shape>
</item>
<item android:drawable="#drawable/places_ic_search"
android:gravity="center_vertical|left"
android:height="10dp"
android:width="30dp">
</item>
</layer-list>
How to create this type of checkbox in android when it pressed. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.
I want to create Like this
When it unchecked it will looks like :
Here is my XML code for checkbox:
<CheckBox
android:id="#+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:button="#drawable/custom_checkbox"/>
Here is custom_checkbox.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/checked" />
<item android:state_pressed="true"
android:drawable="#drawable/checked" />
<item android:drawable="#drawable/unchecked" />
</selector>
Here is checked.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#54d66A" android:endColor="#54d66A" android:angle="270"/>
<stroke android:width="4px" android:color="#ffc0c0c0" />
<size android:height="20dp" android:width="20dp"/>
</shape>
Here is my output:
You need to create a drawable with layer-list with two items as rectangle shape . one for the background and other as stroke with some margin.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient android:startColor="#54d66A" android:endColor="#54d66A" android:angle="270"/>
<size android:height="20dp" android:width="20dp"/>
</shape>
</item>
<item android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp">
<shape android:shape="rectangle" >
<stroke android:width="2dp" android:color="#ffc0c0c0" />
</shape>
</item>
</layer-list>
And , set this drawable as state_checked background.
How do we use a layer-list as a drawable for a button.
I have a button:
<item android:state_pressed="true">
<shape>
<gradient android:endColor="#color/white"
android:startColor="#color/grey_blue_light" android:angle="90" />
<stroke android:width="1dp" android:color="#color/aqua_blue" />
<corners android:radius="3dp" />
<padding android:left="10dp" android:top="10dp"
android:right="10dp" android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true">
</item>
<item>
</item>
Now I need a layer-list to be used as a shape when say button state is pressed:
<?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/aqua_blue" />
</shape>
</item>
<item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="1dp">
<shape android:shape="oval">
<solid android:color="#color/aqua_blue" />
</shape>
</item>
How do we use this layer list in the button selector?
Step-1
create three different layer_list xml under drawable folder for three different state of button. example the name of those xml is layer1.xml, layer2.xml, layer3.xml
<?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:angle="270"
android:startColor="#0000ff"
android:endColor="#0000dd"
android:type="linear"
/>
</shape>
</item>
</layer-list>
Step-2
create a selector xml named as btn_background.xml and pass the layer_list xml in drawable attribute
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/layer1">
</item>
<item android:state_focused="true" android:drawable="#drawable/layer2">
</item>
<item android:drawable="#drawable/layer3">
</item>
</selector>
step-3
Set the selector xml as background of the button android:background="#drawable/btn_background"
Mygod's answer is actually better than the accepted one. It works and only needs one xml file. Here's something similar that I did. It sets the background under a drawable with transparencies. The same could be done with a background and a shape:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<layer-list>
<item android:drawable="#color/Black"/>
<item android:drawable="#drawable/notes_white"/>
</layer-list>
</item>
<item>
<layer-list>
<item android:drawable="#color/White"/>
<item android:drawable="#drawable/notes_black"/>
</layer-list>
</item>
</selector>
Just replace the shape tag with your layer-list and everything will work fine.