Android Text to Speech Example

In this tutorial we are going to implement text to speech in the android application. One of the special feature of android is speech accessibility to speak different language.

User needs to enter a text and press the button to hear it.

File : res/layout/activity_text_to_speech.xml

<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"
    tools:context=".Text_to_speechActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Enter the text to speech"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="26dp"
        android:ems="12" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@+id/editText1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="67dp"
        android:src="@drawable/speak" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageButton1"
        android:layout_centerHorizontal="true"
        android:text="Speak"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textStyle="bold" />


</RelativeLayout>


File : Text_to_speechActivity.java

package com.mindmedia.text_to_speech;

import java.util.Locale;
import android.app.Activity;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.util.Log;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;

public class Text_to_speechActivity extends Activity implements
TextToSpeech.OnInitListener {
/** Called when the activity is first created. */

private TextToSpeech speech;
private ImageButton speak;
private EditText comment;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_to_speech);

speech = new TextToSpeech(this, this);
speak = (ImageButton) findViewById(R.id.imageButton1);
comment = (EditText) findViewById(R.id.editText1);

// button on click event
speak.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
speak();
}
});
}

@Override
public void onDestroy() {
// Don’t forget to shutdown tts!
if (speech != null) {
speech.stop();
speech.shutdown();
}
super.onDestroy();
}

@Override
public void onInit(int status)
{
if (status == TextToSpeech.SUCCESS)
{
int result = speech.setLanguage(Locale.US);
if (result == TextToSpeech.LANG_MISSING_DATA
|| result == TextToSpeech.LANG_NOT_SUPPORTED) {
Log.e("TTS", "This Language is not supported");
}
else
{
speak.setEnabled(true);
speak();
}
}
else
{
Log.e("TTS", "Initilization Failed!");
}
}

private void speak() {
String text = comment.getText().toString();
speech.speak(text, TextToSpeech.QUEUE_FLUSH, null);
}
}


Note : import android.speech.tts.TextToSpeech is used for speak capability 

Output :

Read More

Image GridView

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.

In this tutorial, we show you how to create an image Gridview.

Copy some images into your project's drawable folder.

File : res/layout/activity_gridview.xml

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/gridview"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:columnWidth="120dip"

    android:gravity="center"

    android:horizontalSpacing="2dp"

    android:numColumns="3"

    android:padding="10dp"

    android:stretchMode="columnWidth"

    android:verticalSpacing="2dp" >

</GridView>

File : Gridview_Activity.java

package com.mindmedia.gridview;

import android.os.Bundle;

import android.app.Activity;

import android.content.Context;

import android.view.Menu;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

public class Gridview_Activity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_gridview);

GridView gridView = (GridView) findViewById(R.id.gridview);

// Instance of ImageAdapter Class

gridView.setAdapter(new ImageAdapter(this));

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.activity_gridview, menu);

return true;

}

public class ImageAdapter extends BaseAdapter {

private Context mContext;

// Keep all Images in array

public Integer[] mThumbIds = { R.drawable.pic1, R.drawable.pic2,

R.drawable.pic3, R.drawable.pic4, R.drawable.pic6,

R.drawable.pic7, R.drawable.pic8, R.drawable.pic9,

R.drawable.pic10, R.drawable.pic11, R.drawable.pic12,

R.drawable.pic13 };

// Constructor

public ImageAdapter(Context c) {

mContext = c;

}

@Override

public int getCount() {

return mThumbIds.length;

}

@Override

public Object getItem(int position) {

return mThumbIds[position];

}

@Override

public long getItemId(int position) {

return 0;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView = new ImageView(mContext);

imageView.setImageResource(mThumbIds[position]);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(new GridView.LayoutParams(160, 160));

return imageView;

}

}

}

Output : 

Read More

Spinner View ( Drop down list )

Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.

In Android, you can use “android.widget.Spinner” class to render a dropdown box selection list.

In this tutorial we show you how to do the following tasks :

1. Render a Spinner in XML, and load the selection items via XML file also.
2. Render another Spinner in XML, and load the selection items via code dynamically.
3. Attach a listener on Spinner, fire when user select a value in Spinner.
4. Render and attach a listener on a normal button, fire when user click on it, and it will display selected value of Spinner.

File : res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Spinner Drop down list</string>

    <string name="hello_world">Hello world!</string>

    <string name="menu_settings">Settings</string>

    

    <string name="versions_prompt">Choose a Version</string>

    <string-array name="versions_arrays">

        <item>Cupcake</item>

        <item>Donut</item>

        <item>Eclairs</item>

        <item>Froyo</item>

        <item>Gingerbread</item>

        <item>Honeybee</item>

        <item>Icecream sandwich</item>

        <item>Jellybean</item>

        <item>Kitkat</item>

    </string-array>

</resources>

File : res/layout/activity_spinner.xml

<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:padding="20dp"

    tools:context=".SpinnerActivity" >

    <Spinner

        android:id="@+id/spinner1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:entries="@array/versions_arrays"

        android:prompt="@string/versions_prompt" />

    <Spinner

        android:id="@+id/spinner2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/spinner1"

        android:layout_below="@+id/spinner1"

        android:layout_marginTop="20dp" />

    <Button

        android:id="@+id/btnSubmit"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/spinner2"

        android:layout_below="@+id/spinner2"

        android:layout_marginTop="20dp"

        android:text="Submit" />

</RelativeLayout>

File : SpinnerActivity.java

package com.mindmedia.spinner;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemSelectedListener;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.Spinner;

import android.widget.Toast;

public class SpinnerActivity extends Activity {

private Spinner spinner1, spinner2;

private Button btnSubmit;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_spinner);

addItemsOnSpinner2();

addListenerOnButton();

addListenerOnSpinnerItemSelection();

}

// add items into spinner dynamically

public void addItemsOnSpinner2() {

spinner2 = (Spinner) findViewById(R.id.spinner2);

List<String> list = new ArrayList<String>();

list.add("Android");

list.add("Iphone");

list.add("Blackberry");

list.add("Windows");

ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,

android.R.layout.simple_spinner_item, list);

dataAdapter

.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

spinner2.setAdapter(dataAdapter);

}

public void addListenerOnSpinnerItemSelection() {

spinner1 = (Spinner) findViewById(R.id.spinner1);

spinner1.setOnItemSelectedListener(new CustomOnItemSelectedListener());

}

// get the selected dropdown list value

public void addListenerOnButton() {

spinner1 = (Spinner) findViewById(R.id.spinner1);

spinner2 = (Spinner) findViewById(R.id.spinner2);

btnSubmit = (Button) findViewById(R.id.btnSubmit);

btnSubmit.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(

SpinnerActivity.this,

"Spinner 1 : "

+ String.valueOf(spinner1.getSelectedItem())

+ "\nSpinner 2 : "

+ String.valueOf(spinner2.getSelectedItem()),

Toast.LENGTH_SHORT).show();

}

});

}

public class CustomOnItemSelectedListener implements OnItemSelectedListener {

public void onItemSelected(AdapterView<?> parent, View view, int pos,

long id) {

Toast.makeText(parent.getContext(),

"Version : " + parent.getItemAtPosition(pos).toString(),

Toast.LENGTH_SHORT).show();

}

@Override

public void onNothingSelected(AdapterView<?> arg0) {

// TODO Auto-generated method stub

}

}

}

Output :

Read More

Simple List View

ListView is a view group that displays a list of scrollable items.the list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query and converts each items result into a view that's placed into the list.

File : MainActivity.java

package com.example.simplelistview;

import android.app.ListActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.Toast;

public class MainActivity extends ListActivity {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String>(this,

                android.R.layout.simple_list_item_1, PENS));

        getListView().setTextFilterEnabled(true);

        

    }

    

    static final String[] PENS = new String[]{

        "MONT Blanc",

        "Gucci",

        "Parker",

        "Sailor",

        "Porsche Design",

        "Rotring",

        "Sheaffer",

        "Waterman"

    };

    

    protected void onListItemClick(ListView l, View v, int position, long id) {

        super.onListItemClick(l, v, position, id);

        Object o = this.getListAdapter().getItem(position);

        String pen = o.toString();

        Toast.makeText(this, "You have chosen the pen: " + " " + pen, Toast.LENGTH_LONG).show();

    }

}

output:

Read More

Date Picker

In Android, you can use “android.widget.DatePicker” class to render a date picker component to select day, month and year in a pre-defined user interface.

In this tutorial, we show you how to render date picker component in current page via android.widget.DatePicker, and also in dialog box via android.app.DatePickerDialog. In addition, we also show you how to set a date in date picker component.

File : res/layout/activity_date_picker.xml

<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:padding="20dp"

    tools:context=".Date_PickerActivity" >

    <TextView

        android:id="@+id/lblDate"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:text="Current Date (MM-DD-YYYY): "

        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView

        android:id="@+id/tvDate"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@+id/lblDate"

        android:layout_marginTop="24dp"

        android:text=""

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:textStyle="bold" />

    <DatePicker

        android:id="@+id/dpResult"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@+id/tvDate"

        android:layout_marginTop="36dp" />

    <Button

        android:id="@+id/btnChangeDate"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@+id/dpResult"

        android:layout_marginTop="44dp"

        android:text="Change Date" />

</RelativeLayout>

File : Date_PickerActivity.java

package com.mindmedia.datepicker;

import java.util.Calendar;

import android.app.Activity;

import android.app.DatePickerDialog;

import android.app.Dialog;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.DatePicker;

import android.widget.TextView;

import android.widget.Toast;

public class Date_PickerActivity extends Activity {

private TextView tvDisplayDate;

private DatePicker dpResult;

private Button btnChangeDate;

        private int year;

private int month;

private int day;

static final int DATE_DIALOG_ID = 999;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_date_picker);

setCurrentDateOnView();

addListenerOnButton();

}

// display current date

public void setCurrentDateOnView() {

         tvDisplayDate = (TextView) findViewById(R.id.tvDate);

dpResult = (DatePicker) findViewById(R.id.dpResult);

          final Calendar c = Calendar.getInstance();

year = c.get(Calendar.YEAR);

month = c.get(Calendar.MONTH);

day = c.get(Calendar.DAY_OF_MONTH);

// set current date into textview

tvDisplayDate.setText(new StringBuilder()

// Month is 0 based, just add 1

.append(month + 1).append("-").append(day).append("-")

.append(year).append(" "));

// set current date into datepicker

dpResult.init(year, month, day, null);

}

public void addListenerOnButton() {

btnChangeDate = (Button) findViewById(R.id.btnChangeDate);

btnChangeDate.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

showDialog(DATE_DIALOG_ID);

}

});

}

@Override

protected Dialog onCreateDialog(int id) {

switch (id) {

case DATE_DIALOG_ID:

// set date picker as current date

return new DatePickerDialog(this, datePickerListener, year, month,day);

}

return null;

}

private DatePickerDialog.OnDateSetListener datePickerListener = new DatePickerDialog.OnDateSetListener() {

// when dialog box is closed, below method will be called.

public void onDateSet(DatePicker view, int selectedYear,

int selectedMonth, int selectedDay) {

year = selectedYear;

month = selectedMonth;

day = selectedDay;

// set selected date into textview

tvDisplayDate.setText(new StringBuilder().append(month + 1)

.append("-").append(day).append("-").append(year)

.append(" "));

Toast.makeText(Date_PickerActivity.this,"Date Picked :"+ new StringBuilder().append(month + 1).append("-").append(day).append("-").append(year).append(" "), Toast.LENGTH_LONG).show();

// set selected date into datepicker also

dpResult.init(year, month, day, null);

}

};

}

Output :

Thank you...

Read More