
<p>This post is about how to highlight the word while speech is running in <span style="color: #0000ff;"><strong><a style="color: #0000ff;" href="https://c1ctech.com/android-text-to-speech-example/">TextToSpeech</a></strong></span>.</p>



<div class="wp-block-buttons aligncenter is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" href="https://github.com/arunk7839/HighlightTextDemo" style="background-color:#520599" target="_blank" rel="noreferrer noopener"><strong>DOWNLOAD CODE</strong></a></div>
</div>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<span class="embed-youtube" style="text-align:center; display: block;"><amp-youtube data-videoid="V8-iR0vpwXw" data-param-rel="1" data-param-showsearch="0" data-param-showinfo="1" data-param-iv_load_policy="1" data-param-fs="1" data-param-hl="en-US" data-param-autohide="2" data-param-wmode="transparent" width="1200" height="675" layout="responsive"><a href="https://www.youtube.com/watch?v=V8-iR0vpwXw" placeholder><amp-img src="https://i.ytimg.com/vi/V8-iR0vpwXw/hqdefault.jpg" alt="YouTube Poster" layout="fill" object-fit="cover"><noscript><img src="https://i.ytimg.com/vi/V8-iR0vpwXw/hqdefault.jpg" loading="lazy" decoding="async" alt="YouTube Poster"></noscript></amp-img></a></amp-youtube></span>
</div></figure>



<h3 class="wp-block-heading"><strong><span style="color: #000080;">Creating new project</span></strong></h3>



<p class="p1"><b>1</b>. Create a new project by going to ;<span style="color: #008000;"><b>File ;</b><span class="s1"><b>⇒</b></span></span><b><span style="color: #008000;"> ;New Android Project</span>,</b> ;fill the required details and then click on ;<span style="color: #008000;"><strong>finish</strong></span>.</p>



<p class="p1"><span style="font-size: inherit;"> </span><b>2</b>. The below layout file consist of two textView and a button to trigger a event that will highlight the word while speech is running in <span style="color: #0000ff;"><strong><span style="color: #008000;">TextToSpeech</span>.</strong></span></p>



<p><span style="color: #0000ff;"><strong>activity_main.xml</strong></span></p>



<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>;<br><;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"<br> xmlns:app="http://schemas.android.com/apk/res-auto"<br> xmlns:tools="http://schemas.android.com/tools"<br> android:layout_width="match_parent"<br> android:layout_height="match_parent"<br> tools:context=".MainActivity">;<br><br> <;TextView<br> android:id="@+id/tv_text_to_speech"<br> android:layout_width="match_parent"<br> android:layout_height="wrap_content"<br> android:layout_marginTop="@dimen/margin_50dp"<br> android:gravity="center"<br> android:text="@string/text_to_speech"<br> android:textColor="@color/colorPrimaryDark"<br> android:textSize="@dimen/textSize_30sp"<br> android:textStyle="bold"<br> app:layout_constraintEnd_toEndOf="parent"<br> app:layout_constraintStart_toStartOf="parent"<br> app:layout_constraintTop_toTopOf="parent" />;<br><br> <;TextView<br> android:id="@+id/tv_text"<br> android:layout_width="match_parent"<br> android:layout_height="100dp"<br> android:layout_marginLeft="@dimen/margin_10dp"<br> android:layout_marginRight="@dimen/margin_10dp"<br> android:layout_marginTop="@dimen/margin_30dp"<br> android:background="@drawable/background"<br> android:textColor="@color/colorPrimaryDark"<br> android:padding="@dimen/padding_8dp"<br> app:layout_constraintEnd_toEndOf="parent"<br> android:textSize="@dimen/textSize_25sp"<br> app:layout_constraintStart_toStartOf="@+id/tv_text_to_speech"<br> app:layout_constraintTop_toBottomOf="@+id/tv_text_to_speech" />;<br> <br> <;Button<br> android:id="@+id/btn_speak_text"<br> android:layout_width="wrap_content"<br> android:layout_height="wrap_content"<br> android:layout_marginTop="@dimen/margin_30dp"<br> android:background="@color/colorPrimary"<br> android:padding="@dimen/padding_12dp"<br> android:onClick="startClicked"<br> android:text="@string/speak_text"<br> android:textColor="@android:color/white"<br> android:textSize="@dimen/textSize_18sp"<br> android:textStyle="bold"<br> app:layout_constraintEnd_toEndOf="@+id/tv_text"<br> app:layout_constraintStart_toStartOf="@+id/tv_text"<br> app:layout_constraintTop_toBottomOf="@+id/tv_text" />;<br><br><;/androidx.constraintlayout.widget.ConstraintLayout>;</pre>



<p><div class="article-post-image"><strong>3</strong>. Open ;<strong><span style="color: #008000;">MainActivity.java</span>,</strong> ;implement it from ;<span style="color: #0000ff;"><strong>TextToSpeech.OnInitListener ;</strong></span>and add the below code<strong>.</strong></div></p>



<p><span style="color: #0000ff;"><strong>MainActivity.java</strong></span></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>




<pre class="wp-block-preformatted">package com.c1ctech.highlighttextdemo;<br><br>import android.graphics.Color;<br>import android.os.Bundle;<br>import android.speech.tts.TextToSpeech;<br>import android.speech.tts.UtteranceProgressListener;<br>import android.text.Spannable;<br>import android.text.SpannableString;<br>import android.text.Spanned;<br>import android.text.style.ForegroundColorSpan;<br>import android.util.Log;<br>import android.view.View;<br>import android.widget.TextView;<br><br>import androidx.appcompat.app.AppCompatActivity;<br><br>public class MainActivity extends AppCompatActivity implements TextToSpeech.OnInitListener {<br> TextToSpeech tts;<br><br> String sentence = "The quick brown fox jumps over the lazy dog.";<br><br> TextView textView;<br><br> @Override<br> protected void onCreate(Bundle savedInstanceState) {<br><br> super.onCreate(savedInstanceState);<br> setContentView(R.layout.activity_main);<br><br> textView = findViewById(R.id.tv_text);<br> textView.setText(sentence);<br><br> <span style="color: #008000;"><strong> // creating TTS instance</strong></span><br> tts = new TextToSpeech(this, this);<br><br> }<br><br> public void onInit(int status) {<br><br> tts.setOnUtteranceProgressListener(new UtteranceProgressListener() {<br><br> @Override<br> public void onStart(String utteranceId) {<br> Log.i("TTS", "utterance started");<br> }<br><br> @Override<br> public void onDone(String utteranceId) {<br> Log.i("TTS", "utterance done");<br> }<br><br> @Override<br> public void onError(String utteranceId) {<br> Log.i("TTS", "utterance error");<br> }<br><br> @Override<br> public void onRangeStart(String utteranceId,<br> final int start,<br> final int end,<br> int frame) {<br> Log.i("TTS", "onRangeStart() ... utteranceId: " + utteranceId + ", start: " + start<br> + ", end: " + end + ", frame: " + frame);<br><br><br> <span style="color: #008000;"><strong> // onRangeStart (and all UtteranceProgressListener callbacks) do not run on main thread</strong></span><br><span style="color: #008000;"><strong> // ... so we explicitly manipulate views on the main thread:</strong></span><br> runOnUiThread(new Runnable() {<br> @Override<br> public void run() {<br><br> Spannable textWithHighlights = new SpannableString(sentence);<br><br> textWithHighlights.setSpan(new ForegroundColorSpan(Color.RED), start, end, Spanned.SPAN_INCLUSIVE_INCLUSIVE);<br> textView.setText(textWithHighlights);<br><br> }<br> });<br> }<br> });<br><br> }<br><br> public void startClicked(View ignored) {<br><br> tts.speak(sentence, TextToSpeech.QUEUE_FLUSH, null, "UNIQUE_UTTERANCE_ID");<br><br> }<br><br> @Override<br> public void onDestroy() {<br> <span style="color: #008000;"><strong>//don't forget to shutdown tts</strong></span><br> if (tts != null) {<br> tts.stop();<br> tts.shutdown();<br> }<br> super.onDestroy();<br> }<br><br>}</pre>



<p><strong><span style="color: #000080;">Note:</span></strong> The <span style="color: #008000;"><strong>setOnUtteranceProgressListener()</strong></span> method must be called before <span style="color: #008000;"><strong>speak()</strong></span> is called.</p>



<p>In the above code,<span style="font-size: inherit;"> </span></p>



<ul class="wp-block-list"><li><span style="color: #0000ff;"><strong>onInit()</strong>:</span> Called to signal the completion of the TextToSpeech engine initialization.</li><li class="p1"><span style="color: #0000ff;"><strong>speak()</strong>:</span> Speaks the text using the specified queuing strategy and speech parameters.</li><li><strong><span style="color: #0000ff;">onStart():</span> </strong>called when speaking starts (soon after calling speak()). ;</li><li><strong><span style="color: #0000ff;">onDone():</span> </strong>called when speaking is finished.</li><li><strong><span style="color: #0000ff;">onError():</span> </strong>called when an error has occurred during processing.</li><li><strong><span style="color: #0000ff;">onRangeStart():</span> </strong>called when the TTS service is about to speak the specified range of the utterance with the given utteranceId.</li><li><span style="color: #0000ff;"><strong>stop()</strong>:</span> stop the speak.</li><li><span style="color: #0000ff;"><strong>shutdown()</strong>:</span> releases the resources used by the TextToSpeech engine.</li></ul>



<p><strong>4</strong>. Now run your project and test your app by clicking the button.</p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://c1ctech.com/wp-content/uploads/2021/02/Screenshot_1612178630.png" alt="" class="wp-image-2357" width="403" height="716"/></figure></div>