Custom checkbox style in dialog

Question

I'm constructing a dialog with multi-choice items (checkboxes):

AlertDialog.Builder builder = new AlertDialog.Builder(this);

builder.setMultiChoiceItems(arrayResource, selectedItems, new DialogInterface.OnMultiChoiceClickListener() {
    // ...
});

AlertDialog dialog = builder.create();
dialog.show();

And I have a custom style for checkboxes:

<style name="CustomCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
    <item name="android:button">@drawable/btn_check</item>
    <item name="android:textColor">@android:color/holo_purple</item>
</style>

It works perfectly when applied to individual checkboxes in the layout, by setting style="@style/CustomCheckBox".

But how can I apply this style to the created dialog? Or alternatively for the entire theme...

If it's somehow relevant - I'm using minSdkVersion=14 and targetSdkVersion=19.

Update:

Now according to MattMatt's answer, I'm applying a custom checkbox style to the entire theme, and also settings a custom style for dialogs:

<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:checkboxStyle">@style/CustomCheckBox</item>
    <item name="android:dialogTheme">@style/CustomDialog</item>
    <item name="android:alertDialogTheme">@style/CustomDialog</item>
</style>

<style name="CustomCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
    <item name="android:button">@drawable/btn_check</item>
    <item name="android:checkMark">@drawable/btn_check</item>
</style>

<style name="CustomDialog" parent="@android:style/Theme.Holo.Light.Dialog">
    <item name="android:checkboxStyle">@style/CustomCheckBox</item>
    <item name="android:background">#aaf</item>
</style>

Now any checkbox added to the layout gets the custom style, and I'm able to change the dialog's background, but the checkboxes in the dialog aren't affected in any way...

mikeplate · Accepted Answer · 2014-01-29T16:00:32.750

11

Actually, calling setMultiChoiceItems does not result in CheckBox widgets but CheckedTextView widgets. [Updated] It also seems that changing the value for the checkMark attribute does not have any effect. However, by changing the value of the listChoiceIndicatorMultiple attribute for the CustomDialog style, I was able to change the drawable for the choices. Like this:

<style name="CustomDialog" parent="@android:style/Theme.Holo.Light.Dialog">
    <item name="android:listChoiceIndicatorMultiple">@drawable/btn_check</item>
    <item name="android:background">#aaf</item>
</style>

I discovered this from looking at the Android source code and finding that the template used for the multiple choice items in the dialog box is this one:

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/select_dialog_multichoice_holo.xml

edited Jan 29 '14 at 16:00

answered Jan 29 '14 at 12:15

mikeplate

1,149
8
10

Same thing, individual CustomCheckedTextView background and other elements can be changed by CustomCheckedTextView, but not the checkboxes... – yprez Jan 29 '14 at 12:59
Yes. I had time to create an example project myself and I can change the background of the CheckedTextView in the style. Unfortunately, setting the checkMark doesn't have any effect for me either. I did notice that checkedTextViewStyle requires API level 17 (4.2), but you have that right? – mikeplate Jan 29 '14 at 15:05
Just updated my findings in the answer after discovering the listChoiceIndicatorMultiple attribute. I've tested it and it works. – mikeplate Jan 29 '14 at 16:08

MattMatt · Answer 2 · 2014-01-26T14:44:50.043

3

Everything you're looking for can be found in Themes and Styles from the docs, and apply the attributes of your theme with the attributes found in Android attrs docs

To make it easy for you, follow this example:

<style name="myTheme" parent="@android:Theme.Holo">
    <!-- override default check box style with custom checkBox -->
    <item name="android:checkBoxStyle">@style/CustomCheckBox</item>

</style>
<style name="CustomCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
<item name="android:button">@drawable/btn_check</item>
<item name="android:textColor">@android:color/holo_purple</item>

Now, as long as "myTheme" is set to Activity, you have a custom check box ;)

Hope this helps, happy coding!

edited Jan 26 '14 at 14:44

answered Jan 26 '14 at 14:37

MattMatt

905
6
19

Thanks, I tried that... It affects the checkboxes specified in the activity layout, but not those in the dialog. Any ideas? – yprez Jan 26 '14 at 15:09
1

Try theming the dialogs as well, look for it in the docs I linked to. Should be something like `@style/myCustomDialog` placed in your theme. Then the actual style should be ` – MattMatt Jan 26 '14 at 19:28
There is no `android:dialogStyle`, but I managed to set a custom style in the builder with: `new AlertDialog.Builder(new ContextThemeWrapper(this, R.style.CustomDialog));`. But guess what, the custom dialog style affects every other property, but not the checkboxes... – yprez Jan 27 '14 at 08:26
1

I'm sorry, you're right there isn't a `android:dialogStyle` attribute. It is `android:dialogTheme` attribute. All of the attributes can be found at http://developer.android.com/reference/android/R.attr.html , to make it easier, usually `ctrl + f` will search for text on that page. just search "dialog" or "checkbox" – MattMatt Jan 27 '14 at 20:49
Thanks. Feels like I'm almost there. But the checkbox style still doesn't apply. E.g. I can change the background color of the dialog, but the checkboxes aren't affected... – yprez Jan 28 '14 at 09:35
Hmmm, theming can be a pain at first, just did my first one the other day. Make sure you are including all styles in your base theme. Read/search through the docs I linked to above, and that's the best I got. Sorry I couldn't be of more help... Should work if you are overriding base style with your styles in your theme. – MattMatt Jan 28 '14 at 19:48

score 0 · Answer 3 · answered Jan 28 '14 at 13:44

you can set drawables for all checkbox states. Drawables might be pictures or shapes, so you are free to set any background that you want to have.

1> make two png files for cb checked and unchecked states as you want them and store them in drawable folder of your app.

2> now make one customdrawble.xml file as below:

<?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/yourdrawable1" />
     <item android:state_checked="true" android:drawable="@drawable/yourdrawable2" />
     <item android:drawable="@drawable/yourdrawable1" /> <!-- default -->
</selector>

3> now make your checkbox as below:

<CheckBox
    android:id="@+id/chk"
    android:button=“@drawable/customdrawable”
    android:layout_alignParentLeft="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

the solution worked for me to change the display for single checkbox

I think you should re-read my question. I already have a custom style, that I'm able to apply to a *single* checkbox or the entire theme. The problem comes when I'm trying to customize the checkboxes in an alert dialog. — yprez, Jan 28 '14 at 14:24

Custom checkbox style in dialog

3 Answers3

Linked