What is the baseline in RelativeLayout?

Solution 1:

The term baseline comes from typography. It's the invisible line letters in text sit on.

For example, imagine you put two TextView elements next to each other. You give the second TextView a big padding (say 20dp). If you add layout_alignBaseline to the second element, the text will "scoot up" to align with the baseline of the first element. The text from both elements will appear as if they were written on the same invisible line.

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  <TextView
      android:id="@+id/text1"
      android:text="aatlg"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      />
  <TextView
      android:text="joof"
      android:background="#00ff00"
      android:padding="20dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_toRightOf="@id/text1"
      android:layout_alignBaseline="@id/text1"
      />
</RelativeLayout>

Solution 2:

Here is a visual explanation that might clarify Cristian's answer:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <TextView
        android:id="@+id/text1"
        android:text="Lorem"
        android:background="@android:color/holo_blue_light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Ipsum"
        android:background="@android:color/holo_orange_light"
        android:padding="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/text1"
        android:layout_alignBaseline="@id/text1" />
</RelativeLayout>

This code will look like this:

Now, if I remove the android:layout_alignBaseline attribute, the same layout looks like this:

It's interesting to observe that there is an impact on the orange view's height (in the first case the padding is not applied to the top of the view).