Align left edges of vertical views in RelativeLayout

Question

How can I make the 500 (TextView) match the left edge of checkbox above ?

I am using RelativeLayout

<ImageView
    android:id="@+id/group_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:src="@drawable/expander_open_holo_dark" />

<TextView
    android:id="@+id/lblListHeader"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
    android:textSize="17sp" />

<CheckBox
    android:id="@+id/GroupCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_alignParentRight="true"
    android:focusable="false"
    android:paddingRight="10dp"
    android:scaleX="2"
    android:scaleY="2" />

<SeekBar
    android:id="@+id/GroupSeekbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/lblListHeader"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/GroupSeekCount"
    android:layout_below="@id/lblListHeader"
    android:focusable="false"
    android:max="1000"
    android:paddingBottom="0dp"
    android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
    android:paddingTop="20dp" >
</SeekBar>

<TextView
    android:id="@+id/GroupSeekCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:paddingRight="10dp"
    android:paddingTop="20dp" 
    android:text="500"
    android:layout_below="@id/GroupCheckBox"

    />

Answer 1

// try this way,hope this will help you...

<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp">

    <ImageView
        android:id="@+id/group_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:src="@drawable/expander_open_holo_dark" />

    <CheckBox
        android:id="@+id/GroupCheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:scaleX="2"
        android:scaleY="2" />

    <TextView
        android:id="@+id/lblListHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/group_indicator"
        android:layout_toLeftOf="@id/GroupCheckBox"
        android:textSize="17sp" />

    <SeekBar
        android:id="@+id/GroupSeekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:max="1000"
        android:paddingBottom="0dp"
        android:layout_below="@id/lblListHeader"
        android:layout_toLeftOf="@id/GroupCheckBox"
        android:layout_alignBaseline="@id/lblListHeader"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:paddingTop="20dp" />

    <TextView
        android:id="@+id/GroupSeekCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/GroupCheckBox"
        android:layout_toRightOf="@id/GroupSeekbar"
        android:paddingTop="10dp"
        android:text="500"/>

</RelativeLayout>

Answer 2

I would go about this much differently.

Try grouping the expander and list header into a horizontal linearlayout, then group the Checkbox and 500 text into a vertical linearlayout. Finally, these two linearlayout's should be nested within a horizontal linearlayout.

Answer 3

First define the CheckBox, only THEN the TextView.
And then set the TextView's layout_width to match_parent (so that it takes the remaining space)

Also, the ImageView can become part of the TextView (compound drawable), to reduce the controls count:
To do so: in the TextView definition, set these attributes:

android:drawableLeft="@drawable/expander_open_holo_dark"
android:drawablePadding="8dp"

Then you can modify the group indicator by code:

Drawable drw = getContext().getResources().getDrawable(R.drawable.expander_open_holo_dark);
lblListHeader.setCompoundDrawablesWithIntrinsicBounds(drw, null, null, null);

Even better (always bearing in mind the purpose to optimize the design), you could use a CheckedTextView control, so to have the image, the text and the checkmark in a single control (since it extends the TextView, it can hold compound drawables as well as the TextView does).

Of course, you can move the tick mark to the right.