CODEWITHSUNDEEP
androidandroid-layout
Alexander Dunaev
Alexander Dunaev

Reputation: 990

RelativeLayout: what's wrong with the baseline alignment?

I want to create a layout that would look like this:

The desired layout

(The dotted lines are baselines of the text views.)

So the main anchor is the large W, then abc is baseline-aligned to W, and then def is above abc.

But when I set the baseline alignment for abc, the def falls down and gets invisible. There is no problem with abc, it is aligned perfectly.

I've found the only way to make def visible: it is changing the alignment for abc so it would be aligned to the bottom of W, but that looks bad because the larger glyph has a greater bottom margin (more vertical space between the baseline and the bottom edge of the view).

It looks like the baseline alignment is handled some special way so the layout cannot calculate the right position for dependent views.

Do I do something wrong? Is my layout ever possible?

Here is the XML:

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

    <TextView
        android:id="@+id/w"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="W"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="100sp" />

    <TextView
        android:id="@+id/abc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/w"
        android:layout_alignParentLeft="true"
        android:text="abc"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/def"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/abc"
        android:layout_alignParentLeft="true"
        android:text="def"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    </RelativeLayout>

Upvotes: 2

Views: 2601

Answers (1)

yincrash
yincrash

Reputation: 6474

A reasonable but not perfect workaround is here: https://groups.google.com/d/msg/android-developers/M9THu9V08vo/EouuJZv1dTAJ

However, that led me to find a little quirk, if you align B to A using simultaneous layout_alignBottom and layout_alignBaseline flags, then C’s positioning now works, it happily sits above B exactly as if just layout_alignBottom was being used, although B is still aligned to A’s baseline. The caveat is that C’s positioning is sligthty lower than normal; it behaves as if the B is aligned to A’s bottom, then C is positioned, and then B is realigned to A’s baseline, without C changing position. However I can get round that with some margin offsets, and at least it can be done via XML.

Upvotes: 1

Related Questions