CODEWITHSUNDEEP
androidandroid-layoutandroid-viewandroid-checkbox
Androider
Androider

Reputation: 451

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

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 :)

Upvotes: 12

Views: 10904

Answers (5)

Energy
Energy

Reputation: 958

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>

Upvotes: 1

Nadun Priyankarage
Nadun Priyankarage

Reputation: 431

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

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

Upvotes: 22

Kishan Solanki
Kishan Solanki

Reputation: 14618

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"

Upvotes: 0

View
View

Reputation: 11

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.

Upvotes: 1

IuriiO
IuriiO

Reputation: 641

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

Upvotes: 7

Related Questions