How to create a “type along” style interface?

Refresh

April 2019

Views

99 time

3

I'm talking about something like this:

a screen with gray hints where the user types along and the letters turn black

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:

enter image description here

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?

4 answers

3

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:

enter image description here

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

I wish I was able to help you!

0

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>
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.

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.