How to center the checkbox and text of checkedTextView in android?

Question

I have activity_choose_number1.xml

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_choose_number1" />

This is content_choose_number1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.abc.abc.ChooseNumber1"
    tools:showIn="@layout/activity_choose_number1">

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:id="@+id/listViewNumberList"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

</LinearLayout>

This is secnumsinglechoice.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:checkMark="@null"
    android:drawableStart="?android:attr/listChoiceIndicatorSingle"
    tools:targetApi="ice_cream_sandwich"
    android:textSize="25dp"
    android:linksClickable="false"
    android:checked="false"
    android:paddingTop="20dp"
    android:paddingBottom="20dp" />

The secnumsinglechoice.xml is copy paste of android.R.layout.simple_list_item_single_choice and made some changes.

Now what I need is to center align the checkbox and text of secnumusingchoice.xml. I also need the checkbox to be left side of text in each item of list view

Things I tried 1) If I do drawableLeft, it creates space between text and checkbox, but doesn't make both to be centered 2) If I add android:textAlignment="center" then still it center aligns the text but not the check box . 3) I tried here center text and checkmark of CheckedTextView but I would like to try here with more code.

Please help. Thanks.

Answer 1

To get everything to center correctly, we'll subclass CheckedTextView, and override its onDraw() method to first measure the combined Drawable and text widths and paddings, and then translate the Canvas accordingly before calling the super method to actually do the draw.

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.CheckedTextView;
import android.text.Layout;

public class CenteredCheckedTextView extends CheckedTextView {
    public CenteredCheckedTextView(Context context) {
        this(context, null);
    }

    public CenteredCheckedTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (getCompoundDrawables()[0] == null) {
            super.onDraw(canvas);
        }
        else {
            // Left drawable and paddings width
            final float dw = getCompoundDrawables()[0].getIntrinsicWidth() + 
                             getPaddingLeft() + getCompoundDrawablePadding();
            // Text width
            final float tw = getMaxLineMeasure();

            canvas.save();
            canvas.translate((getWidth() - (dw + tw)) / 2f, 0f);
            super.onDraw(canvas);
            canvas.restore();
        }
    }

    private float getMaxLineMeasure() {
        final Layout layout = getLayout();
        final int lines = getLineCount();
        float m = 0, max = 0;

        for (int i = 0; i < lines; ++i) {
            m = getPaint().measureText(getText(),
                                       layout.getLineStart(i),
                                       layout.getLineEnd(i));
            if (m > max) {
                max = m;
            }
        }

        return max;
    }
}

CheckedTextView has a checkMarkGravity attribute that determines on which end it places the checkMark Drawable, but it's not public, for some odd reason, so we'll just use the drawableLeft. For example:

<com.mycompany.myapp.CenteredCheckedTextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:textSize="25dp"
    android:drawableLeft="?android:attr/listChoiceIndicatorSingle" />

You might need to slightly fiddle with the translation and/or width values in the custom class to get everything to line up with what looks centered to you, depending on what kind of transparent, intrinsic padding the Drawable has.

---

Answer 2

Is that what you want

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@android:color/white"
        android:gravity="center">

        <CheckBox
            android:id="@+id/ckb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true" />

        <TextView
            android:id="@+id/tvEduName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="ABC"
            android:textSize="17sp" />
    </LinearLayout>

Result