My buttons use two XML files to do some fancy color switching when pressed, but I have a problem with the color drawable (dunno what to call it)...
Here's a button
<Button
android:background="#drawable/main_loginbtn"
android:textColor="#color/main_loginbtn"
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:onClick="login"
android:text="Login" />
(I know I shouldn't use hardcoded strings, but I will change this later :)
Here's #drawable/main_loginbtn
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF"/>
<stroke android:width="2dp"
android:color="#00BFFF"/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#00BFFF"/>
<stroke android:width="2dp"
android:color="#FFFFFF"/>
</shape>
</item>
</selector>
And finally, here's the #color/main_loginbtn file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#00BFFF"/>
<item android:color="#FFFFFF"/>
</selector>
If I remove the textColor reference to #color/main_loginbtn, it will fix the problem and the text will reappear on the button (in black of course). So i'm pretty sure the problem is in the color drawable.
Normally, I wouldn't care about this, but it messes up the scaling on some buttons because of wrap_content, when there's no text inside the buttons.
Thanks for your time!
UPDATE
I tried creating a second random color drawable, and tested it on a TextView's textColor attribute, and the same problem arose... The entire TextView text disappeared.
So i'm thinking it's a problem with the selector?
Oh, and I also messed up in this question: Nothing "disappears" per say, but rather I can't see the text in the eclipse layout UI. When I run it in the emulator, everything works fine...
You need to set the transparency of your color.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#FF00BFFF"/>
<item android:color="#FFFFFFFF"/>
</selector>
The UI editor is assuming your colors are transparent if you don't (in other words it's defaulting to alpha = 00 if you don't set it).
Related
API 22. I want to set a border radius for my button, so I did this: How to make the corners of a button round?
(I tried out the answer that is ticked as correct). How to change the color of a button?
None of the methods here work either.
I used to set the background color of my button with android:backgroundTint. That was the only method working. Unfortunately, when I link the file to my button via android:background="#drawable/roundbutton", the color that I selected via android:backgroundTint wont work. As well as the solid color I defined int the drawable/roundbutton. Strangely the border Radius works:
My Code in activity_main.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/signinotherbutton"
android:background="#drawable/roundbutton"
android:backgroundTint="#color/grey"
android:textColor="#color/white"
android:textAllCaps="false"/>
My Code for the drawable/roundbutton.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<solid android:color="#color/grey"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<solid android:color="#color/grey"/>
</shape>
</item>
</selector>
Result: Button with the Radius I defined, but with the default color (ca. purple)
No, #color/grey is definitely grey, not purple.
Thanks for all answers
This is my code for the rounded button with the green color you can modify it as per your convenience.
Hope this will work.
button_rounded.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#57c885"/>
<corners
android:radius="25dp"/>
</shape>
I was able to solve my problem by creating a new style in the themes.xml and setting it as the theme of my button. Heres my code in the themes.xml:
<style name="Theme.ButtonWhite" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#color/white</item>
</style>
Code for the button in activity_main.xml:
android:theme="#style/Theme.ButtonWhite"
Im really asking myself why nobody else seems to have this problem as I had the exact same problem when creating a completely new project
Good evening everyone!
Is there a way to make my buttons look pressed without having to design two times each button?(one for pressed state, another for not pressed). I've designed the buttons' shapes using http://angrytools.com/android/button/, and using these shapes as the background for the buttons. I've heard about ImageButton but it doesnt seem to apply here as I need the buttons to have text.
Example of one of my background shapes:
Thanks very much in advance!
Try This Code, set this XML file as background to a button.
but_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#9df20901" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#892379" />
</shape>
</item>
</selector>
I had this working perfectly, although I need to change my code to listSelector, and now I don't know how to do it in order to maintain the border on left side.
In all listview lines I had one border:
border.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#E30E0E"/>
</shape>
</item>
<item android:left="5dip">
<shape android:shape="rectangle">
<solid android:color="#E3E3E3"/>
</shape>
</item>
</layer-list>
This sets the left side of each line, a border with color. But, as you can see, it has a default Solid color for background. With this code, whenever the user click on the item of the listview he doesn't understand if he has already clicked or not, because it has this solid color which doesn't change onState().
To make this working, I needed to create a listSelector with background gradients on state select plus state pressed.
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/listview_gradient_bg"/>
<item android:state_pressed="true"
android:drawable="#drawable/listview_gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/listview_gradient_bg_hover" />
</selector>
So, my question is: there's any way to "link" this two different piece of code?
Try to put this
<item android:left="5dip">
<shape android:shape="rectangle">
<solid android:color="#E3E3E3"/>
</shape>
</item>
into the listview_gradient_bg and listview_gradient_bg_hover drawables, then link the selector to each line in the adapter.
While I'm touching something in a ListView I get a blue highlight. Now I have another view elsewhere that I want to look the same; I tap on it and get a blue highlight. I thought this was a list_selector_background, but when I try that I get an orangey color.
My first question is: what is the style for the stock ListView item's background when selected?
Second (and more importantly), how do I figure this out? I'm looking for the chain of investigation, like...
List item
Look at the default theme (ABC)
Look at theme ABC for the style (QWE)
Look at style QWE and get the selected drawable (RTY)
Look at drawable RTY
Or whatever the actual investigation trail is
In your layout .xml for this view you want to add a new .xml called button_selector to the attributue android:background like so...
android:background="#drawable/button_selector"
Then create a new android .xml in the drawable folder called button_selector.xml containing this code....
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected -->
<item android:drawable="#drawable/button_selected"
android:state_focused="true" />
<!-- When not selected-->
<item android:drawable="#drawable/button_unselected" />
</selector>
Then create your button_unselected.xml and button_selected.xml in the drawable folder as well for the layout of each of the buttons.
this is an example of one of my button_unselected.xml files ....
<?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="#10000000" />
<padding
android:bottom="4dp"
android:top="4dp" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#20558e34" />
</shape>
</item>
</layer-list>
Hope this helps...
I define following drawable my_background_drawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/color_stateful" />
</shape>
</item>
<item android:drawable="#drawable/selector_png_drawable" />
</layer-list>
And I also define following color state list resource color_stateful.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="#FF00ff00"/>
<item android:color="#FFff0000"/>
</selector>
When I set given my_background_drawable as a background for some view then I cannot observe any change in color defined in color_stateful.xml for my shape, while the view state is actually changed (selector_png_drawable.xml is an indicator).
However everything is just fine when I modify my my_background_drawable.xml in the following way:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- This doesn't work
<item>
<shape android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/color_stateful" />
</shape>
</item>
-->
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:gravity="center"
android:shape="rectangle">
<solid android:color="#FF00ff00" />
</shape>
</item>
<item>
<shape android:gravity="center"
android:shape="rectangle">
<solid android:color="#FFff0000" />
</shape>
</item>
</selector>
</item>
<item android:drawable="#drawable/selector_png_drawable"" />
</layer-list>
So is it true that color state information is just lost when ColorStateList resource is used within a ShapeDrawable or am I doing it wrong?
A ColorStateList cannot be passed as an attribute for <solid> in an XML definition, or really any attribute of a <shape>. This attribute is inflated out of the XML as a Color resource and then passed to the Drawable's setColor() method, which only takes a single ARGB value.
There is only one type of Drawable instance that is designed to contain and present multiple items based on state, and that is StateListDrawable, which is what you get when you inflate a <selector>. All other Drawable instances are meant to simply be members of this collection or drawn standalone.
Note also that an inflated <shape> item is actually a GradientDrawable and not a ShapeDrawable. If you check out the inflate() method of GradientDrawable in the source, you can get all the detail you could ask for on how each attribute is used.
HTH!
In fact you can assign a ColorStateList as a solid color inside of the xml of a a shape -> GradientDrawable, but that is only a new feature in Lollipop.
Older versions of GradientDrawable only accept color resources.
Currently working on a compat alternative if you are interested.
You are doing it wring .... just Replace this
android:color="#color/color_stateful"
with
android:background="#color/color_stateful"
update:
in your program code in the my_background_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:gravity="center"
android:shape="rectangle">
<solid android:background="#color/color_stateful" /> <!--this is the chanage i made... here-->
</shape>
</item>
<item android:drawable="#drawable/selector_png_drawable" />
</layer-list>