LinearLayout: layout_gravity="bottom" not working on Horizontal LinearLayout
AndroidAndroid Problem Overview
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:
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:
Another strange behavior, is that when I set the layout_gravity of the biggest text to "center-vertical", I get the following result:
So obviously, I went crazy and tried another combinations with center-vertical, but nothing worked as I wanted initially:
So, any tips on how to solve this?
Android Solutions
Solution 1 - Android
The Correct Answer
All the other answers are wrong. The important points:
- You don't need
RelativeLayout. You can do this with just aLinearLayout. - (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).
- The critical thing is you need
android:baselineAligned="false". I actually only found this by looking through theLinearLayoutsource. 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:
Solution 2 - Android
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>
Solution 3 - Android
**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.
Solution 4 - Android
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>
Solution 5 - Android
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>
Solution 6 - Android
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.
Solution 7 - Android
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>