Question

I’m trying to make the layout of a checklist, which has this type of row:

Where:

• A is a CheckBox (it’s fixed size)
• B is a TextView (it should stretch all available space)
• C is a TextView (it should stretch all available space)
• D is a TextView (it’s fixed size)
• E is the parent, the row of the list

This is my layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_vertical">
    <CheckBox android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <LinearLayout android:orientation="vertical"
    android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:paddingRight="6dp"
        android:gravity="center_vertical">
        <TextView android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="6dp"
            android:gravity="center_vertical"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:singleLine="true" />
        <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:gravity="center_vertical"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:singleLine="true" />
    </LinearLayout>
    <TextView android:layout_width="wrap_content"
    android:layout_height="60dp"
        android:layout_weight="2"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        android:gravity="center_vertical|right"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#2B78E4" />
</LinearLayout>

And I’m getting this result:

The first row has very long content on B and C, and so D is not appearing at all.

The second row has long content, but shorter than first’s, and so D is shrinked.

The third row has short content, and D is displayed correctly.

How could I modify my layout so D is always displayed correctly, and B&C will be filling only the available space?

Answer 1

You should use RelativeLayout, as main container,
first put A, then put D, after them put B and C.

So your new layout would look like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:gravity="center_vertical">
    <CheckBox android:id="@+id/checkbox" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView android:id="@+id/textView" android:layout_alignParentRight="true"
        android:layout_width="wrap_content" android:layout_height="60dp" 
        android:layout_marginLeft="6dp" android:layout_marginRight="6dp"
        android:gravity="center_vertical|right" android:layout_weight="2"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#2B78E4" />
    <TextView android:id="@+id/txt1"
        android:layout_width="fill_parent" android:layout_height="wrap_content" 
        android:layout_marginLeft="6dp" android:layout_marginTop="6dp"
        android:layout_toRightOf="@id/checkbox" android:layout_toLeftOf="@id/textView"
        android:gravity="center_vertical" android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <TextView android:id="@+id/txt2" android:layout_below="@id/txt1"
        android:layout_width="fill_parent" android:layout_height="wrap_content" 
        android:layout_marginLeft="6dp" android:layout_marginTop="3dp"
        android:layout_toRightOf="@id/checkbox" android:layout_toLeftOf="@id/textView"
        android:gravity="center_vertical" android:singleLine="true" 
        android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>

You should of course change the ids of the checkbox and textview for your preference.

This way your output will look consistent in both landscape and portrait mode:

and

Updated layout and screenshots (to match the provided output).