How to align icon vertically to the center of the first line of textview in Android

Question

I wanted to place my left icon(Please refer image below), vertically centred to first line of the text in TextView. I couldn't find a way, I tried drawableLeft on text view, gravity & constraints but that didn't help. Can anybody help me?

 <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp">

    <ImageView
        android:id="@+id/iv_itm_tick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_tick_mark"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        app:layout_constraintStart_toEndOf="@+id/iv_itm_tick"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Concepts of deep learning and machine learning workflow" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

If the ImageView were a TextView you could simply constrain its baseline to the baseline of the other TextView. Unfortunately, ImageViews don't really have a workable concept of baselines, so you can't simply constrain the baseline of the ImageView to the TextView. (Try it to see what happens.)

One way to go is to replace the ImageView with a TextView, set the icon as the TextView's background and constrain the two baselines. Without special consideration, this technique will result in scaling of the tick mark and will result in distortion. To get around this, place the tick mark drawable in a layer-list drawable and specify a gravity. It is the gravity that prevents scaling:

tick_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_tick_mark"
        android:gravity="center" />
</layer-list>

The tick mark can look like this:

ic_tick_mark.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#66A8DD"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z" />
</vector>

The layer-list could also be an XML bitmap drawable if the underlying icon is a bitmap.

Another way, which will also work, is to create an empty TextView that has the same characteristics of the TextView you want to attach the tick mark to. Constrain the empty TextView to the baseline of the other TextView. This will position the empty textview alongside the first line of the other TextView.

Now, take the ImageView and constrain its top and bottom to the empty TextView. The tick mark will line up as is wanted.

This is an XML-only solution. Other solutions may involve some coding.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/iv_itm_tick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_tick_mark"
        app:layout_constraintBottom_toBottomOf="@id/dummyView"
        app:layout_constraintEnd_toStartOf="@id/textView"
        app:layout_constraintTop_toTopOf="@id/dummyView" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="Concepts of deep learning and machine learning workflow"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/dummyView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintBaseline_toBaselineOf="@id/textView"
        app:layout_constraintEnd_toStartOf="@+id/textView"/>

</androidx.constraintlayout.widget.ConstraintLayout>