How to align CheckBox to the top of its description in Android

Question

I would like to align CheckBox "symbol" to the top of its description.

What I have now:

What I want to have:

Current xml:

<CheckBox android:id="@+id/register_checkbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/register_hint"/>

I've tried to achieve this by manipulating layout_gravity attributes, but it doesn't work.

Maybe is not elegant, but putting a checkbox without text and then a textview besides it may do what you want. As I don't know a way for doing what you want natively. — wnieves19, Jan 07 '16 at 16:32

score 55 · Accepted Answer · edited Dec 15 '16 at 09:51

55

android:gravity="top" will fix the problem:

<CheckBox android:id="@+id/register_checkbox"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/register_hint"
          android:gravity="top"/>

Note that android:gravity is different than android:layout_gravity.

edited Dec 15 '16 at 09:51

Erik Ghonyan

427
4
12

answered Jan 07 '16 at 16:37

heloisasim

4,956
2
27
36

Your solution works! In fact I was manipulating `android:layout_gravity` attributes, so this is why I couldn't see any effects. – fragon Jan 08 '16 at 15:21
2

Why mine did not work ? I had to use a CheckBox on the left and a TextView on the right . – DawnYu May 14 '18 at 07:17
This won't work fine on some language like CJK – Tsung Wu Jan 13 '22 at 06:15
This solution kinda half works. The text gets weirdly aligned with the checkbox. To handle that `padding_top="4dp"` is needed as mentioned by Abdul Rashid. – amar May 26 '23 at 08:36

score 25 · Answer 2 · answered Dec 19 '16 at 06:31

25

use

android:gravity="top" it will pin the box on top
use

padding_top="4dp" will adjust Text padding only (without changing box padding from top)

answered Dec 19 '16 at 06:31

Abdul Samad

526
5
13

1

Adding `padding_top` solves issue with ugly cuts on top of text. Thanks! – jujka Jul 09 '18 at 11:08

score 16 · Answer 3 · answered Mar 02 '19 at 01:24

16

I found that:

 android:gravity="fill"

works better than "top". Top wouldn't look right if the checkbox may also end up as only one line.

answered Mar 02 '19 at 01:24

Flyview

1,899
1
28
46

1

This seems to be the perfect solution in fact! It works equally well for short (one-line) texts and long texts, and without resorting to making assumptions about the font size with a static padding. – V.S. Jun 05 '20 at 09:43

score 1 · Answer 4 · answered Jan 03 '19 at 12:51

You can try this code:-

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <layer-list>
            <item android:top="2dp">
                <bitmap android:gravity="center" android:src="@drawable/checkbox" />
            </item>
        </layer-list>
    </item>
    <item android:state_checked="true">
        <layer-list>
            <item android:top="2dp">
                <bitmap android:gravity="center" android:src="@drawable/checkboxselected" />
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item android:top="2dp">
                <bitmap android:gravity="center" android:src="@drawable/checkbox" />
            </item>
        </layer-list>
    </item>
</selector>

If you have vector drawable use instead of – mklkj Dec 15 '21 at 11:23 — mklkj, Dec 15 '21 at 11:23

How to align CheckBox to the top of its description in Android

4 Answers4

Linked