I have an edittextview with a black colored border. How can I change this border color depending on the state, using a selector.
I tried this:
<EditText
android:layout_width="fill_parent"
android:layout_height="48dp"
android:background="#drawable/black_rounded_borders"
/>
black_rounded_borders.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFFFF" />
<stroke
android:width="2dp"
android:color="#drawable/selector_black_border" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
selector_black_border.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#FF269ff5"/>
<item android:state_focused="true" android:color="#FF269ff5"/>
<item android:color="#FF000000"/>
</selector>
EDIT:
I changed selector_black_border.xml to color folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:color="#FF269ff5"/>
<item android:state_pressed="true" android:color="#FF269ff5"/>
<item android:state_selected="true" android:color="#FF269ff5"/>
<item android:state_focused="false" android:color="#FF000000"/>
<item android:state_pressed="false" android:color="#FF000000"/>
<item android:state_selected="false" android:color="#FF000000"/>
</selector>
<stroke
android:width="2dp"
android:color="#color/selector_black_border" />
But then it always remain in blue color("#FF269ff5") even when not focused/pressed.
Thank You.
you have to put the selector inside color/ and
<stroke
android:width="2dp"
android:color="#color/nameofcolor">
Related
I'm trying to change the size of a oval shape with the following code:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:thickness="70dp">
<solid android:color="#color/button_pressed" />
<size android:height="80dp"
android:width="80dp"/>
</shape>
But it doesn't change the size a bit. What am I doing wrong?
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/circle" />
<item android:state_focused="true"
android:drawable="#drawable/circle" />
<item android:drawable="#android:color/transparent" />
In my android application want my button to be green and rounded rectangle and when someone press the button it should change color to grey. So I have created an XML file with selector and give it to shape of rounded rectangle but problem is when I start my application the color is not green by default its transparent. Moreover when I press the button it shows rectangle shape so I think shapre is also not working. This is my Primary color:
<color name="colorPrimary">#669900</color>
My custom_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<item android:state_focused="true" android:state_pressed="false" android:color="#color/colorPrimary" android:drawable="#color/colorPrimary">
<shape
android:shape="rectangle" android:padding="10dp">
<solid android:color="#color/colorPrimary"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
</item>
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/gradient" >
<shape
android:shape="rectangle" android:padding="10dp">
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
</item>
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/gradient" >
<shape
android:shape="rectangle" android:padding="10dp">
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
</item>
</selector>
Also I have made a XML file for gradient which is gradient.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">
<gradient android:angle="90"
android:startColor="#880f0f10"
android:centerColor="#880d0d0f"
android:endColor="#885d5d5e"/>
</shape>
</item>
</layer-list>
To get your rectangles to be rounded, try something like the following code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<corners
android:radius="5dp"/>
<stroke
android:width="2dp"
android:color="#color/border_of_rectangle"/>
<solid
android:color="#color/color_inside_rectangle"/>
</shape>
</item>
</layer-list>
I've made something similar before here is how i did it
button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_default" android:state_pressed="false" android:state_focused="false"/>
<item android:drawable="#drawable/button_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/button_pressed" android:state_focused="true" />
</selector>
button_default.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="#dimen/radius" />
<solid
android:color="?attr/colorAccent" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"
/>
</shape>
button_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="#dimen/radius" />
<solid
android:color="?attr/colorAccent" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"
/>
</shape>
values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:buttonStyle">#style/BlueButton</item>
</style>
<style name="BlueButton" parent="android:style/Widget.Button">
<item name="android:background">#drawable/button</item>
<item name="android:textColor">#drawable/button_text_color</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">18sp</item>
</style>
</resources>
I'm also guessing that you might need to change the text color so here is the file
button_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimaryDark" android:state_pressed="false" android:state_focused="false"/>
<item android:color="?attr/colorAccent" android:state_pressed="true"/>
<item android:color="?attr/colorAccent" android:state_focused="true" />
</selector>
Is it possible to use a XML-Background ressource with an drawable and a <shape> attribute?
So I have this button
<Button
android:layout_marginRight="5dp"
android:id="#+id/send_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/send_button" />
Which has a background send_button.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_send_white_48dp" android:state_focused="true"/>
<item android:drawable="#drawable/ic_send_white_48dp" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_send_black_48dp"/>
</selector>
This works fine right now. But I also want to add a background-color behind the drawable and rounded corners like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="4dp" />
<gradient
android:angle="270"
android:endColor="#88b823"
android:startColor="#b0dc54" />
</shape>
So is it possible to combine these two XML ressources?
What I've tried so far, just displays the drawable and not the shape:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_send_white_48dp" android:state_focused="true"/>
<item android:drawable="#drawable/ic_send_white_48dp" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_send_black_48dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="4dp" />
<gradient android:angle="270"
android:endColor="#88b823"
android:startColor="#b0dc54" />
</shape>
</item>
</selector>
Thanks to #CommonsWare for pointing me in the right direction. This is the working code (currently only for the default state):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_send_white_48dp" android:state_focused="true"/>
<item android:drawable="#drawable/ic_send_white_48dp" android:state_pressed="true"/>
<item>
<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" />
<solid android:color="#color/action_bar" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/ic_send_black_48dp" />
</item>
</layer-list>
</item>
</selector>
I'm trying to make a button with state press and select,
I already did the same with tabs and it works but I don't know why here does not work.
I have done it like this:
button_sel.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#color/azulado"
android:endColor="#color/azulBrillante"
android:angle="270" />
<corners android:radius="#dimen/corner_radius" />
<stroke android:width="2px"
android:color="#color/blanco" />
</shape>
button_unsel.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#color/botonesD"
android:endColor="#color/botones"
android:angle="270" />
<corners android:radius="#dimen/corner_radius" />
<stroke android:width="2px"
android:color="#color/blanco" />
</shape>
And the selector, button.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_sel"
android:state_selected="true"
android:state_pressed="true"/>
<item android:drawable="#drawable/button_unsel"
android:state_selected="false"
android:state_pressed="false"/>
</selector>
And here I call the drawable as a background:
<style name="button">
<item name="android:background">#drawable/button</item>
<item name="android:textSize">#dimen/text_size</item>
<item name="android:padding">#dimen/padding_button</item>
<item name="android:textColor">#color/blanco</item>
</style>
Thank you!!!!
The first item in your selector is only used, when the button is pressed AND selected. If you want to use button_sel when your button is pressed OR selected, you should do something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_sel" android:state_selected="true" />
<item android:drawable="#drawable/button_sel" android:state_pressed="true" />
<item android:drawable="#drawable/button_unsel" />
</selector>
The items are evaluated from top to bottom, the last one is the default. Though I am not sure if state_selected makes sense for buttons.
Can use shape inline item.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape....>
</item>
<item android:state_selected="true" >
<shape....>
</item>
<item android:state_pressed="true" android:state_selected="true" >
<shape...>
</item>
</selector>
For sample :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" >
<shape
android:shape="rectangle">
<gradient android:startColor="#color/md_amber_300"
android:endColor="#color/md_amber_50"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#color/primaryColorDark_orange" />
</shape>
</item>
<item android:state_pressed="true" >
<shape
android:shape="rectangle">
<gradient android:startColor="#color/md_amber_300"
android:endColor="#color/md_amber_50"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#color/primaryColorDark_orange" />
</shape>
</item>
<item android:state_pressed="true" android:state_selected="true" >
<shape
android:shape="rectangle">
<gradient android:startColor="#color/md_teal_500"
android:endColor="#color/md_blue_400"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#color/md_amber_A400" />
</shape>
</item>
</selector>
This is my shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#80000000"
android:endColor="#80FFFFFF"
android:angle="45"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius="10dp" />
</shape>
This is what I want for button pressed
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#80FFFFFF"
android:endColor="#80000000"
android:angle="45"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius="10dp" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
I tried this code to link to the two shapes but when I set it as background it just made my button default gray.
and I added the selector to the background of my button, it has the right opacity as is but I need it to show a different colour (like white or something) when it is clicked.
anyone any idea?
I do it in this way:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/btn_bg_pressed"/>
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/btn_bg_pressed"/>
<item android:state_focused="true" android:drawable="#drawable/btn_bg_selected"/>
<item android:state_focused="false" android:state_pressed="false" android:drawable="#android:color/transparent"/>
</selector>
This is what i usually use for my theme