How can I align two EditText views when I do not know the amount of text ahead of time for both views?

Question

I have two EditText views whose height I wish to align. The problem is that I cannot predict which view will have more text and hence using android:layout_alignTop and android:layout_alignBottom will not work. The layout I am experimenting with is below. I have already tried android:layout_alignTop and android:layoutAlignBottom but they do not yield satisfactory results.

Layout 1

<?xml version="1.0" encoding="utf-8"?>

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

<EditText
        android:id="@+id/text1" 
        android:layout_width="200dip"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"           
        android:padding="5dip"

        android:text="Text 1 bvhg hbjbj kjkbkj kjnjkn hlihj lklkkl"
        />

<EditText
        android:id="@+id/text2" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/text1"           
        android:padding="5dip"

        android:text="Text 2 lasndklsa lkmsclslk klmsldmlk lksdl"
        />


</RelativeLayout>

Figure for Layout 1: https://i.stack.imgur.com/RcCGu.jpg.png

Layout 2 with android:layout_alignTop and android:layout_alignBottom

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

<EditText
        android:id="@+id/text1" 
        android:layout_width="200dip"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"   
        android:layout_alignTop="@+id/text2"
        android:layout_alignBottom="@+id/text2"

        android:padding="5dip"

        android:text="Text 1 bvhg hbjbj kjkbkj kjnjkn hlihj lklkkl"
        />

<EditText
        android:id="@+id/text2" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/text1"           
        android:padding="5dip"

        android:text="Text 2 lasndklsa lkmsclslk klmsldmlk lksdl"
        />


</RelativeLayout>

Figure for Layout 2: https://i.stack.imgur.com/FQtmj.jpg.png

But, if I were to change the text on the first EditText then some of the text in that box gets cut-off. See Layout 3 and Figure 3 below:

Layout 3

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

<EditText
        android:id="@+id/text1" 
        android:layout_width="200dip"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"   
        android:layout_alignTop="@+id/text2"
        android:layout_alignBottom="@+id/text2"

        android:padding="5dip"

        android:text="Text 1 bvhg hbjbj kjkbkj kjnjkn hlihj lklkkl
                    1 bvhg hbjbj kjkbkj kjnjkn hlihj lklkkl    ncksjcksn
                    lkslksldcsdc
                    the end"
        />

<EditText
        android:id="@+id/text2" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/text1"           
        android:padding="5dip"

        android:text="Text 2 lasndklsa lkmsclslk klmsldmlk lksdl"
        />


</RelativeLayout>

Figure 3 for Layout 3 : (Sorry, cannot post more than two hyperlinks because of rep issues.)

Is there a way to align the heights of EditText views when the amount of text in either view is not known ahead of time?

So do you want to horizontally align the two views by the mid point of their heights? Have you considered wrapping the TextViews in a scroller so that you can guarantee a known height? — Caspar Harmer, Jun 10 '11 at 02:40
@CaspNZ I want the views to be of the same height. In other words, the top and the bottom need to be aligned with each other irrespective of the amount of text in the view. I am not sure I see how a scroller would help here. — Mandel, Jun 10 '11 at 02:44

Caspar Harmer · Accepted Answer · 2011-06-10T03:51:59.593

Well, I have to say, this is the first time I've ever found a TableLayout useful. Note the text LOOKS cut off in the preview (as it's really big), but when you compile and run, you'll see that the text is scrollable. The TableView does all the tricky stuff for you. I think this will work for you.
Just realised that you want the textviews to look the same size also - that's easy - give them a transparent background and make the background of the table have the background. EDIT - One more thing - due to a framework bug, I had to use this:

android:inputType="none"
android:editable="false"

to get the text both scrollable and non-editable. Also, a good point from @mandel - use "fill_parent" not "match_parent" if programming for android devices of an api level less than 8.

<TableLayout
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TableRow
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"
        android:id="@+id/tableRow1"
        android:gravity="center_vertical">
        <EditText
            android:inputType="none"
            android:editable="false"
            android:text="I have two EditText to align. The problem is that I cannot predict which view will have more tetText to align. The problem is that I cannot predict which view will have more text and hencem  I have two EditText views whose height I wish to align. The problem is that I cannot predict which view will have more text and hence"
            android:id="@+id/editText1"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
        </EditText>
        <EditText
            android:inputType="none"
            android:editable="false"
            android:text="I have two EditText views whose height I wish to alignhave more text and hence "
            android:id="@+id/editText2"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"></EditText>
    </TableRow>
</TableLayout>

The above layout centers at the mid-point but the height of the EditText views is not the same. Am I missing something? — Mandel, Jun 10 '11 at 03:32
No, I made a mistake - fixed now - changed the EditText heights to "match_parent". — Caspar Harmer, Jun 10 '11 at 03:41
ah, that works. Perhaps, you should also mention that one should use 'fill_parent' instead of 'match_parent' if targeting Android api less than 8. See: http://stackoverflow.com/questions/5761960/what-is-the-difference-between-match-parent-and-fill-parent-property-in-android — Mandel, Jun 10 '11 at 03:48
I'll add that - also, notice I made a wee tweak to make the text scrollable but not editable. — Caspar Harmer, Jun 10 '11 at 03:54

How can I align two EditText views when I do not know the amount of text ahead of time for both views?

1 Answers1