5

My RelativeLayout should look more less like this:

+----------------------------------------------+
|                                              |
|                                              |
|+----------------+          +----------------+|
||                |+--------+|                ||
||     View 1     || View 2 ||     View 3     ||
|+----------------++--------++----------------+|
|                                              |
|                                              |
+----------------------------------------------+

and I achieve it perfectly when my relative layout has fixed height (for example 80dp). Unfortunately I need it to have android:layout_height="wrap_content" with android:minHeight set (for example to those 80dp). When I change my layout this way, android:layout_alignBaseline seems not to be working for View2, and I get something similar to this:

+----------------------------------------------+
|                                              |
|                  +--------+                  |
|+----------------+| View 2 |+----------------+|
||                |+--------+|                ||
||     View 1     |          |     View 3     ||
|+----------------+          +----------------+|
|                                              |
|                                              |
+----------------------------------------------+

And my xml looks like this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="80dp" >

    <TextView
        android:id="@+id/View1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/View2"
        android:gravity="center"
        android:text="View1" />

    <TextView
        android:id="@+id/View2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/View1"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="View2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/View2"
        android:gravity="center"
        android:text="View3" />

</RelativeLayout>

Anyone got any idea why it doesn't work?

Bartek Lipinski
  • 30,698
  • 10
  • 94
  • 132

3 Answers3

2

After few tests I came to the conclusion that setting height to wrap_content in RelativeLayout is just bugged. It cannot cooperate correctly with views that does not fill the whole height of the layout. For this kind of views RelativeLayout has a problem with centering vertically (rule CENTER_VERTICAL or CENTER IN PARENT). Basically, views that should be centered vertically WILL BE DISPLAYED like they are, but the layout itself will "SEE" them (for the purpose of setting other rules) as aligned top.

Therefore setting any rules as dependent on the position of those "wrongly-perceived-by-the-layout" views, will result in views that are being displayed in an unintended way.

If you take this into account, my case was pretty simple to explain. This is how the views were displayed:

+----------------------------------------------+
|                                              |
|                  +--------+                  |
|+----------------+| View 2 |+----------------+|
||                |+--------+|                ||
||     View 1     |          |     View 3     ||
|+----------------+          +----------------+|
|                                              |
|                                              |
+----------------------------------------------+

And this is how RelativeLayout "perceived" them:

+----------------------------------------------+
|+----------------+          +----------------+|
||                |+--------+|                ||
||     View 1     || View 2 ||     View 3     ||
|+----------------++--------++----------------+|
|                                              |
|                                              |
|                                              |
|                                              |
+----------------------------------------------+

(the View 2 position is the same in both pictures).

Since I needed my layout to be RelativeLayout, to solve this issue I decided to give up completely on using wrap_content value, and control the height of the view myself. It complicates my layout a bit, but as long as I control it, its fine.

Bartek Lipinski
  • 30,698
  • 10
  • 94
  • 132
0

It depends on how the text fills the views and your margins.

But it looks like you want "alignBottom" not "alignBaseline"

What is the baseline in RelativeLayout?

However, I also noticed that your layout rendering order may impact the ability to match the content bases in the way that you want. View1 references View2 and View2 references View1. This compiles but can create unwanted results, like what you are describing.

You should probably use a horizontal LinearLayout instead of a RelativeLayout based on what you've described so far.

Community
  • 1
  • 1
Jim
  • 10,172
  • 1
  • 27
  • 36
  • Since I have all my TextViews' layout_heights set to wrap_content, it doesn't matter. alignBottom and alignBaseline have the same result (the same wrong result). – Bartek Lipinski Aug 19 '14 at 14:55
  • Unfortunately I need it to be RelativeLayout. I've presented here only a part of the whole layout. – Bartek Lipinski Aug 19 '14 at 15:52
  • You could embed the LinearLayout in a RelativeLayout, if necessary. Sometimes I've found that to be "necessary" in the sense that I get random problems like these and I can only solve them with nested layouts or "useless" layouts – Jim Aug 19 '14 at 16:25
  • Yea I know, this is the one solution, the other one (that is currently being favoured by me) is to center those three views vertically and "push down" the middle one with proper padding. – Bartek Lipinski Aug 19 '14 at 16:30
0

It should be work.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:minHeight="80dp">

    <TextView
        android:id="@+id/View1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/View2"
        android:gravity="center"
        android:text="View1" />

    <TextView
        android:id="@+id/View2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="View2" />

    <TextView
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/View2"
        android:gravity="center"
        android:text="View3" />

</RelativeLayout>
Víctor Albertos
  • 8,093
  • 5
  • 43
  • 71
  • The result of your answer is the same as result of codejack's one. Which is: vertically it aligns centers of views, and not baselines, so its not what I want to achieve. – Bartek Lipinski Aug 20 '14 at 12:22