Aligning textviews on the left and right edges in Android layout
AndroidAndroid Problem Overview
I am getting started with Android. I am having trouble getting a simple layout going.
I would like to use a LinearLayout to position two TextViews in a single row. One TextView on the left hand side, the other on the right hand side (analogous to float:left, float:right in CSS).
Is that possible, or do I need to use a different ViewGroup or further layout nesting to accomplish it?
Here's what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="horizontal" android:padding="10sp">
<TextView android:id="@+id/mytextview1" android:layout_height="wrap_content" android:text="somestringontheleftSomestring" android:layout_width="wrap_content"/>
<TextView android:id="@+id/mytextview2" android:layout_height="wrap_content" android:ellipsize="end"
android:text="somestringontheright" android:layout_width="wrap_content"/>
</LinearLayout>
Android Solutions
Solution 1 - Android
Use a RelativeLayout with layout_alignParentLeft and layout_alignParentRight:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:id="@+id/mytextview1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:id="@+id/mytextview2"/>
</RelativeLayout>
Also, you should probably be using dip (or dp) rather than sp in your layout. sp reflect text settings as well as screen density so they're usually only for sizing text items.
Solution 2 - Android
You can use the gravity property to "float" views.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_weight="1"
android:text="Left Aligned"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1"
android:text="Right Aligned"
/>
</LinearLayout>
</LinearLayout>
Solution 3 - Android
It can be done with LinearLayout (less overhead and more control than the Relative Layout option). Give the second view the remaining space so gravity can work. Tested back to API 16.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aligned left" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:text="Aligned right" />
</LinearLayout>
If you want to limit the size of the first text view, do this:
Adjust weights as required. Relative layout won't allow you to set a percentage weight like this, only a fixed dp of one of the views
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Aligned left but too long and would squash the other view" />
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="end"
android:text="Aligned right" />
</LinearLayout>
Solution 4 - Android
Even with Rollin_s's tip, Dave Webb's answer didn't work for me. The text in the right TextView was still overlapping the text in the left TextView.
I eventually got the behavior I wanted with something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="@+id/mytextview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:id="@+id/mytextview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/mytextview1"
android:gravity="right"/>
</RelativeLayout>
Note that mytextview2 has "android:layout_width" set as "match_parent".
Hope this helps someone!
Solution 5 - Android
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hello world" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gud bye" />
Solution 6 - Android
This Code will Divide the control into two equal sides.
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/linearLayout">
<TextView
android:text = "Left Side"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight = "1"
android:id = "@+id/txtLeft"/>
<TextView android:text = "Right Side"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight = "1"
android:id = "@+id/txtRight"/>
</LinearLayout>
Solution 7 - Android
In case you want the left and right elements to wrap content but have the middle space
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Solution 8 - Android
There are many other ways to accomplish this, I would do something like this.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="30dp"
android:text="YOUR TEXT ON THE RIGHT"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="@+id/textLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30dp"
android:text="YOUR TEXT ON THE LEFT"
android:textSize="16sp" />
</RelativeLayout>
Solution 9 - Android
Dave Webb's answer did work for me. Thanks! Here my code, hope this helps someone!
<RelativeLayout
android:background="#FFFFFF"
android:layout_width="match_parent"
android:minHeight="30dp"
android:layout_height="wrap_content">
<TextView
android:height="25dp"
android:layout_width="wrap_content"
android:layout_marginLeft="20dp"
android:text="ABA Type"
android:padding="3dip"
android:layout_gravity="center_vertical"
android:gravity="left|center_vertical"
android:layout_height="match_parent" />
<TextView
android:background="@color/blue"
android:minWidth="30px"
android:minHeight="30px"
android:layout_column="1"
android:id="@+id/txtABAType"
android:singleLine="false"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:layout_width="wrap_content" />
</RelativeLayout>
Image: Image