How To Create A "type Along" Style Interface?

I'm talking about something like this:

The image is just an example, I simply need the user to type a certain text letter by letter.

I tried it with an overlaying TextViewon an EditText, but it looks really ugly:

My next attempt would be to use Spannables to turn the overlaying text the same color after each letter with a TextWatcher, as suggested in How can I change the color of a part of a TextView?

But even with the Spannable class it does not fit perfectly and I have to experiment with the TextView paddings to align it with the EditText.

Are there better ways of doing this?

You were on the right track when you tried to overlay a TextView on an EditText. However, the two views do not have the exact same properties and indeed they do not overlap properly.

A simple solution is to overlay two EditText and disable one:

<EditText
    android:id="@+id/hint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum"
    android:enabled="false"
    android:background="@null"/>

<EditText
    android:id="@+id/tap_here"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null"/>

The obtained result is the following:

Note that adding android:background="@null" hides the bottom bar of EditText.

I wish I was able to help you!