4

I have a TextView to display a paragraph of text and I want my application to speak individual words when they are pressed, using TTS. It would look better if words can be highlighted when pressed. I have implemented it using a ClickableSpan for each word. It works almost fine except that I do not see how to reset the highlighted state back to normal once playback is done. Each time I click a new word the previous word loses the highlight and the new one gets highlighted, but I do not know how to remove the highlight once TTS calls back:

My TextView:

<TextView
    android:id="@+id/sentence"
    ...
    android:textColorHighlight="@color/i_blue"
 />

To fill in the TextView, I use:

SpannableStringBuilder strBuilder = new SpannableStringBuilder();
Iterator<Word> iterator = e.getWordList().iterator();
int wordStart, wordEnd;
while (iterator.hasNext()) {
    Word w =  iterator.next();
    wordStart = strBuilder.length() + w.getPrefix().length();
    wordEnd = wordStart + w.getWord().length();
    strBuilder.append(w.getPrefix() + w.getWord() + w.getSuffix());
    final String currentWord = w.getWord();
    ClickableSpan readWord = new ClickableSpan() {
        private String clickedWord = currentWord;
        public void onClick(View view) {
            Message msg = m_HandlerReadWord.obtainMessage();
            msg.obj = clickedWord;
            m_HandlerReadWord.sendMessage(msg);
        }
        @Override
        public void updateDrawState(TextPaint ds) {
            super.updateDrawState(ds);
            ds.setUnderlineText(false);
        }
    };
    strBuilder.setSpan(readWord, wordStart, wordEnd, 0);
}
m_SentenceView.setText(strBuilder);
m_SentenceView.setMovementMethod(LinkMovementMethod.getInstance());

And I also have this method which is called once TTS calls back when it is done playing the word:

public void resetHighlight() {
 //What can I do there to reset any highlighted word?
}

Is there a way I can do it? Or is there a better approach than ClickableSpan?

1 Answer 1

2

I finally found a trick that works for me. When the text color in the TextView changes, all highlights are reset. So if I trigger a text color change in the callback of the TTS, then the highlight gets removed. The dirty part is that the triggered color change must be a different color. So I have to change the colors both when TTS calls back and in the onClick handler of the ClickableSpan. And I set these two colors to two almost identical colors.

My ClickableSpan:

final int AlmostBlack = m_Resources.getColor(R.color.i_black_almost);
ClickableSpan readWord = new ClickableSpan() {
    private int almostBlack = AlmostBlack;
    public void onClick(View view) {
        TextView v = (TextView) view;
        v.setTextColor(almostBlack);
        ...

And in the handler when TTS calls back:

m_SentenceView.setTextColor(m_Resources.getColor(R.color.i_black));

If you want to do something similar but without waiting for TTS or anything to call back, you can use a Color State List to trigger color changes when the view is pressed or released:

The Color State List, res/color/clickable_words.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:color="@color/i_black_almost" android:state_pressed="true"/>
    <item android:color="@color/i_black" />
</selector>

The TextView:

<TextView
    android:id="@+id/sentence"
    ...
    android:textColor="@color/clickable_words"
    android:textColorLink="@color/clickable_words"
    android:textColorHighlight="@color/i_blue" />
1
  • Sylvain can you tell me how can i achieve it ? i need to display each word in toast Jul 22, 2017 at 5:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.