
<p>This post is about how to change paragraph color which is current speaking 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/AndroidHightlightTextDemo" 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="ldF3tV0e_cA" 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=ldF3tV0e_cA" placeholder><amp-img src="https://i.ytimg.com/vi/ldF3tV0e_cA/hqdefault.jpg" alt="YouTube Poster" layout="fill" object-fit="cover"><noscript><img src="https://i.ytimg.com/vi/ldF3tV0e_cA/hqdefault.jpg" loading="lazy" decoding="async" alt="YouTube Poster"></noscript></amp-img></a></amp-youtube></span>
</div></figure>



<h3 class="wp-block-heading"><span style="color: #000080;"><strong>Creating new project</strong></span></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"><b>2</b>. The below layout file consist of two textView and a button to trigger an event that will highlight the paragraph while speech is running in <strong><span style="color: #0000ff;">TextToSpeech</span>.</strong></p>


<p><span style="color: #0000ff;"><strong data-rich-text-format-boundary="true">activity_main.xml</strong></span></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">;

 <;TextView
 android:id="@+id/tv_text_to_speech"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="@dimen/margin_50dp"
 android:gravity="center"
 android:text="@string/text_to_speech"
 android:textColor="@color/colorPrimaryDark"
 android:textSize="@dimen/textSize_30sp"
 android:textStyle="bold"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />;


 <;TextView
 android:id="@+id/tv_text"
 android:layout_width="match_parent"
 android:layout_height="250dp"
 android:layout_marginLeft="@dimen/margin_10dp"
 android:layout_marginRight="@dimen/margin_10dp"
 android:layout_marginTop="@dimen/margin_30dp"
 android:background="@drawable/background"
 android:textColor="@color/colorPrimaryDark"
 android:padding="@dimen/padding_8dp"
 app:layout_constraintEnd_toEndOf="parent"
 android:textSize="@dimen/textSize_25sp"
 app:layout_constraintStart_toStartOf="@+id/tv_text_to_speech"
 app:layout_constraintTop_toBottomOf="@+id/tv_text_to_speech" />;

 <;Button
 android:id="@+id/btn_speak_text"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="@dimen/margin_30dp"
 android:background="@color/colorPrimary"
 android:padding="@dimen/padding_12dp"
 android:onClick="speakClicked"
 android:text="@string/speak_text"
 android:textColor="@android:color/white"
 android:textSize="@dimen/textSize_18sp"
 android:textStyle="bold"
 app:layout_constraintEnd_toEndOf="@+id/tv_text"
 app:layout_constraintStart_toStartOf="@+id/tv_text"
 app:layout_constraintTop_toBottomOf="@+id/tv_text" />;

<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre>
<p><strong data-rich-text-format-boundary="true">3</strong>. Open <strong><span style="color: #008000;">MainActivity.java</span>,</strong> implement it from <strong><span style="color: #008000;">TextToSpeech.OnInitListener</span> </strong>and add the below code<strong>.</strong></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>package com.c1ctech.androidhightlighttextdemo;

import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.speech.tts.UtteranceProgressListener;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.style.ForegroundColorSpan;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.Arrays;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements TextToSpeech.OnInitListener {

 private int paragraphCount = 0;
 private ArrayList<;String>; stringArrayList = new ArrayList<;>;();
 TextView textView;
 TextToSpeech tts;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 textView = findViewById(R.id.tv_text);

 <strong><span style="color: #008000;"> //creating TTS instance</span></strong>
 tts = new TextToSpeech(this, this);
 textView.setText(getString(R.string.text));
 }

 private void speakText() {
 if (paragraphCount == 0) {
 stringArrayList = new ArrayList<;>;(Arrays.asList(textView.getText().toString().split("\n")));
 }
 try {
 SpannableString spannableString = new SpannableString(textView.getText().toString());
 spannableString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorPrimaryDark)),
 0, textView.getText().toString().length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);


 spannableString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorAccent)),
 textView.getText().toString().indexOf(stringArrayList.get(paragraphCount)),
 textView.getText().toString().indexOf(stringArrayList.get(paragraphCount)) +
 stringArrayList.get(paragraphCount).length(),
 Spanned.SPAN_INCLUSIVE_INCLUSIVE);

 tts.speak(stringArrayList.get(paragraphCount), TextToSpeech.QUEUE_FLUSH, null, "UniqueID");

 textView.setText(spannableString);

 } catch (Exception e) {
 e.printStackTrace();
 }
 }

<span style="color: #008000;"><strong> //Called to signal the completion of the TextToSpeech engine initialization.
</strong></span> @Override
 public void onInit(int i) {

<strong><span style="color: #008000;"> //Listener for events relating to the progress of an utterance
</span></strong> tts.setOnUtteranceProgressListener(new UtteranceProgressListener() {

 <strong><span style="color: #008000;">//called when speaking starts</span></strong>
 @Override
 public void onStart(String utteranceId) {
 Log.i("TTS", "utterance started");
 }

 <strong><span style="color: #008000;"> //called when speaking is finished.</span></strong>
 @Override
 public void onDone(String utteranceId) {
 if (stringArrayList.size() - 1 != paragraphCount) {
 paragraphCount++;
 speakText();
 } else {
 paragraphCount = 0;
 }
 Log.i("TTS", "utterance done");
 }

<strong><span style="color: #008000;"> //called when an error has occurred during processing.
</span></strong> @Override
 public void onError(String utteranceId) {
 Log.i("TTS", "utterance error");
 }

 });
 }

 public void speakClicked(View ignored) {
 speakText();
 }
}</pre>


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



<p>In the above code,</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><span style="color: #0000ff;"><strong>onDone(): </strong></span>called when speaking is finished.</li><li><span style="color: #0000ff;"><strong>onError(): </strong></span>called when an error has occurred during processing.</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 data-rich-text-format-boundary="true">4</strong>. Now run your project and test your app by clicking the button.  ;</p>


<p><img class="alignnone wp-image-2367" src="https://c1ctech.com/wp-content/uploads/2021/02/Screenshot_1612184216.png" alt="" width="436" height="775" />