How to create a "type along" style interface?

Question

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?

score 3 · Accepted Answer · answered Apr 25 '19 at 18:37

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!

Wow, this is both super simple and practical at the same time, thank you — Big_Chair, Apr 26 '19 at 08:31

score 1 · Answer 2 · answered Apr 17 '19 at 12:29

1

You could try and use a single EditText, with a combination of "overwrite" style text (covered in this question) and updating the span of all text before the current cursor position.

answered Apr 17 '19 at 12:29

PPartisan

8,173
4
29
48

score 0 · Answer 3 · answered Apr 24 '19 at 08:33

0

You could overwrite onDraw(Canvas canvas) function an EditText. To use the same Paint as EditText draw the gray words by StatisticLayout before super.onDraw(Canvas canvas) has been called.

answered Apr 24 '19 at 08:33

Chiang Xingbing

51
3

score 0 · Answer 4 · answered Apr 26 '19 at 00:08

Well the easier approach would be to take a screenshot of the edittext with hint first and crop it to the edges of the edittext. Then make it the background of the edittext. You can also play with the image color and can provide different background on different events using selector drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/edittext_disabled" android:state_enabled="false"/>
    <item android:drawable="@drawable/edittext_focus_lost" android:state_enabled="true" android:state_focused="false"/>
    <item android:drawable="@drawable/edittext_focus_gained" android:state_enabled="true" android:state_focused="true"/>
</selector>

How to create a "type along" style interface?

4 Answers4