Android Text to Speech (TTS)

Topics covered

Text to Speech (TTS)

Pitch

Speed rate

Talking app

This post describes how to use text to speech (TTS) in Android. It isn't so common to find a post explaining how to use it and it is a part of Android not much covered. In my opinion, TTS is very interesting because it can add some nice features to an app. Text to Speech is a feature of Android platform that can be used to "read" the words and make the app talking, or more in detail to synthesize text.
In this post, i want to cover how to implement TTS in Android and how we can control some interesting aspects of speech engine. We want to code an app that has a EditText widget so that we write the words that have to be read and some controls to modify the speech engine.



Text to speech Engine

The first thing we have to do to use the TTS in our app is initialise the engine. The class that controls the engine is called TextToSpeech,
engine = new TextToSpeech(this, this);

where the first parameter is the Context and the other one is the listener. The listener is used to inform our app that the engine is ready to be used. In order to be notified we have to implement TextToSpeech.OnInitListener, so we have:

public class MainActivity extends Activity implements TextToSpeech.OnInitListener {
    ....
    @Override
    public void onInit(int status) {
        Log.d(&Speech&, &OnInit - Status [&+status+&]&);

        if (status == TextToSpeech.SUCCESS) {
            Log.d(&Speech&, &Success!&);
            engine.setLanguage(Locale.UK);
        }
    }
}
We use the onInit as callback method, and when the engine is ready, we set the default language that the engine used to read our sentence.

Read the words

Now our engine is ready to be used, we need simply pass the string we want to read. To this purpose, we use an EditText so that the user can edit his string and when he clicks on the microphone the app start reading. Without detailing too much the code because is trivial we focus our attention when user clicks on the microphone button:

speechButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                speech();
            }
        });
where
   
    private void speech() {
        engine.speak(editText.getText().toString(), TextToSpeech.QUEUE_FLUSH, null, null);
    }

we simply have to call the speak method to make our app reading the text!

Control Text to Speech Engine parameters

We can have more control on how the engine read the sentence. We can modify for example the pitch and the speech rate.
In the app, for example we used two seek bars to control the pitch and rate. If we want to set the voice pitch we can use setPitch passing a float value.
On the other hand, if we want to change the speech rate we can use setSpeechRate.
In our app, we read this value from two seek bars and the speech method become:

   private void speech() {
        engine.setPitch((float) pitch);
        engine.setSpeechRate((float) speed);
        engine.speak(editText.getText().toString(), TextToSpeech.QUEUE_FLUSH, null, null);
    }


Source code available @github

A Guide to Android RecyclerView and CardView

Topics covered

RecyclerView

CardView

Android adapter

The new support library in Android L (Lollipop) introduced two new UI widgets: RecyclerView and CardView. The RecyclerView is a more advanced and more flexible version of the ListView. This new component is a big step because the ListView is one of the most used UI widgets. The CardView widget, on the other hand, is a new component that does not "upgrade" an existing component. In this tutorial, I'll explain how to use these two widgets and show how we can mix them. Let's start by diving into the RecyclerView.

RecyclerView: Introduction

As I mentioned, RecyclerView is more flexible that ListView even if it introduces some complexities. We all know how to use ListView in our app and we know if we want to increase the ListView performances we can use a pattern called ViewHolder. This pattern consists of a simple class that holds the references to the UI components for each row in the ListView. This pattern avoids looking up the UI components all the time the system shows a row in the list. Even if this pattern introduces some benefits, we can implement the ListView without using it at all. RecyclerView forces us to use the ViewHolder pattern. To show how we can use the RecyclerView, we can suppose we want to create a simple app that shows a list of contact cards. The first thing we should do is create the main layout. RecyclerView is very similar to the ListView and we can use them in the same way:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent" 
                android:layout_height="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin" 
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".MyActivity">
   <android.support.v7.widget.RecyclerView
             android:id="@+id/cardList"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/> 
</RelativeLayout>
As you'll notice from the layout shown above, the RecyclerView is available in the Android support library, so we have to modify build.gradle to include this dependency:
dependencies {
...
compile 'com.android.support:recyclerview-v7:21.0.0'

}

Develop android weather app with Material Design

Topics covered

Material design

Weather app

Android toolbar

Android material colors

Android material guidelines

This post describes how to create a weather app using material design guidelines. Material Design is  a set of rules for visual design, UI interaction, motion and so on. These rules help developer when they design and create an Android app.
This post wants to describe how we create a weather app using  Weatherlib as weather layer and Material design rules. We want to develop this app not only for Android 5 Lollipop that supports Material design natively but we want to support previous version of Android like 4.x Kitkat. For that reason we will introduce appCompat v7 library that helps us to implement the Material Design even in the previous Android versions.
We want to code an app that has a extended Toolbar that holds some information about the location and current weather and some basic weather information about temperature, weather icon, humidity, wind and pressure. At the end we will get something like the pic shown below:




Android project set up

The first thing we have to do is configuring our project so that we can use Weatherlib and especially appCompat v7. We can open build.graddle and add these lines:
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.+'
    compile 'com.mcxiaoke.volley:library:1.0.6@aar'
    compile 'com.survivingwithandroid:weatherlib:1.5.3'
    compile 'com.survivingwithandroid:weatherlib_volleyclient:1.5.3'
}

Now we have our project correctly set up, we can start defining our app layout.

Control Sphero using Temperature Sensor in Android

Topics covered

Sphero 2

Sphero Android SDK

Android temperature sensor

Android Service

Android Broadcastreceiver

Android AlarmManager

One of the most interesting topic around Android it is how we can connect our smart phones to other devices or smart devices to get information from them or to control them.
In this post I want to introduce a new way to use our Android phone and explain how we can use it to control Sphero ball.

Introduction

In this Android project, I want to describe how we can integrate the temperature sensor inside the smart phone to control the Sphero ball color. In other words, I want to change the color ball according to the temperature measured by the smart phone even if the smart phones is in the stand by mode or the Activity is not in the foreground.
This is an interesting project because it can be used to describe some important concept:
and finally, but not less important, how to connect and use Sphero ball with its SDK. What we want to design an app like shown below:



Android promoted Actions: Floating action button (FAB)

Topics covered

Promoted Actions

Floating Action Button (FAB)

Custom component

Material design

Recently new design pattern were introduced in Android. One of the most known pattern is the Promoted Actions. They are actions that  are directly visible in the UI instead of using action bar button; for this reason these actions are called promoted, they can be easily accessed and define the main action in the current UI. For example, if we are using an email app and we are listing the inbox folder, one promoted action can be a new mail. The visual pattern is called Float Action Button (or FAB) because the promoted action can be represented using a floating circular button on the UI.
This type of design patterns are available in Android L but we can create a floating button also in previous Android version. Let us suppose we have a list of elements in our UI, the promoted action can be ‘Add new item’, so we can have something like the pic shown below:

android_floating_action_button_1

There are several way we can use to crate a floating action button.

Floating action button using ImageButton

The first way to create a FAB is using the ImageButton, we simply add the ImageButton to our UI layout and exploit some new features provided by Android L.
<ImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:src="@drawable/plus"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:tint="@android:color/white"
android:id="@+id/fab"
android:elevation="1dp"
android:background="@drawable/ripple"
android:stateListAnimator="@anim/fab_anim"
/>

If we look above, we can notice it is a normal ImageButton that we place usually at lower right corner. There are some aspects we should consider:
  • Background
  • Shadow
  • Animation