51

Ok, First of all, I searched all the internet, but nobody has a similar problem like this. So, all I want is to have 3 textViews, bottom aligned with the screen and with the same width. Here is an image representing what I want:

enter image description here

And here is my code:

 <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent">
 <LinearLayout 
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true">

      <TextView 
           android:text="@string/help_1"
           android:layout_weight="0.33"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="@drawable/mynicebg1"

           android:layout_gravity="bottom"/>

      <TextView 
           android:text="@string/help_2"
           android:layout_weight="0.33"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="@drawable/mynicebg2"

           android:layout_gravity="bottom"/>

      <TextView 
           android:text="@string/help_3"
           android:layout_weight="0.33"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="@drawable/mynicebg3"

           android:layout_gravity="bottom"/>

 </LinearLayout>
 </RelativeLayout>

Well, it works when the 3 textViews have the same height, but when their size differ, I get the following result:

problem

Another strange behavior, is that when I set the layout_gravity of the biggest text to "center-vertical", I get the following result:

first workaround

So obviously, I went crazy and tried another combinations with center-vertical, but nothing worked as I wanted initially:

desperation workaround

So, any tips on how to solve this?

Paulo Cesar
  • 2,250
  • 1
  • 25
  • 35

7 Answers7

115

The Correct Answer

All the other answers are wrong. The important points:

  1. You don't need RelativeLayout. You can do this with just a LinearLayout.
  2. (Not critical but I guess you didn't know) Your weights don't need to sum to 1, you can just set them all to any equal value (e.g. 1).
  3. The critical thing is you need android:baselineAligned="false". I actually only found this by looking through the LinearLayout source. It is in the docs but they don't mention that it is on by default!

Anyway, here is the code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:baselineAligned="false">
      <TextView 
           android:text="dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg dfg"
           android:layout_weight="1"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#eeffee"
           android:layout_gravity="bottom"/>

      <TextView 
           android:text="asd asd asd asd asd asd asd asd asd asd"
           android:layout_weight="1"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#eeeeff"
           android:layout_gravity="bottom"/>


      <TextView 
           android:text="qweoiu qweoiuqwe oiqwe qwoeiu qweoiu qweoiuq weoiuqw eoiquw eoiqwue oqiweu qowieu qowieu qoiweu qowieu qowieu qowieu qowieu qoiweu qowieu qoiwue "
           android:layout_weight="1"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#ffeeee"
           android:layout_gravity="bottom"/>

 </LinearLayout>

And how it looks:

Good linear layout

Timmmm
  • 88,195
  • 71
  • 364
  • 509
  • 1
    A very simple fix, and it worked for me right away. I wish I had read this before the currently accepted answer. – bgolson Apr 16 '13 at 20:30
  • @Timmmm I have my own TextView implementation extending TextView. And your solution of 'baseAligned' don't work for me. Please any guess? – Shirish Herwade Jun 03 '14 at 07:19
  • No idea. Suggest you look at the code for `LinearLayout` to see how it uses `baselineAligned` and check where your code overrides its methods. You used `baselineAligned` rather than `baseAligned` right? – Timmmm Jun 03 '14 at 08:00
4

Ok. So I had the same issue, but with toggle buttons instead of text views. For some reason, if one of the elements in the LinearLayout(Horizontal) has a different height than the rest of the views in the layout and is set to have the same gravity as the others, the gravity is effectively "ignored".

I managed to have the desired behavior by wrapping each view inside a RelativeLayout and set the android:gravity on the relative layout instead of android:layout_gravity on each button. I also moved the android:layout_weight from the button to the relative layout.

So instead of having:

<LinearLayout
  ... >
    <ToggleButton
        ...
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_gravity="bottom"/>


    <ToggleButton
        ...
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_gravity="bottom"/>

    <ToggleButton
        ...
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_gravity="bottom"/>
</LinearLayout>

Which gives the same problem as reported, I instead did:

<LinearLayout
  ... >
    <RelativeLayout
        ...
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="bottom" >

        <ToggleButton
            ...
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            />

    <RelativeLayout
        ...
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="bottom" >

        <ToggleButton
            ...
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
           />      

    <RelativeLayout
        ...
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="bottom" >

        <ToggleButton
            ...
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            />
</LinearLayout>
AngraX
  • 1,803
  • 2
  • 18
  • 30
  • This is what I had to end up doing to get it fixed. I had a button inside a LinearLayout inside a ScrollView (inside another LinearLayout). The button wouldn't align to the bottom until I put the button within another LinearLayout – gdawgrancid Apr 25 '16 at 22:01
1

Same as Timmm's answer, but you also can use android:gravity="bottom" for LinearLayout attribute instead of android:layout_gravity="bottom" for each of TextView.

Like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:gravity="bottom"
      android:baselineAligned="false">
      <TextView 
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:text="your text 1......"
           android:layout_weight="1"/>

      <TextView 
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:text="your text 2......"
           android:layout_weight="1"/>

      <TextView 
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:text="your text 3......"
           android:layout_weight="1"/>

</LinearLayout>
TheEsnSiavashi
  • 1,245
  • 1
  • 14
  • 29
sweet-2
  • 157
  • 1
  • 4
1

**EDIT:

If this doesn't do everything, add the baselinealigned flag as mentioned in one of the answers below by Timmmmm. That is a better way.

Use This

EDITED LAYOUT: Ok I edited it and also added colors and gravity to let the textviews at the bottom have equal height and width and also aligh the text at the bottom and in the center of each view.

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:gravity="fill_vertical" >

        <TextView  
            android:layout_width="match_parent" 
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:layout_gravity="fill_vertical"
            android:gravity="bottom|center"
            android:text="text1 jkjhh  jhguk jvugy v ghjv  kjhvygvusdioc jgytuayhashg hgyff"
            android:textColor="#000000"
            android:background="#FFFF00"
            />
        <TextView  
            android:layout_width="match_parent" 
            android:layout_height="match_parent" 
            android:layout_weight="1.0"
            android:layout_gravity="fill_vertical"
            android:gravity="bottom|center"
            android:text="t2"
            android:textColor="#000000"
            android:background="#FF0000"
            />      
        <TextView  
            android:layout_width="match_parent" 
            android:layout_height="match_parent" 
            android:layout_weight="1.0"
            android:layout_gravity="fill_vertical"
            android:gravity="bottom|center"
            android:text="This is a long text. This is a long text. This is a long text. This is a long text.This is a long text. This is a long text. This is a long text."
            android:textColor="#000000"
            android:background="#00FF00"
            />
    </LinearLayout>

It should do exactly what you asked.

It uses a LinearLayout inside a RelativeLayout but sometimes it is required to nest them to get what we want. Add any more views you might want in the relative layout and you will always have your texts at the bottom as long as the last child in your RelativeLayout is this LinearLayout as shown above.

achie
  • 4,716
  • 7
  • 45
  • 59
  • Actually It's already inside a RelativeLayout, I ommited that.. But thanks anyway.. See the thing is, the texts are on the bottom, but they aren't aligned. – Paulo Cesar Jul 04 '11 at 20:01
  • I tested it by setting the gravity to center as I have shown and they worked fine. I might not have understood how you are trying to align them. Can you describe it. – achie Jul 04 '11 at 20:04
  • Your text must have more then one line. My first text has 5 lines, the second one 3, and the last one 7 lines. I tried to represent it on the images, but I can't submit screenshots of the app, as my employer wouldn't like it.. – Paulo Cesar Jul 04 '11 at 20:11
  • oh ok, in that case set the layout_height of each textview to match_parent. I also changed the code above. Please check it and see if it works. – achie Jul 04 '11 at 20:16
  • @Paulo Cesar: I have edited the code to have the layout as you asked. I tested it and also added colors for each textview. Let me know if that is not what you are looking for. – achie Jul 04 '11 at 20:25
  • Yeah, it works. Just one more little problem... I have a background on the TextView, and I wanted the background to have the same size of the text. This way, the 3 backgrounds will have the same height of the biggest text.. – Paulo Cesar Jul 04 '11 at 20:29
  • Found a workaround!! I put a RelativeLayout inside the LinearLayout, and the TextView inside the RelativeLayout. It's not permanent, because it will only work when I know which text will be the biggest – Paulo Cesar Jul 04 '11 at 20:31
  • @PauloCesar let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/1132/discussion-between-achie-and-paulo-cesar) – achie Jul 04 '11 at 20:31
  • I don't think the RelativeLayout is required at all, anywhere. – pjv Dec 28 '12 at 02:33
0

A much easier solution would be to use the < Space > tag:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <Space
           android:layout_width="0dp"
           android:layout_height="1dp"
           android:layout_weight="1" />

      <TextView 
           android:text="Any Text"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#eeffee"/>

      <TextView 
           android:text="Any Text2"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#eeeeff"/>


      <TextView 
           android:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#ffeeee"/>

 </LinearLayout>
RonTLV
  • 2,376
  • 2
  • 24
  • 38
0

If you're ok with a RelativeLayout instead of Linear, this will do the trick, I guess:

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

<TextView android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:text="@string/hello"
    android:id="@+id/TextView1" android:layout_above="@+id/TextView2"
    android:layout_alignLeft="@+id/TextView2"></TextView>

<TextView android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:text="@string/hello"
    android:id="@+id/TextView2" android:layout_alignParentBottom="true">  </TextView>

</RelativeLayout>
  • But with RelativeLayout I can't use android:layout_weight="0.33" to make all the textViews the same size.. Unless there is a better way to make them have the same size? – Paulo Cesar Jul 04 '11 at 19:43
  • In worst case you can work with dip values for width or height to get them to the same size, but I'm not sure if I'm getting your problem with the same sizes here... – Dominik Helleberg Jul 04 '11 at 19:56
  • Specifying the values won't work for me, I want them to adjust according to the parent width... – Paulo Cesar Jul 04 '11 at 19:58
0

If you're trying to make all three child views the same height, then change height to "0", set the android:weightSum of the LinearLayout to 3, and the set the android:layout_weight of each view to 1.

Gallal
  • 4,267
  • 6
  • 38
  • 61
  • Oh, I don't want them to have the same height. I want them to have the same width.. – Paulo Cesar Jul 04 '11 at 19:47
  • Are you trying to stack them horizontally or vertically? – Gallal Jul 04 '11 at 19:49
  • Oops, I want to stack them horizontally, the title of my question was wrong. Sorry for the confusion.. – Paulo Cesar Jul 04 '11 at 19:52
  • Then set the orientation of LinearLayout to horizontal and the weight_sum to 3, and, for each child view, set the height of the views to match_parent, the width to 0, and the layout_weight to 1. – Gallal Jul 04 '11 at 19:53
  • Well, I did what you said. Now the TextViews are correctely aligned, but they all have the same height. But I don't want them to have the same height... – Paulo Cesar Jul 04 '11 at 19:57
  • Try changing the gravity or layout gravity of LienarLayout rather than setting it in the child views. – Gallal Jul 04 '11 at 19:59
  • Are you trying to have the **text** within each TextView line up, **and** have all TextView bottoms line up? That is easy if you want the text within each TextView to be bottom-aligned (just set android:gravity="bottom" for each TextView). However, you won't be able to do that when the TextViews have differing heights, unless you adjust their internal padding. – Lorne Laliberte Jul 04 '11 at 20:48