how can i underline each character in edittext?

Question

I'm trying to write a word guessing game like hangman in android. let's say if the word is 'apple'. I want to display 5 underlines to tell the player that the word is 5 chars long, and they should be displayed/filled like below

i cant think of a way to do so easily. i found this to be exact the same what Im looking for but there's no answer given and somehow got a lot of downvotes.

my initial thought is creating edittext with underline to be the hint and loop through all the characters. this will create # of edittext based on how many characters, but underline will be gone once a char is filled, and i need to create links to the previous/next edittext when the char is deleted/filled.

any idea on how to accomplish this? or is there a lib to use? Thank you so much!!

i saw the link u provided and i think there is one answer as well which is `TextView theTextView = new TextView(this); theTextView.setText(Html.fromHtml("3 2 3 5 1"));` did u tried this ? — Manish Menaria, Jun 10 '16 at 18:45
@ManishMenaria yea, but thats just how you display it. i want the edittext be able to take user's input — user1865027, Jun 10 '16 at 18:51
"Somehow got a lot of downvotes" - because the question was "here is what I want; how do I do it", which is essentially asking for a library or other off-site resource which is off-topic for StackOverflow. http://stackoverflow.com/help/on-topic — OneCricketeer, Jun 10 '16 at 19:04

aligur · Accepted Answer · 2016-06-10T20:34:20.260

i think you dont need to use edittext for achieve it. You can add a horizontal linearlayout which is do not contain any view inside in your layout.

And than you can create a layout which will be populate in the horizontal linearlayout as a view. (thats name can be row_word) This layout will be include the underline below every edittext. You can use linearlayout for achive it.

In your fragment you can write a populate method which likes below:

public class Character
{
    public String char;

    public boolean isFilled;

}

 ArrayList<Character> words = new ArrayList();
 words.addAll(_yourWords);

 linearlayout.removeAllViews();
 for(int i = 0 ; i < words.size(); i++)
    {
        LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View v = inflater.inflate(R.layout.row_word, horizontalLinearLayout, false);

        EditText editText = v.findViewById(R.id.textView);
        //you must declare focusable and focusableintouchmode values false in 
        //the your row_word
        if(!word.isFilled)
        {
          edittext.setFocusable(true);
          edittext.setFocusableontouhcmode(true);
          editText.requestFocus();
        }
         else{
          edittext.setFocusable(false);
          edittext.setFocusableontouhcmode(false);
          edittext.clearfocus();
         } 



      edittex.setOnFocusChangeListener(new OnFocusChangeListener() {
      public void onFocusChange(View v, boolean hasFocus) {
      populate();
      } 

        .
        .
        .
        .
        .
        .

        horizontalLinearLayout.addView(v);

    }

if you want to use textview in your row_word then override the below method in your activity for get the pressed key value from the keyboard(With using interface of course). Otherwise you dont need to use below codes.

@Override
public boolean dispatchKeyEvent(KeyEvent event) {
    Log.i("key pressed", String.valueOf(event.getKeyCode()));
    return super.dispatchKeyEvent(event);
    callBack.setValue(String.valueOf(event.getKeyCode())

}

Your interface is like:

public interface pressedKeyCallback {

void onKeyPressed(String pressedKey);}

for showing keyboard:

InputMethodManager imm = (InputMethodManager)
                                 getSystemService(Context.INPUT_METHOD_SERVICE);
if(imm != null){
        imm.toggleSoftInput(InputMethodManager.SHOW_IMPLICIT, 0);
    }

this sounds interesting except I dont see how u can edit the specific char at a certain index and also how you link to the pre/next char? — user1865027, Jun 10 '16 at 20:19
and it looks like the same as what my initial idea, but yours using textview instead of edittext — user1865027, Jun 10 '16 at 20:21
@user1865027 i edited my code with using edittext insideof textview. look at the populate method :) And also you can set the margin beetween rows in the layout file. — aligur, Jun 10 '16 at 20:28
hi, i dont understand how you link each edittext. say if i wanna enter 'apple', i would need to type 'a' in the first edittext then manually select the 2nd edittext to enter 'p' and so on. same thing when i wanna delete words from 'l' all the way back — user1865027, Jun 10 '16 at 20:46

score 0 · Answer 2 · answered Jun 10 '16 at 19:24

The EditText has an underline by default, so you could just edit the colors in your style to make it darker. Add these in your style.

<item name="android:textColorSecondary">@android:color/black</item>
<item name="colorAccent">@android:color/black</item>

I'd also add this so that you don't have that blinking cursor.

editText.setCursorVisible(false);

score -1 · Answer 3 · answered Jun 10 '16 at 18:58

-1

I think you should you the built in hint feature of edittext. Check this out.

answered Jun 10 '16 at 18:58

Amit

1,111
1
8
14

1

The hint doesn't provide underlining or individual character editing. Please read the question again. – OneCricketeer Jun 10 '16 at 19:01
alternatively, underline for individual character can be set using `edittext.setHint(Html.fromHtml("3 2 3 5 1"));` – Manish Menaria Jun 10 '16 at 19:03

how can i underline each character in edittext?

3 Answers3

Linked