DEV Community

Cover image for Create Simple TextToSpeech Utility App in 5 Minutes
Rishabh Kumar
Rishabh Kumar

Posted on • Originally published at codewithrish.com

Create Simple TextToSpeech Utility App in 5 Minutes

  • Create a project with an empty activity.
  • Implement the inbuilt class in your MainActivity TextToSpeech.OnInitListener

It will look something like this:

public class MainActivity extends AppCompatActivity implements TextToSpeech.OnInitListener 
Enter fullscreen mode Exit fullscreen mode
  • Create cover design with following code paste below code in activity_main
<?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/txt_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/text_to_speech"
        android:textColor="#000000"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/et_input_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:background="@drawable/rectangle"
        android:ems="10"
        android:hint="@string/enter_some_text"
        android:inputType="textPersonName"
        android:padding="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_label" />

    <Button
        android:id="@+id/btn_speak_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/speak_now"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_input_text" />
</androidx.constraintlayout.widget.ConstraintLayout>
Enter fullscreen mode Exit fullscreen mode
  • Now add the following resources to remove errors in activity_main

strings.xml

    <string name="app_name">CodeWithRish</string>
    <string name="text_to_speech">Text To Speech</string>
    <string name="enter_some_text">Enter Some Text ......</string>
    <string name="speak_now">Speak Now</string>
Enter fullscreen mode Exit fullscreen mode
  • Create file rectangle.xml in drawable and paste below code
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    <stroke android:width="2dp" android:color="#03A9F4" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="5dp" />
    <solid android:color="#ffffffff" />
</shape>
Enter fullscreen mode Exit fullscreen mode
  • Open MainActivity.java and replace your code with this
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import java.util.Locale;

public class MainActivity extends AppCompatActivity implements TextToSpeech.OnInitListener {

    private TextToSpeech textToSpeech;
    private EditText etInputText;
    private Button btnSpeakText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();

        btnSpeakText.setOnClickListener(click -> {
            speakText();
        });
    }

    private void speakText() {
        String input = etInputText.getText().toString();
        textToSpeech.speak(input, TextToSpeech.QUEUE_FLUSH, null);
    }

    private void init() {
        textToSpeech = new TextToSpeech(this, this);
        etInputText = findViewById(R.id.et_input_text);
        btnSpeakText =  findViewById(R.id.btn_speak_text);
    }

    @Override
    public void onInit(int state) {
        if (state == TextToSpeech.SUCCESS) {
            int result = textToSpeech.setLanguage(Locale.UK);

            if (result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED) {
                Toast.makeText(this, "Language Not Supported", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(this, "Enter Text", Toast.LENGTH_SHORT).show();
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Now if you want the same color you can replace you colorPrimary and colorPrimaryVariant
color with #FFEB3B color code.

Top comments (0)