android checkbox text disappears when custom background is set

Question

I want to make a weekly calendar, where every day is a custom checkbox with objective to look like the image bellow:

(https://i.stack.imgur.com/KyEAT.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:

(https://i.stack.imgur.com/Nnuxt.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

Answer 1

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".