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.
Related
I have the following xml
<item
android:state_checked="true" >
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#color/White" />
</shape>
</item>
<!-- Second layer is a arrow bitmap -->
<item>
<bitmap android:src="#drawable/playbtn" />
</item>
</layer-list>
</item>
What I want is the image/bitmap to be loaded from the original size and the white padding to be 10dp.
How can I achieve that? What's happening is that the image is scaled depending if I add the padding/size tags above
Use the following code:
item_checked.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="#android:color/white" />
</shape>
</item>
<!-- Second layer is a arrow bitmap -->
<item android:drawable="#drawable/playbtn"
android:top="10dp" android:bottom="10dp"
android:left="10dp" android:right="10dp" />
</layer-list>
item_states.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/item_checked" />
<item android:drawable="#drawable/item_default" />
</selector>
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.
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 want to change the color of TextView on different states for example on pressed, on focused etc.
I'm using the following code yet, and I need some addition which changes the color of TextView.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke android:width="1dp" android:color="#FFFFFF" />
<corners android:radius="2dp"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
</item>
<item>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight" android:state_pressed="true">
<item
android:id="#android:id/mask"
android:drawable="#color/colorBackgroundDark"></item>
</ripple>
</item>
</layer-list>
Have you tried using a drawable selector?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/background_category_filter_selected" android:state_enabled="true" android:state_pressed="true"></item>
<item android:drawable="#drawable/background_category_filter_not_selected" android:state_enabled="true" android:state_pressed="false"></item>
</selector>
IN this example I have different drawables for when a button is pressed or not. There are other states you can use like active, focused...
Later I just do this
<Button
android:id="#+id/first_day_forward"
android:layout_width="0dp"
android:layout_height="36dp"
android:layout_marginEnd="15dp"
android:layout_marginTop="2dp"
android:layout_weight="2"
android:background="#drawable/background_filter_button_square"
android:text=">"
android:textAppearance="#style/fontMontseratReg"
android:textColor="#drawable/filter_text_button" />
In the example I used a Button, but I reckon it works with Text View as well.
To change the fill in your xml shape tag use solid, like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"/>
<corners android:radius="3dp"/>
</shape>
In you case you could do something like this:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape>
<stroke android:width="1dp" android:color="#FFFFFF" />
<corners android:radius="2dp"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
</item>
<item android:state_pressed="true">
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight" >
<item
android:id="#android:id/mask"
android:drawable="#color/colorBackgroundDark"></item>
</ripple>
</item>
</selector>
I want to implement a toggle button that can pass from "start" to "pause" with the following design:
I put a ToggleButton, and I tried to use the following selector, but it does not work. In fact, only the circled background is displayed, but not the vector images (xml files) of the play and pause icons...
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:drawable="#drawable/ic_pause_black_24dp">
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/colorAccent"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="false">
<layer-list>
<item android:drawable="#drawable/ic_play_arrow_black_24dp">
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/colorAccent"/>
</shape>
</item>
</layer-list>
</item>
What did I do wrong?
Thanks in advance
Must be because of the order, try it this way:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#color/colorAccent"/>
</shape>
</item>
<item android:drawable="#drawable/ic_pause_black_24dp">
</item>
</layer-list>
</item>
<item android:state_pressed="false">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#color/colorAccent"/>
</shape>
</item>
<item android:drawable="#drawable/ic_play_arrow_black_24dp">
</item>
</layer-list>
</item>