1

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.

Community
  • 1
  • 1
sofs1
  • 3,834
  • 11
  • 51
  • 89
  • Why you don't use `checkbox` and `textview` separately? Try to use `CheckedTextView` is quite hard to align checkbox and text.. – RoShan Shan Sep 27 '16 at 03:22
  • @MikeM. Yep tried that I that still didn't work. – sofs1 Sep 27 '16 at 03:41
  • @RoShanShan If I use separately how can I choose the text value when it's corresponding check box is chosen? Could you provide link for some reference please? Thx. – sofs1 Sep 27 '16 at 03:43
  • @MikeM. In this question you see the tick mark to the right. It is not center aligned like the text. I want my both text and tick mark to be center aligned. – sofs1 Sep 27 '16 at 03:46
  • @MikeM. Lets say in this image I want both the checkbox and text to be center aligned http://kb4dev.com/images/13 – sofs1 Sep 27 '16 at 03:47
  • 1
    @MikeM. Could you please provide the code as an answer? – sofs1 Sep 27 '16 at 06:39

2 Answers2

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

enter image description here

RoShan Shan
  • 2,924
  • 1
  • 18
  • 38
  • The problem is the number of options shown to user is dynamic. For example, for some users it could be 5 records, for some it could be 10 records etc. I cannot hard code the options and we do not know the number of options that we will be getting. – sofs1 Sep 28 '16 at 02:10
  • I think that 's the reason why you use listview with dynamic data. – RoShan Shan Sep 28 '16 at 02:45
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.


screenshot

Mike M.
  • 38,532
  • 8
  • 99
  • 95
  • Convincing. I haven't tried the solution yet. But when you say I need to slightly fiddle with the width values, will the alignment look non-centered if the app is used in a tablet or some other screen size? – sofs1 Sep 28 '16 at 02:13
  • I wasn't talking so much about screen size, but more about the drawable itself possibly having transparent padding on either side that might make it seem a little off-center. Even the circular shape in the screenshot makes it look a little right-shifted to me. Just visual preference, really. Nothing major. – Mike M. Sep 28 '16 at 02:21