How to align views by the widest?

Question

how to create android layout that labels fill be aligned (right). I do not want to set width manually, to preserve space. Left column has to be as small as the widest label. Right column fill the rest of parent.

Something like this (underscores added only to format it here):
_______Label: Value of label_________________
____Big label: Value of big label______________
Another label: Value of another label__________
______Label2: Value of label 2_______________

Problem is that I do not know which label is the widest, so I do not know to which one to bind the others. Iam not care about linear or relative layout... just suggest the easiest solution. Thanks

You need to make use of TableLayout, http://developer.android.com/reference/android/widget/TableLayout.html, and make the column width take width of largest child — Ankit Bansal, Apr 14 '15 at 12:02
@AnkitBansal: oh, I did not know there is such layout. Sounds promising, will try. — Wooff, Apr 14 '15 at 12:23

score 1 · Answer 1 · answered Apr 14 '15 at 12:04

Try this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal"
        android:padding="10dp" >
        -

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginRight="10dp"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="first_name"
                android:layout_weight="1"
                android:layout_gravity="right"
                android:textColor="@color/white"
                android:textSize="15dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="right"
                android:text="user_dob"
                android:textColor="@color/white"
                android:textSize="15dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="user_gender"
                android:layout_weight="1"
                android:textColor="@color/white"
                android:textSize="15dp" />


        </LinearLayout>

        <LinearLayout
            android:id="@+id/linear_layout_patient_detail_values"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="left"
                android:text="Name"
                android:textSize="15dp" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="left"
                android:text="12/22/1978"
                android:textSize="15dp" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="left"
                android:text="M"
                android:textSize="15dp" />

        </LinearLayout>

    </LinearLayout>
    </LinearLayout>

Assad · Answer 2 · 2015-04-14T12:14:46.413

Use android:layout_weight, following example is showing that 1/3 space occupy by first label, and other whole space by second.

<LinearLayout
android:id="@+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="horizontal"
android:weightSum="3" >

<TextView
    android:id="@+id/one"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:paddingLeft="10dp"
    android:text="abc"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black" />

<TextView
    android:id="@+id/two"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_marginLeft="1dp"
    android:layout_weight="2"
    android:text="abc"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black" />
</LinearLayout>

android:weightSum="3" is amount of your screen size you can change it let suppose i made screen of size android:weightSum="10", now divide your space according to ... — Assad, Apr 14 '15 at 12:25

How to align views by the widest?

2 Answers2