Develop Reference

android checkbox text disappears when custom background is set

I want to make a weekly calendar, where every day is a custom checkbox with objective to look like the image bellow:
(http://i.imgur.com/WjIKCd0.png)
When the user clicks on a day (Monday in this case), the "background" and "button" checkbox changes as well the text color...
I made the drawables and it seems to work fine... check bellow the code:
Checkbox layout:
<CheckBox
android:id="#+id/selectMonday"
android:layout_width="40dp"
android:layout_height="40dp"
android:button="#drawable/ic_none"
style="#style/CheckBoxBackgroundView"
android:onClick="selectDay"
android:text="#string/monday_letter"
android:gravity="center"
android:checked="true"/>
(the drawable "ic_none", is simple a 135x135 "transparent" image with nothing in it...)
Style (CheckBoxBackgroundView):
<style name="CheckBoxBackgroundView">
<item name="android:background">#drawable/background_day_week_picker_box_selector</item>
<item name="android:textColor">#color/text_color_day_week_picker_box_selector</item>
<item name="android:textSize">#dimen/text_spinner_text</item>
<item name="android:textStyle">bold</item>
</style>
Background Selector (background_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="#drawable/background_day_of_week_picker_unselected" />
<item android:state_checked="true"
android:drawable="#drawable/background_day_of_week_picker_selected" />
</selector>
Background selected (background_day_of_week_picker_selected):
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- view background color -->
<solid
android:color="#color/red_color" >
</solid>
<!-- view border color and width -->
<stroke
android:width="3dp"
android:color="#color/transparent">
</stroke>
<!-- Here is the corner radius -->
<corners
android:radius="10dp" >
</corners>
</shape>
and finally the color selector (text_color_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:color="#color/red_color"></item>
<item android:state_checked="true"
android:color="#color/white"></item>
</selector>
I tried this in several devices... in some, it appears like it suppose to, in others the text disappears and it looks like this:
(http://i.imgur.com/Jy9FrPS.png)
probably is coincidence, but all the devices that worked are below 5 inches...
is there anything wrong with my code that I'm not seeing? anyone have any suggestions?
Thanks in advance

The problem is that the 135x135 button drawable is pushing the text out of the bounds of your CheckBox's width. Instead of using a drawable, you can just set android:button="#color/transparent".

Passing multiple source to single file in #drawable

Currently I have a single button with image bound to it and I wanted to add a click effect on that(not click event, a effect). Well it worked fine. I created two xml in my drawable folder and added styles and gradient to it. But now I want to add few more buttons and apply the same click effect on them. One way I can create multiple xml files for as many buttons created. But what happened to code reuse? I want to reuse the same xml files for styling other buttons too. Can it be done? thanks in advance.
My button.xml file is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="#drawable/stb" />
<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" />
<item android:drawable="#drawable/stb" />
</selector>
And my gradient.xml is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap android:src="#drawable/stb"/>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90" android:startColor="#990f0f10"
android:centerColor="#990d0d0f"
android:endColor="#995d5d5e"/>
</shape>
</item>
</layer-list>

You can set the very same xml selector drawable to as many views as you want. Just set the other button's background via XML:
android:background="#drawable/button"
or code:
yourSecondButton.setBackgroundResource(R.drawable.button);

Selector drawables

I have the following definition of an android style and selector applied to ListView, however I see no effect of gray gradient applied when I click on it. On click it immediately displays blue gradient.
As author of this example has written:
We want to apply this to our list selector. Instead of always showing
the same gradient, we want the gradient to change its start color from
grey to a light blue whenever a list item is pressed. Because we now
have two different list selectors—one for default state one for
pressed state—we need to keep them in separate files.
Can someone explain how it should be displayed properly ? Or I'm missing something ?
More general, what exactly I should expect to see on display screen ? Something like fluent transition from gray gradient to blue gradient on list item click ?
Update: this is how author 'sees' it, but when I click on item it looks only like on right side of picture. May I assume that author wants to see all items in list to be gray by default ? Or this state is not applicable to list view items ?
list_item_default.xml -> GRAY GRADIENT
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="0"
android:endColor="#FFFF"
android:startColor="#AFFF" />
<stroke
android:width="1dip"
android:color="#CCC" />
<corners android:radius="5px" />
</shape>
list_item_pressed.xml -> BLUE GRADIENT
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="0"
android:endColor="#FFFF"
android:startColor="#AA66CCFF" />
<stroke
android:width="1dip"
android:color="#CCC" />
<corners android:radius="5px" />
</shape>
list_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/list_item_default" android:state_pressed="false"/>
<item android:drawable="#drawable/list_item_pressed" android:state_pressed="true"/>
</selector>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyMoviesTheme" parent="#android:style/Theme.Black">
<item name="android:listViewStyle">#style/MyMoviesListView</item>
<item name="android:windowBackground">#drawable/film_bg</item>
</style>
<style name="MyMoviesTextAppearance" parent="#android:style/TextAppearance">
<!--<item name="android:textStyle">bold</item>-->
</style>
<style name="MyMoviesListView" parent="#android:Widget.ListView">
<item name="android:background">#color/list_background</item>
<item name="android:listSelector">#drawable/list_selector</item>
<item name="android:cacheColorHint">#android:color/transparent</item>
<item name="android:fastScrollEnabled">true</item>
<item name="android:footerDividersEnabled">false</item>
</style>
</resources>

Try adding a sentence：
<item
android:state_enabled="true"
android:drawable="#drawable/list_item_default"/>
<item
android:state_enabled="true"
android:drawable="#drawable/list_item_pressed"
android:state_pressed="true"/>

android:actionBarItemBackground different for ActionMode

You can change the background of a menu item on the actionbar using the android:actionBarItemBackground attribute.
However, this results in the background of menu items in ActionMode having the same color. Is there a way to have different backgrounds for menu items for the normal ActionBar and the ActionMode?
<item name="android:actionBarItemBackground">#drawable/selectable_background_mytheme</item>
selectable_background_mytheme:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="false" android:state_focused="true" android:drawable="#color/red" />
<item android:state_pressed="true" android:drawable="#color/blue" />
<item android:drawable="#android:color/transparent" />
</selector>

You should use android:actionLayout, see here: Android action bar menu item with actionLayout not working properly
Some other notes:
Your file "selectable_background_mytheme" should look something like this:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="0dp"
android:insetLeft="-5dp"
android:insetRight="-5dp"
android:insetTop="-5dp" >
<shape>
<solid android:color="#color/stacked_green" />
<stroke
android:width="3dp"
android:color="#color/accent_green" />
</shape>
</inset>
i.e. not a selector
Alternatively you could use a bitmap drawable.

XML drawable composed of png and overlay

I have a png button, which is enabled, non-pressed. When user click the button, I want only to darken the png. I need something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
//normal button with background my_button.png
<item
android:state_enabled="true"
android:drawable="#drawable/my_button" //my_button.png
/>
//pressed button with background my_button.png overlayed by 50% black
<item
android:state_pressed="true"
android:state_enabled="true"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<bitmap android:src="#drawable/my_button"/>
<color android:color="#00000088"/>
</RelativeLayout>
</item>
</selector>
Is there some way how to do that? Or do I must have another png file?

In my_button_bg.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/button_normal"/>
</selector>
button_normal is a png
button_pressed is an xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_normal"/>
<item android:drawable="#color/btn_bg_pressed_mask"/>
</layer-list>
where btn_bg_pressed_mask is a color:
<color name="btn_bg_pressed_mask">#19000000</color>

This should work
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:drawable="#drawable/my_button" />
<item>
<selector>
<item
android:state_pressed="true"
android:state_enabled="true">
<color android:color="#00000088" />
</item>
</selector>
</item>
</layer-list>

The order of the items in the selector XML make a difference. The first match is what is going to get displayed. As you see in marmor's answer, the normal state of the button is listed at the end.
Another thing to keep in mind is that if you are using 9-patch images (.9.png), the color will only be applied to the content area. So if you want the color to be overlayed over the whole image, make sure to mark the whole image as the content area.