Align bullet with first line of a wrapped TextView

Question

I'm trying to create a bulleted list in Android where the bullet is aligned to the vertical center of the first line in a TextView like so:

The XML for a single bullet/text row is this:

<android.support.constraint.ConstraintLayout
    android:id="@+id/setup_intro_bullet_first_container"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/setup_intro_bullet_first"
        style="@style/TextAppearance.AppCompat.Headline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/bullet"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/setup_intro_bullet_first_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:paddingTop="14dp"
        android:text="@string/setup_intro_benefit_notification"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/setup_intro_bullet_first"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Here I use padding on the TextView to align with the bullet, but this is not a solution because the alignment isn't consistent across other resolutions. I've also tried putting the bullet character in the text string itself but then the second line of text will sit under the bullet, which is not what I want. I'd like some advice on how to accomplish this.

Answer 1

The solution I came up with is to create a circle Drawable and use it in an ImageView. You can define the baseline of an ImageView which allowed me to properly align it with the baseline of the TextView. Here is the circle XML:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
</shape>

And the layout XML:

<ImageView
    android:id="@+id/setup_intro_bullet_first"
    style="@style/TextAppearance.AppCompat.Headline"
    android:layout_width="4dp"
    android:layout_height="4dp"
    android:baseline="7dp"
    android:src="@drawable/circle"
    app:layout_constraintBaseline_toBaselineOf="@+id/setup_intro_bullet_first_text"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/setup_intro_bullet_first_text" />

<TextView
    android:id="@+id/setup_intro_bullet_first_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="4dp"
    style="@style/TextAppearance.AppCompat.Subhead"
    android:text="@string/setup_intro_benefit_notification"
    android:textColor="@android:color/white"
    app:layout_constraintLeft_toRightOf="@id/setup_intro_bullet_first"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Answer 2

Use the app:layout_constraintBaseline_toBaselineOf attribute to constrain your "bullet" view's baseline to the baseline of your text view.

Constraints for your bullet view:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/setup_intro_bullet_first_text"
app:layout_constraintBaseline_toBaselineOf="@+id/setup_intro_bullet_first_text"

And for your text:

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/setup_intro_bullet_first"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"