CODEWITHSUNDEEP
androidandroid-constraintlayoutandroid-layout
Gus
Gus

Reputation: 2631

Align view bottom to text baseline

In ConstraintLayout, is there a way to align the bottom of a View (e.g. ImageView) to the baseline of a TextView? I'm expecting there to be a constraint like app:layout_constraintBottom_toBaselineOf, but nothing like that exists.

Note: I've tried app:layout_constraintBaseline_toBaselineOf, but it looks like that only works when defined on a TextView.

Upvotes: 8

Views: 6273

Answers (2)

Gennadii Saprykin
Gennadii Saprykin

Reputation: 4573

This might be too late but I hope still helpful for someone who reads the post.

In this specific example, if you want to align an ImageView to a TextView's baseline, the default alignment setting for an ImageView is applied to the "top", not sure why.. Most likely you want to apply it to the bottom of the ImageView which can be achieved by setting android:baselineAlignBottom="true" attribute. More info here: https://developer.android.com/reference/android/widget/ImageView.html#attr_android:baselineAlignBottom

So the full code for ConstraintLayout will look like this:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
  <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />
  <android.support.v7.widget.AppCompatImageView
      android:id="@+id/imageView"
      android:layout_width="96dp"
      android:layout_height="96dp"
      android:baselineAlignBottom="true"
      app:layout_constraintBaseline_toBaselineOf="@id/textView"
      app:layout_constraintStart_toEndOf="@id/textView"
      app:srcCompat="@drawable/drawable1"
      android:contentDescription="@null"/>
</android.support.constraint.ConstraintLayout>

I'm using an AppCompatImageView in my project but I'm pretty sure a regular ImageView will work the same way.

The same behavior can also be achieved by a RelativeLayout by also adding a layout_alignBaseline="@id/textView" to the ImageView.

In case this doesn't work for some reason, e.g. you have a custom view or something, you might also consider doing it in runtime.

There is a method in a TextView, called getLastBaselineToBottomHeight. It returns the distance between the last text baseline and the bottom of this TextView. You can apply that value to your View's bottom margin which should give you the same effect. Although the method was only introduced in Android P, you can simply implement it the same way (according to the source code). Just an example that worked for me:

MarginLayoutParams params = (MarginLayoutParams) rootView.findViewById(R.id.imageView).getLayoutParams();
params.bottomMargin = textView.getPaddingBottom() + textView.getPaint().getFontMetricsInt().descent;

I hope that helps. Good luck!

Upvotes: 15

Ben P.
Ben P.

Reputation: 54194

From the developer guidelines for ConstraintLayout:

baselines can constrain only to other baselines

and

Baseline alignment

Align the text baseline of a view to the text baseline of another view.

From this, and from my own experimentation, it appears that it is impossible to constrain a generic View's bottom or top to a TextView's baseline.

Upvotes: 2

Related Questions