CODEWITHSUNDEEP
androidandroid-layout
Peter
Peter

Reputation: 11920

How to properly align the right edges of two views?

Here is a simplified version of my problem. I need to align the right edges of two text views such that they appear as follows:

        a
 abcdefgh

Here is my layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    >

   <TextView
      android:id="@+id/tvFirst"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="a"
    /> 

   <TextView
      android:id="@+id/tvSecond"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/tvFirst"
    android:layout_alignRight="@id/tvFirst"
    android:text="abcdefgh"
    /> 

</RelativeLayout>

Although "a" and "h" do get aligned, the problem is that the width of the layout is that of tvFirst and not of the longer text. As a result, I don't see complete text for tvSecond.

I would appreciate it if you can tell me what is it that I am missing. Thank you in advance for your help.

Upvotes: 0

Views: 334

Answers (5)

Peter
Peter

Reputation: 11920

GridLayout, along with gravity, did the trick:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  >

    <TextView
        android:id="@+id/tvFirst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="a"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_gravity="right"
        />

    <TextView
        android:id="@+id/tvSecond"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="abcdefgh"
        android:layout_row="1"
        android:layout_column="0"
        />
</GridLayout>

Regards,
Peter

Upvotes: 1

Szymon
Szymon

Reputation: 43023

Wrap them both in LinearLayout and give the textviews android:textAlignment="viewEnd" attribute:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView 
        android:id="@+id/tvFirst"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="viewEnd" />

    <TextView 
        android:id="@+id/tvSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="viewEnd" />              

</LinearLayout>

Upvotes: 0

NickT
NickT

Reputation: 23873

You have to define the widest one first to anchor things, even though it's below the first, so this will do it:

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

    <TextView
        android:id="@+id/tvSecond"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvFirst"
        android:text="abcdefgh" />

    <TextView
        android:id="@+id/tvFirst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/tvSecond"
        android:text="a" />

</RelativeLayout>

Upvotes: 0

Naveed Ashraf
Naveed Ashraf

Reputation: 295

Try this..




<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    >

   <TextView
       android:id="@+id/tvFirst"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:layout_alignParentTop="true"
       android:layout_marginLeft="28dp"
       android:text="a" />

   <TextView
       android:id="@+id/tvSecond"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignLeft="@+id/tvFirst"
       android:layout_below="@+id/tvFirst"
       android:layout_marginTop="20dp"
       android:text="abcdefgh" />

</RelativeLayout>

Upvotes: 0

Vishnu Haridas
Vishnu Haridas

Reputation: 7547

You didn't add gravity to them! Add these attributes to both the TextViews and you will get it:

   android:layout_width="match_parent"
   android:gravity="right"

Upvotes: 0

Related Questions