[ACCEPTED]-What is the baseline in RelativeLayout?-android-relativelayout

Accepted answer
Score: 125

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

For example, imagine you 7 put two TextView elements next to each other. You 6 give the second TextView a big padding (say 20dp). If 5 you add layout_alignBaseline to the second element, the text 4 will "scoot up" to align with 3 the baseline of the first element. The text 2 from both elements will appear as if they 1 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>
Score: 35

Here is a visual explanation that might 7 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 6 look like this:

with android:layout_alignBaseline

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

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

More Related questions