Search code examples
androidandroid-linearlayoutgravitylayout-gravity

Setting center gravity of child view change layout alignment of another child view in horizontal layout?


In my horizontal LinearLayout, I set the gravity in one view to be center_vertical, and then I tried to set layout_gravity for a second view, but that view is lined up with the centered text in the first view!

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <TextView
        android:layout_width="100dp"
        android:layout_height="200dp"
        android:layout_gravity="top"
        android:background="@drawable/border"
        android:gravity="center_vertical"
        android:text="layout_gravity=top   gravity=center_vertical" >
    </TextView>            
    <TextView
        android:layout_width="100dp"
        android:layout_height="200dp"
        android:layout_gravity="top"
        android:background="@drawable/border"
        android:gravity="top"
        android:text="layout_gravity=top  gravity=top" >
    </TextView>
</LinearLayout>

enter image description here

And here is the same code but for a vertical layout. Notice that the desired behavior works correctly in the vertical layout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_gravity="left"
        android:background="@drawable/border"
        android:gravity="center_horizontal"
        android:text="layout_gravity=left   gravity=center_horizontal" >
    </TextView>            
    <TextView
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_gravity="right"
        android:background="@drawable/border"
        android:gravity="right"
        android:text="layout_gravity=right  gravity=right" >
    </TextView>
</LinearLayout>

enter image description here

I can just use a RelativeLayout or maybe another nested LinearLayout to fix the problem. But I am asking this question because I would like to know if I am not understanding how gravity and layout_gravity works!! It is important to me that I understand how these fundamental attributes work. Thanks


Solution

  • If you want one centered and one top then you need to add a baseline aligned flag to the LinearLayout

    android:baselineAligned="false"
    

    It is default for the layout to align the children's baselines. This can cause issues such as this when the children use different values of gravity.

    The difference with vertical is that the baselines can't be aligned as they can in horizontal.

    See:

    http://developer.android.com/reference/android/widget/LinearLayout.html#attr_android:baselineAligned

    Additional info - This appears to explain the issue better than I can:

    http://www.doubleencore.com/2013/10/shifty-baseline-alignment/