31

I tried both to align a few TextView objects and they gave me the same results. What exactly is the difference between 'baseline' and 'bottom' ?

Onik
  • 19,396
  • 14
  • 68
  • 91
Akshay Damle
  • 1,220
  • 3
  • 18
  • 31
  • 5
    If I am not mistaken, bottom means bottom of the element while baseline is generally the line on which text rests (notice how letters like "p" and "q" dip below the baseline while letters like "t" and "r" sit on the baseline). http://en.wikipedia.org/wiki/Baseline_%28typography%29 This is how I have always encountered it. – bandaro Jan 15 '14 at 17:43

1 Answers1

125

To visualize the difference, I usually imagine two textboxes in Word or Photoshop.

  • alignBottom lines up the bottom of the textboxes. (The blue outline)
    • Text could be uneven, but the boxes they're in would line up on the bottom.
  • alignBaseline aligns the actual text within the box. This can help ensure that the texts line up on the bottom, regardless of font size or textbox size. (The green line)

enter image description here

What is a Baseline?

Baseline is a typography term that refers to the invisible line text is written on.

What is a baseline

(As referenced in What is the baseline in RelativeLayout?)

Warning

If you're not careful, using alignBaseline could make your layout look like this: Unintended baseline alignment

Details: Watch That Baseline Alignment

I don't know if you're still looking for the answer, but I decided to at least put this out there since this was one of the first results.

Community
  • 1
  • 1
mrgnw
  • 1,771
  • 2
  • 17
  • 19
  • 4
    Now, what would happen if one of the views is an ImageView? – Ashwin May 14 '15 at 10:58
  • 3
    @Ashwin For ImageView there is an XML - Parameter "baseline" that let's you define the baseline of an ImageView as the distance from the top of the view. For example by setting the baseline of the ImageView to the height of the ImageView you can align the baseline of a TextView to the bottom of the ImageView. – Nantoka Mar 23 '16 at 13:22
  • 1
    Is there a chart or map of all https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html that shows the visual differences/examples of each one of them? – sofs1 Jan 26 '17 at 23:23