Reputation: 7328

How to align these TextViews?

I have the following layout:

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>

Upvotes: 0

Answers (2)

Mable John

Reputation: 5228

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>

Upvotes: 2

Aspicas

Reputation: 4497

Try this:

<?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="0dp"
            android:layout_height="match_parent"
            android:text="From"
            android:paddingTop="10dp"
            android:paddingLeft="10dp"
            android:gravity="center_vertical|center_horizontal"
            android:layout_weight="0.20"/>
        <TextView
            android:id="@+id/start_date"
            android:layout_height="wrap_content"
            android:layout_weight="0.60"
            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"
            android:layout_width="0dp"/>
        <TextView
            android:id="@+id/start_time"
            android:layout_height="wrap_content"
            android:layout_weight="0.20"
            android:paddingTop="15dp"
            android:contentDescription="Start Time"
            android:text="13:58"
            android:layout_marginLeft="0dip"
            style="@style/TextAppearance.EditEvent_SpinnerButton"
            android:layout_width="0dp"/>
    </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="0dp"
            android:text="To"
            android:paddingTop="10dp"
            android:paddingLeft="10dp"
            android:gravity="center_vertical|center_horizontal"
            android:layout_weight="0.20"/>

        <TextView
            android:id="@+id/end_date"
            android:layout_height="wrap_content"
            android:layout_weight="0.60"
            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"
            android:layout_width="0dp"/>
        <TextView
            android:id="@+id/end_time"
            android:layout_height="wrap_content"
            android:layout_weight="0.20"
            android:paddingTop="15dp"
            android:contentDescription="End Time"
            android:text="23:59"
            android:layout_marginLeft="0dip"
            style="@style/TextAppearance.EditEvent_SpinnerButton"
            android:layout_width="0dp"/>


    </LinearLayout>


</LinearLayout>

Output

Upvotes: 2

How to align these TextViews?

Answers (2)

Related Questions