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
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!
- → should I choose reactjs+f7 or f7+vue.js?
- → Phonegap Android write to sd card
- → Local reference jquery script in nanohttpd (Android)
- → Click to navigate on mobile devices
- → How to allow api access to android or ios app only(laravel)?
- → Access the Camera and CameraRoll on Android using React Native?
- → React native change listening port
- → What is the default unit of style in React Native?
- → Google play market autocomplete icon
- → Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
- → Using Laravel with Genymotion
- → react native using like web-based ajax function
- → react native pdf View