Style EditText content 'on the fly'?

Question

I'm working on a rich text editor in Android. Basically it has bold, italics and link buttons that are tied to an EditText to change the style of the content. I have it working great if you select the text you want to style first, and then select the button using this method: http://developer.android.com/guide/appendix/faq/commontasks.html#selectingtext.

What I'm trying to do is have it work like a rich text editor, where you can use the buttons as a toggle to style the text for as long as you'd like, then click the toggle again to stop using the style. So if I wanted to type 'Pay attention to this!' in bold, I would click the 'B' button, then start typing the text and everything I type would be bold until I click the 'B' button again.

Any ideas on how to pull this off? I hope I've been clear enough :)

Answer 1

For those interested, I got this to work by saving the cursor location ('styleStart' variable below) when the ToggleButton was pressed, and then as the user types more characters, I actually remove the matching StyleSpan with removeSpan(), then re-add it back with setSpan() by using the saved original cursor location + the length of characters currently typed.

You also need to track if the user changes cursor position so that you don't style text that you don't want to. Here's the TextWatcher code:

final EditText contentEdit = (EditText) findViewById(R.id.content);
        contentEdit.addTextChangedListener(new TextWatcher() { 
            public void afterTextChanged(Editable s) { 
                //add style as the user types if a toggle button is enabled
                ToggleButton boldButton = (ToggleButton) findViewById(R.id.bold);
                ToggleButton emButton = (ToggleButton) findViewById(R.id.em);
                ToggleButton bquoteButton = (ToggleButton) findViewById(R.id.bquote);
                ToggleButton underlineButton = (ToggleButton) findViewById(R.id.underline);
                ToggleButton strikeButton = (ToggleButton) findViewById(R.id.strike);
                int position = Selection.getSelectionStart(contentEdit.getText());
                if (position < 0){
                    position = 0;
                }

                if (position > 0){

                    if (styleStart > position || position > (cursorLoc + 1)){
                        //user changed cursor location, reset
                        styleStart = position - 1;
                    }

                    cursorLoc = position;

                    if (boldButton.isChecked()){  
                        StyleSpan[] ss = s.getSpans(styleStart, position, StyleSpan.class);

                        for (int i = 0; i < ss.length; i++) {
                            if (ss[i].getStyle() == android.graphics.Typeface.BOLD){
                                s.removeSpan(ss[i]);
                            }
                        }
                        s.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    }
                    if (emButton.isChecked()){
                        StyleSpan[] ss = s.getSpans(styleStart, position, StyleSpan.class);

                        boolean exists = false;
                        for (int i = 0; i < ss.length; i++) {
                            if (ss[i].getStyle() == android.graphics.Typeface.ITALIC){
                                s.removeSpan(ss[i]);
                            }
                        }
                        s.setSpan(new StyleSpan(android.graphics.Typeface.ITALIC), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    }
                    if (bquoteButton.isChecked()){

                        QuoteSpan[] ss = s.getSpans(styleStart, position, QuoteSpan.class);

                        for (int i = 0; i < ss.length; i++) {
                                s.removeSpan(ss[i]);
                        }
                        s.setSpan(new QuoteSpan(), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    }
                    if (underlineButton.isChecked()){
                        UnderlineSpan[] ss = s.getSpans(styleStart, position, UnderlineSpan.class);

                        for (int i = 0; i < ss.length; i++) {
                                s.removeSpan(ss[i]);
                        }
                        s.setSpan(new UnderlineSpan(), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    }
                    if (strikeButton.isChecked()){
                        StrikethroughSpan[] ss = s.getSpans(styleStart, position, StrikethroughSpan.class);

                        for (int i = 0; i < ss.length; i++) {
                                s.removeSpan(ss[i]);
                        }
                        s.setSpan(new StrikethroughSpan(), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    }
                }
            } 
            public void beforeTextChanged(CharSequence s, int start, int count, int after) { 
                    //unused
            } 
            public void onTextChanged(CharSequence s, int start, int before, int count) { 
                        //unused
                } 
});

And here's one of the ToggleButton click actions:

final ToggleButton boldButton = (ToggleButton) findViewById(R.id.bold);   

            boldButton.setOnClickListener(new Button.OnClickListener() {
                public void onClick(View v) {

                    EditText contentText = (EditText) findViewById(R.id.content);

                    int selectionStart = contentText.getSelectionStart();

                    styleStart = selectionStart;

                    int selectionEnd = contentText.getSelectionEnd();

                    if (selectionStart > selectionEnd){
                        int temp = selectionEnd;
                        selectionEnd = selectionStart;
                        selectionStart = temp;
                    }


                    if (selectionEnd > selectionStart)
                    {
                        Spannable str = contentText.getText();
                        StyleSpan[] ss = str.getSpans(selectionStart, selectionEnd, StyleSpan.class);

                        boolean exists = false;
                        for (int i = 0; i < ss.length; i++) {
                            if (ss[i].getStyle() == android.graphics.Typeface.BOLD){
                                str.removeSpan(ss[i]);
                                exists = true;
                            }
                        }

                        if (!exists){
                            str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), selectionStart, selectionEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                        }

                        boldButton.setChecked(false);
                    }
                }
        });

There may be a better solution, happy to hear it if you have one!

Answer 2

There is an open source EditText rich text editor called android-richtexteditor but the code was inexplicably deleted in r5. The code is still there in older revisions; just use svn to check out r4 or earlier to access it. The code appears to support italics, underline, color picker, text size, and more.

Also answered in these questions: 1, 2

Answer 3

You could just update the style after every character that they type using a TextWatcher and the addTextChangedListener() method.

Ok, this is just the bare bones example code.

int mStart = -1;

// Bold onClickListener
public void onClick(View view)
{
    if(mStart == -1) mStart = mEditText.getText().length();
    else mStart = -1;
}

// TextWatcher
onTextChanged(CharSequence s, int start, int before, int count)
{
    if(mStart > 0)
    {
        int end = mEditText.getText().length();
        mEditText.getText().setSpan(new StyleSpan(android.graphics.Typeface.BOLD), mStart, end - mStart, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    }
}

Answer 4

Just one possibility, not sure it's the best solution but its what comes to mind, and who knows but that it will inspire you to a more elegant solution:

Maybe you could consider internally tracking a hierarchical style structure of the "document", with all its style tags, and reconstructing / replacing the final output with each character typed? Of course you'll have to track cursor position too.

Answer 5

I know this is an old thread, but my coworker spotted DroidWriter on the web. I've played with it a bit and it's pretty self explanatory and very easy to use and modify. Hope this helps anyone who's looking to create a rich text editor.