Skip to content

Simple Translator

AgentChicken edited this page Jul 24, 2016 · 1 revision

Overview

We'll be creating a simple translator app, that can translate both typed and spoken input, using the Yandex translation API and Google's speech-to-text API. The app will be able to speak the translated text back to the user, so she will know how to pronounce translated text.

Building the User Interface

First, we'll build two labeled text fields: one for input text and another for translated text. These should be positioned at the top of the screen and should fill as much width as possible. Note that, in order to be usable, the user must be able to enter more than one line of text! As such, the text fields should expand as more text is entered.

After building the two text fields, we should create a spinner that allows us to select the language we want to translate the input to. We don't have to worry about the language of the input text, since Yandex will automatically detect it. The spinner should include the following options: en, es, de, it, and fr. Below the spinner, we should create two buttons: a "Translate!" button and a "Voice Translate!" button. The buttons' uses are fairly self-explanatory. Finally, we'll create a "Mute" checkbox, in case the user doesn't want translated text played back to her.

#Implementing Functionality

Non-visible Components

  • SpeechRecognizer
  • YandexTranslate
  • TextToSpeech
  • Notifier

Programming

Spinner

First, we'll implement the spinner, to let the user choose which language to translate text or speech to. We'll initialize a variable translateTo to 'en', so the app will translate to English by default. Using the spinner, the user can select other languages.

Voice Translate Button

Next, we'll implement the voice translate button. This button will call Google's own text-to-speech interface, and will enter the resulting text into the top text box. It will also call the Yandex API to translate the text into whatever language is selected in the spinner. We won't display the translated text yet - that's for another section.

Translate Button

We'll now implement the text translate button. This works similarly to the voice translate button, except Yandex will translate the text that the user enters into the top text box. In the case of voice translation, Google will handle a user not speaking; however, if a user doesn't enter text and presses the translate button, we'll have to notify the user of the error ourselves. As such, we'll include an if statement that will use a toast notification to tell the user to enter text if the top text box is empty upon the button press.

Displaying the Translated Text

Finally, we'll call the Yandex API to get the translated text (regardless of how it was translated) and place it in the bottom text box. We'll also use the Text-To-Speech component to read the text allowed to the user. Since the user might not want this, we've included a Mute checkbox. We'll use an if statement that will only read the translated text if the mute checkbox is not checked.

We're Done!

Enjoy your translator app!