turtleboy turtleboy - 20 days ago 8
Android Question

LinearLayout align Textviews using weight parameter

I have the following code which is a row layout for a list view i have. I would like the labels to the left and the data to the right. The data should be aligned by the left side but at the moment it looks crooked.

I have tried to specify a weight for the textviews in the linearlayout. the label has weight 1 and the data has weight 5. I expected that the data textviews would be lined up vertically as they should take up 5/6 of the horizontal width, leaving 1/6 for the label.

why are the data TextViews not equally taking up the same amount of screen width?

In the developers options i have checked the show layout boundaries and it proves that the data textviews do not line up vertically.

<?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"
android:background="@color/white"

android:paddingTop="10dp"
android:paddingBottom="10dp">



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<TextView
android:id="@+id/carerinfotypelabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Type: "
android:layout_weight="1"
android:textColor="@color/cf_blue"

/>

<TextView
android:id="@+id/carerinfotype"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_weight="5"

/>

</LinearLayout>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<TextView
android:id="@+id/carerinfosurnamelabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name: "
android:layout_weight="1"
android:textColor="@color/cf_blue"

/>

<TextView
android:id="@+id/carerinfosurname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"
android:layout_below="@id/carerinfotypelabel"
/>


</LinearLayout>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<TextView
android:id="@+id/carerinfoaddresslabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Address: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>

<TextView
android:id="@+id/carerinfoaddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_weight="5" />


</LinearLayout>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<TextView
android:id="@+id/carerinfopostcodelabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Postcode: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>

<TextView
android:id="@+id/carerinfopostcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5" />

</LinearLayout>




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<TextView
android:id="@+id/carerinfomobilelabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mobile: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>

<TextView
android:id="@+id/carerinfomobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"

/>


</LinearLayout>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<TextView
android:id="@+id/carerinfotelhomelabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home Tel: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>

<TextView
android:id="@+id/carerinfotelhome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"

/>

</LinearLayout>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<TextView
android:id="@+id/carerinfotelno1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tel 1: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>


<TextView
android:id="@+id/carerinfotelno1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_weight="5" />


</LinearLayout>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<TextView
android:id="@+id/carerinfotel2label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tel 2: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>

<TextView
android:id="@+id/carerinfotel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"
/>

</LinearLayout>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<TextView
android:id="@+id/carerinfotel3label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tel 3: "
android:layout_weight="1"
android:textColor="@color/cf_blue"/>

<TextView
android:id="@+id/carerinfotel3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"/>


</LinearLayout>




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<TextView
android:id="@+id/carerinfotel4label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tel 4: "
android:layout_weight="1"
android:textColor="@color/cf_blue"/>




<TextView
android:id="@+id/carerinfotel4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5" />


</LinearLayout>




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<TextView
android:id="@+id/carerinforelationshiplabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Relationship: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>


<TextView
android:id="@+id/carerinforelationship"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_weight="5"
/>

</LinearLayout>




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<TextView
android:id="@+id/carerinfodoblabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DOB: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>


<TextView
android:id="@+id/carerinfodob"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_weight="5"
/>



</LinearLayout>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<TextView
android:id="@+id/carerinfopinlabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PIN: "
android:layout_weight="1"
android:textColor="@color/cf_blue"
/>


<TextView
android:id="@+id/carerinfopin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_weight="5"
/>


</LinearLayout>



</LinearLayout>

Answer

You need to specify android:weightSum="6" in all of your horizontal layout. This property tells android to separate container in 6 parts, then with android:layout_weight you tell to android how many parts one element must fit.

Another thing: when you set android:layout_weight you must set 0dp on corresponding width or height property. Otherwise it may go wrong

So an example

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="6">


        <TextView
            android:id="@+id/carerinfodoblabel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="DOB: "
            android:layout_weight="1"
            android:textColor="@color/cf_blue" />


        <TextView
            android:id="@+id/carerinfodob"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="5" />

  </LinearLayout>