Aligning multiple checkboxes vertically

Question

I try to align four checkboxes but one is not in the center of the other. If I shorten the text it fits but if its longer it looks like in the screenshot. The problem is it will be in different languages so the text size can be different. Also if I remove the scale it fits perfect but I need this bigger checkboxes

This is my code:

<CheckBox
    android:id="@+id/cb1"
    android:scaleX="1.3"
    android:scaleY="1.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="23dp"
    android:text="@string/unmounted"
    android:textColor="@color/textBlack"
    android:layout_below="@+id/abc"
    android:layout_toEndOf="@+id/imageView6"
    android:focusable="false"/>

<CheckBox
    android:id="@+id/cb2"
    android:scaleX="1.3"
    android:scaleY="1.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/problem_not_working"
    android:textColor="@color/textBlack"
    android:layout_below="@+id/cb1"
    android:layout_alignStart="@+id/cb1"
    android:focusable="false"/>

<CheckBox
    android:id="@+id/cb3"
    android:scaleX="1.3"
    android:scaleY="1.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/problem_cable_defective"
    android:textColor="@color/textBlack"
    android:layout_below="@+id/cb2"
    android:layout_alignStart="@+id/cb2"
    android:focusable="false"/>

<CheckBox
    android:id="@+id/cb4"
    android:scaleX="1.3"
    android:scaleY="1.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/problem_cable_tie"
    android:textColor="@color/textBlack"
    android:layout_below="@+id/cb3"
    android:layout_alignStart="@+id/cb3"
    android:focusable="false"/>

score 0 · Accepted Answer · answered Apr 10 '18 at 08:45

Here is the exact solution for your problem, the thing which you are actually trying to achieve is the bigger checkbox view (corresponding to its text which is as big as the checkbox view, obviously) with proper alignment of all the views in the series, something like this:

Your desired UI.

But the thing you are doing wrong is that you are using the scaleX and scaleY attributes for achieving your desired UI that distorts your view as these two attributes scale the complete view i.e. the squared checkbox view with its text/label in the X and Y directions respectively (together with the text/label of the checkbox), so there is a dependency on the text as well (which is distorting your view).

So, the below code will solve your problem: (In this I have taken the squared checkbox view as separate and beside it I have placed a textview in which I have written the text which corresponds to the text/label of that checkbox to complete the UI). Thereby using two views (i.e. the CheckBox and the TextView beside it) instead of using a single compound view (i.e. the CheckBox).

Note: In the solution given below, the CheckBox is a compound view but I haven't used it in the same manner.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/some_view"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="23dp" />

    <!--android:text="Unmounted"-->
    <CheckBox
        android:id="@+id/cb1"
        android:scaleX="1.3"
        android:scaleY="1.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="23dp"
        android:layout_below="@+id/some_view"
        android:layout_alignStart="@+id/some_view"
        android:focusable="false" />

    <TextView
        android:id="@+id/tv_for_cb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/cb1"
        android:layout_alignTop="@+id/cb1"
        android:layout_alignBottom="@+id/cb1"
        android:layout_marginStart="40dp"
        android:text="Unmounted"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <!--android:text="Problem Not Working"-->
    <CheckBox
        android:id="@+id/cb2"
        android:scaleX="1.3"
        android:scaleY="1.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:layout_below="@+id/cb1"
        android:layout_alignStart="@+id/cb1"
        android:focusable="false"/>

    <TextView
        android:id="@+id/tv_for_cb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/cb2"
        android:layout_alignTop="@+id/cb2"
        android:layout_alignBottom="@+id/cb2"
        android:layout_marginStart="40dp"
        android:text="Problem Not Working"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <!--android:text="Problem Cable Defective"-->
    <CheckBox
        android:id="@+id/cb3"
        android:scaleX="1.3"
        android:scaleY="1.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:layout_below="@+id/cb2"
        android:layout_alignStart="@+id/cb2"
        android:focusable="false"/>

    <TextView
        android:id="@+id/tv_for_cb3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/cb3"
        android:layout_alignTop="@+id/cb3"
        android:layout_alignBottom="@+id/cb3"
        android:layout_marginStart="40dp"
        android:text="Problem Cable Defective"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <!--android:text="Problem Cable Tie"-->
    <CheckBox
        android:id="@+id/cb4"
        android:scaleX="1.3"
        android:scaleY="1.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:layout_below="@+id/cb3"
        android:layout_alignStart="@+id/cb3"
        android:focusable="false"/>

    <TextView
        android:id="@+id/tv_for_cb4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/cb4"
        android:layout_alignTop="@+id/cb4"
        android:layout_alignBottom="@+id/cb4"
        android:layout_marginStart="40dp"
        android:text="Problem Cable Tie"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

</RelativeLayout>

And the other way out to your mentioned problem would be to create custom drawables for the checkbox and then handle them using a state list drawable as for the checkbox to be shown differently in different states as when it is unchecked, checked etc.

This link would help you if you are interested in doing it in this manner or way and would be great if you want to customize your checkbox's view.

Creating custom checkbox using selectors and shapes.

For further help in this context refer:

Android: How to change CheckBox size?

Aligning multiple checkboxes vertically

1 Answers1