Dawood Awan Dawood Awan - 29 days ago 9
Android Question

How to align these TextViews in my android application

I have the following layout:

enter image description here

As you can see the

From Date
and
To Date
are not aligned because of the number of characters in the From and To label?

How do I align them?

Here is the XAML layout:

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


<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="5dip"
android:animateLayoutChanges="false">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="From"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:gravity="center_vertical|center_horizontal"
/>
<TextView
android:id="@+id/start_date"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="7"
android:singleLine="true"
android:paddingRight="4dp"
android:paddingTop="15dp"
android:text="10-11-2016"
android:layout_marginRight="0dp"
android:contentDescription="Start date"
style="@style/TextAppearance.EditEvent_SpinnerButton" />
<TextView
android:id="@+id/start_time"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="4"
android:paddingTop="15dp"
android:contentDescription="Start Time"
android:text="13:58"
android:layout_marginLeft="0dip"
style="@style/TextAppearance.EditEvent_SpinnerButton" />
</LinearLayout>



<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="5dip"
android:animateLayoutChanges="false">


<TextView
android:id="@+id/to_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="To"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:gravity="center_vertical|center_horizontal"
/>

<TextView
android:id="@+id/end_date"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="7"
android:singleLine="true"
android:paddingRight="4dp"
android:paddingTop="15dp"
android:text="11-11-2016"
android:layout_marginRight="0dp"
android:contentDescription="End date"
style="@style/TextAppearance.EditEvent_SpinnerButton" />
<TextView
android:id="@+id/end_time"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="4"
android:paddingTop="15dp"
android:contentDescription="End Time"
android:text="23:59"
android:layout_marginLeft="0dip"
style="@style/TextAppearance.EditEvent_SpinnerButton" />


</LinearLayout>


</LinearLayout>


and related styles:

<style name="TextAppearance" parent="android:TextAppearance">
</style>

<style name="TextAppearance.EditEvent_Spinner" parent="android:style/Widget.Holo.Light.Spinner">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#FF333333</item>
<item name="android:layout_marginRight">12dp</item>
<item name="android:layout_marginLeft">12dp</item>
</style>

<style name="TextAppearance.EditEvent_SpinnerButton" parent="TextAppearance.EditEvent_Spinner">
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
</style>

Answer

Set WeightSum to parent layout and then divide that weight sum value corresponding to the width of each child view.

Try this

<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_marginTop="5dip"
        android:animateLayoutChanges="false"
        android:weightSum="2.5"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:paddingLeft="10dp"
            android:layout_weight=".5"
            android:paddingTop="10dp"
            android:text="From" />

        <TextView
            android:id="@+id/start_date"
            style="@style/TextAppearance.EditEvent_SpinnerButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginRight="0dp"
            android:layout_weight="1.5"
            android:contentDescription="Start date"
            android:paddingRight="4dp"
            android:paddingTop="15dp"
            android:singleLine="true"
            android:text="10-11-2016" />

        <TextView
            android:id="@+id/start_time"
            style="@style/TextAppearance.EditEvent_SpinnerButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="0dip"
            android:layout_weight=".5"
            android:contentDescription="Start Time"
            android:paddingTop="15dp"
            android:text="13:58" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dip"
        android:weightSum="2.5"
        android:animateLayoutChanges="false"
        android:orientation="horizontal">


        <TextView
            android:id="@+id/to_label"
            android:layout_width="0dp"
            android:layout_weight=".5"
            android:layout_height="wrap_content"
            android:gravity="center_vertical|center_horizontal"
            android:paddingLeft="10dp"
            android:paddingTop="10dp"
            android:text="To" />

        <TextView
            android:id="@+id/end_date"
            style="@style/TextAppearance.EditEvent_SpinnerButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="0dp"
            android:layout_weight="1.5"
            android:contentDescription="End date"
            android:paddingRight="4dp"
            android:paddingTop="15dp"
            android:singleLine="true"
            android:text="11-11-2016" />

        <TextView
            android:id="@+id/end_time"
            style="@style/TextAppearance.EditEvent_SpinnerButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="0dip"
            android:layout_weight=".5"
            android:contentDescription="End Time"
            android:paddingTop="15dp"
            android:text="23:59" />
    </LinearLayout>
</LinearLayout>