Android: How to align the CheckBox text in the bottom?

Question

Basically what I want is to have is a checkbox with the icon and the text below to the icon, something like this:

 -------------------
|   CheckBox Icon   |
|                   |
|   CheckBox Text   |
|                   |
 -------------------

By default the icon is placed in the left and the text in the right, both of them at the same level. Below the layout I'm using:

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Switch state"
    android:button="@drawable/my_custom_selector" />

Any idea about how can I achieve to have the icon on top and the text below the icon?. Thanks in advance :)

I had the same problem and I have solved it using [this](https://stackoverflow.com/a/65395986/13321079) — MohamedHarmoush, Dec 21 '20 at 17:08

score 21 · Answer 1 · edited Mar 20 '18 at 04:18

21

I had the same problem and I have solved it using this:

android:button="@null"
android:drawableTop="?android:attr/listChoiceIndicatorMultiple"

edited Mar 20 '18 at 04:18

tryingToLearn

10,691
12
80
114

answered Mar 20 '18 at 03:30

Nadun Priyankarage

421
4
5

score 7 · Answer 2 · answered Nov 20 '14 at 04:20

CheckedTextView + state list with checked and unchecked drawables:

<CheckedTextView
    android:drawableTop="@drawable/checkmark"
    android:checked="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Checked text"/>

@drawable/checkmark

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/unchecked" android:state_checked="false"></item>
<item android:drawable="@drawable/checked"></item></selector>

(checkmark.xml is simplified).

score 1 · Answer 3 · edited Dec 01 '17 at 23:16

1

You can make the LinearLayout vertical and put the CheckBox (without text) on top and the text in a TextView below.

Finally make the LinearLayout clickable and check/uncheck programmatically.

edited Dec 01 '17 at 23:16

Himanshu

2,384
2
24
42

answered Dec 01 '17 at 15:04

View

11
1

score 1 · Answer 4 · answered Dec 12 '20 at 15:14

I just made it by using a linear layout (vertical) as i don't use any custom checkbox xml

my case is like a text is on top of a checkbox

 <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:text="text1"
                    android:layout_gravity="center"
                    android:textSize="15dp"/>
                <CheckBox android:id="@+id/textcheckbox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:onClick="onCheckboxClicked"/>
            </androidx.appcompat.widget.LinearLayoutCompat>

score 0 · Answer 5 · answered Mar 09 '18 at 07:51

The above solution did not work for me. What was missing is the Kotlin/Java code in it.

So add it in your Kotlin code

cb_twitter.setOnClickListener({
            (it as CheckedTextView).toggle()
        })

Here is my XML Code:

<CheckedTextView
    android:id="@+id/cb_twitter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:checked="false"
    android:drawableTop="@drawable/checkbox_selector_twitter"
    android:gravity="center_horizontal"
    android:text="@string/Twitter"
    android:textAlignment="gravity"/>

Here I have also made text to center by

android:gravity="center_horizontal"
android:textAlignment="gravity"

Android: How to align the CheckBox text in the bottom?

5 Answers5