Custom checkboxes for CheckBoxPreferences on Android

For an App I’m writing I need to use custom checkboxes in a PreferenceScreen. I want to use the CheckboxPreferences as it’s designed for that. Many searches lead to StackOverflow, but caused me a stack overflow as well as they didn’t work. In this (short) post I outline my findings and provide a working solution step by step.

Step 1

You need a custom checkbox. This can be defined in a drawable. In this case I’ve called the file checkbox.xml and placed it in the drawable folder. The code defines the images for two states: if the checkbox is enabled and when it’s disabled. For this file looks like this:

Step 2

We need a layout for customized preferences. This layout defines the same stuff as the ‘ regular’  preference does (text, summary etc.). Note the last part in the following file (called checkbox_preference.xml and placed in the layout folder). It loads our custom checkbox!

Step 3

Now the code below is the actual layout which you inflate with your SharedPreferences in your Activity. The layout attribute is used to put the custom layout with the custom checkbox as an item in there.

Step 4

There is no step 4. You’re done! It shouldn’t be that hard to find and use these things. Unfortunately many same questions, but more different (and often not / not completely working replies / solutions) are posed on sites like StackOverflow which makes it harder to find the real solution. Hopefully this post is a worthy addition to the interwebs and a valuable resource for Android designers facing the same problem.

12 reacties op “Custom checkboxes for CheckBoxPreferences on Android

  1. Donal schreef:

    One issue I’ve noticed with this is that when you then click on the checkboxpreference it doesn’t work and onClick and onChange listeners don’t work.

    Have you resolved this issue?

  2. Donal schreef:

    In response to my own question in case anyone comes across it I removed the checkbox in the xml and this worked, the checked was overwriting the actual View underneath, removing it allows the checkboxpreferences own checkbox to display and all works well.

  3. Thanks for posting your solution as well Donal! I had to pull the project where I came across the issue from my version control system, but didn’t have time to do that and look into the issue in such a short term.

    Cheers,

    Patrick

  4. qingu schreef:

    This almost works great. First off, I agree with the author, that often times on StackOverflow it is hard to find the answers that actually work and usually they are not complete, but piece together previous answers and can only be understood in context.
    Now, of course there are always many solutions to any problem and those depend on the context and of course most stuff out there does not work directly for everyone due to different versions/prerequisites/runtime &c.
    Anyways, the code (if you will call some xml files code) looks good, but to make the buttons work, you have to add two lines in layout/checkbox_preference.xml from above:

    Thanks!

  5. qingu schreef:

    Hmm… the actual code did not show up in the post. In the CheckBox code add:

    android:focusable=”false”
    android:clickable=”false”

    Good luck!

  6. Antiplod schreef:

    Thank you gang – worked like a dream!

  7. linus.du schreef:

    GGGGGGGGGGGGGGGGGGGGGGGGGGreat…..

  8. Keust schreef:

    Like qingu sad, if you need to implement onClickListener or onSharedPreferenceChanged in your PreferenceActivity you must add
    android:focusable=”false”
    android:clickable=”false”

  9. ssccr schreef:

    I don’t understand the step 3,can u explain where I put the code? Is it an xml file?

  10. katyayani schreef:

    hi , I have used your solution . however after adding the checkbox_preference.xml to my checkboxpreference layout , I dont see the checkbox icon next to the text . Am i missing something ? onSharedPreferenceChanged works with out any issue though.

  11. realwelder schreef:

    This seems to be working almost perfectly, the problem I am having is that it shows the original checkbox next to my styled checkbox. Has anyone else had this issue? Other than that everything is working great. Any help would be much appreciated.

  12. realwelder schreef:

    Found a solution to my problem and also a much better/easier way to accomplish this. Check it out here. http://stackoverflow.com/questions/3569412/customize-check-box-preference
    Worked perfect for me. I changed a few checkboxes into switches.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *