Centering the contents of a view inside a LinearLayout

Question

Here's the layout (below). I'm trying to reposition the location of the checkbox; move it to the right of the view. android:gravity and android:layout_gravity seem to have no effect. Any explanation? This LinearLayout is a child of a Relative Layout.

<LinearLayout
            android:id="@+id/deviceLinear"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/view1" >

            <ImageView
                android:contentDescription="@string/devices_icon"
                android:id="@+id/devices_img"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="0.15"
                android:layout_gravity="center"
                android:src="@drawable/hardware_phone" />

            <TextView
                android:id="@+id/devices"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="0.43"
                android:text="@string/devices"
                android:textSize="20sp" />

            <CheckBox
                android:id="@+id/check_devices"
                android:button="@drawable/custom_checkbox"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_weight="0.42"
                android:onClick="onCheckboxClicked" />

        </LinearLayout>

Answer 1

You are giving layout_weight="0.42" to your checkbox, that means that it will be measured with a width based on the LinearLayout's width. By this approach you will never manage to put it on the right.

The best way to achieve your goal is to use a RelativeLayout. Here is my list item layout with a checkbox on the right. Sorry about the merge tag but it is merged inside a RelativeLayout with

android:layout_width="match_parent"
android:layout_height="wrap_content"

attributes

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="@+id/imgChannelIcon"
    android:layout_alignParentLeft="true"
    style="?muListItemImage60x60" />

<CheckBox android:id="@+id/chkIsChecked"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_alignTop="@+id/imgChannelIcon"
    android:layout_alignParentRight="true"
    android:layout_alignBottom="@+id/imgChannelIcon"
    android:layout_marginLeft="@dimen/list_item_checkbox_margin_left"
    android:layout_marginRight="@dimen/list_item_checkbox_margin_right"
    android:layout_marginTop="@dimen/list_item_checkbox_margin_top"
    android:layout_marginBottom="@dimen/list_item_checkbox_margin_bottom"
    android:focusable="false"
    android:focusableInTouchMode="false" />

<TextView android:id="@+id/lblChannelTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/imgChannelIcon"
    android:layout_alignTop="@+id/imgChannelIcon"
    android:layout_toLeftOf="@+id/chkIsChecked"
    android:layout_alignWithParentIfMissing="true"
    android:includeFontPadding="false"
    android:textStyle="bold"
    android:text="@string/channel_item_dummy_title" 
    style="?muListItemTextBig" />

<TextView android:id="@+id/lblChannelSubtitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/imgChannelIcon"
    android:layout_below="@+id/lblChannelTitle"
    android:layout_toLeftOf="@+id/chkIsChecked"
    android:layout_alignWithParentIfMissing="true"
    android:includeFontPadding="false"
    android:textStyle="normal"
    android:text="@string/channel_item_dummy_subtitle"
    style="?muListItemTextNormal" />

<TextView android:id="@+id/lblChannelCategory"
   android:layout_width="0dp"
   android:layout_height="0dp"
   android:layout_toRightOf="@+id/imgChannelIcon"
   android:layout_below="@+id/lblChannelSubtitle"
   android:layout_alignBottom="@+id/imgChannelIcon"
   android:layout_toLeftOf="@+id/chkIsChecked"
   android:layout_alignWithParentIfMissing="true"
   android:includeFontPadding="false"
   android:paddingLeft="3dp"
   android:gravity="center_vertical|left"
   android:textStyle="italic"
   android:text="@string/channel_item_dummy_category"
   style="?muListItemTextNormal_Inverse" />

<TextView android:id="@+id/lblChannelUpdate"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_below="@+id/imgChannelIcon"
   android:layout_alignParentLeft="true"
   android:layout_alignParentRight="true"
   android:includeFontPadding="false"
   android:paddingTop="3dp"
   android:paddingBottom="3dp"
   android:textStyle="italic"
   android:text="@string/channel_item_dummy_update"
   style="?muListItemTextTiny" />
</merge>

As you can see I first place an image with layout_alignParentLeft="true" then the checkbox with layout_alignParentRight="true" and finally I arrange the other components based on those two. From your image I can see that you can use your devices_img as the left component (but you will have to give it a fixed height and maybe some margins in order to became the Layout's height) and your check box as your right.

Keep in mind that in a RelativeLayout with wrap_content as height you cannot use the AlignParentBottom attribute.

Hope this helps...

Answer 2

I assume that you want the CheckBox to be on the right side of the LinearLayout. Since you have given it a layout_weight it will always take up some fixed percentage of the width regardless of its size as you can see by that blue bounding box.

Try wrapping the checkbox in another LinearLayout that has android:orientation='horizontal'. Give the 0.42 weight to the wrapping LinearLayout and then set the LinearLayout's android:gravity to be right. That should keep your spacing while moving the checkbox to the far right.

Something like this:

<LinearLayout
  android:orientation="horizontal"
  android:layout_width="0dp"
  android:layout_weight="0.42"
  android:layout_height="wrap_content"
  android:gravity="right" />

    <CheckBox
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />
</LinearLayout>

You might also want to consider a RelativeLayout which enables you to position Views based on where other views are.