Android Custom Voice Recognition GUI Dialog

Question

Im trying to customize the "Dialog" During Speech recognition.

If I understand correctly I need to use SpeechRecognizer to customize the speech recognition GUI in the image above.

This How to get audio amplitude with speech recognizer?, is similar to my question, but he is asking about adding the amplitude indicator using onRmsChanged, since he already figured out how to implement a new GUI while recognition is happening, so his question although useful, is a bit further ahead of where Im at.

Are there any existing sample projects, tuts that explain how this sort of custom UI is implemented. I've looked at the ApiDemo VoiceRecognition sample, but I still dont see where to set/change the UI..

From the dev docs, I understand this need to be on the main UI thread. So my pseudo approach would be to create a SpeechDialogClass, a dialog class that extends Dialog and implements RecognitionListener. Something like this. I would imagine that somewhere in the methods I would set the context, the onRmsChanged handing etc.. but from there Im pretty much lost.

public class SpeechDialogClass extends Dialog implements RecognitionListener {

    public Activity c;
    public Dialog d;
    public ImageView mic, mic_amp;

    public SpeechDialogClass(Activity a) {
        super(a);
        // TODO Auto-generated constructor stub
        this.c = a;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.speech_dialog_kids);
        mic = (ImageView) findViewById(R.id.mic_icon);
        mic_amp = (ImageView) findViewById(R.id.speech_amplitude);

        // //So I would set some sort of listener to change the selector state
        // of mic_icon and the
        // /somewhere I would set the mic_amp to listen/ract to on onRmsChanged
        // public void onRmsChanged(float arg0)///
        // // and this is where Im lost///

    }

    public void onBeginningOfSpeech() {
        // TODO Auto-generated method stub
        setContentView(R.layout.speech_dialog_kids);
    }

    public void onBufferReceived(byte[] arg0) {
        // TODO Auto-generated method stub

    }

    public void onEndOfSpeech() {
        // TODO Auto-generated method stub

    }

    public void onError(int arg0) {
        // TODO Auto-generated method stub

    }

    public void onEvent(int arg0, Bundle arg1) {
        // TODO Auto-generated method stub

    }

    public void onPartialResults(Bundle arg0) {
        // TODO Auto-generated method stub

    }

    public void onReadyForSpeech(Bundle arg0) {
        // TODO Auto-generated method stub

    }

    public void onResults(Bundle arg0) {
        // TODO Auto-generated method stub

    }

    public void onRmsChanged(float arg0) {
        // TODO Auto-generated method stub
        // pseudo code//
        // mic_amp.doSomething(and a float);
    }

}

My speech_dialiog_kids.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="150dp"
    android:background="#3E80B4"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/txt_dia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="Speak Text"
        android:textColor="@android:color/white"
        android:textSize="15dp"
        android:textStyle="bold" >
    </TextView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#3E80B4"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/speech_amplitude"
            android:layout_width="78dp"
            android:layout_height="78dp"
            android:layout_marginTop="10dp"
            android:src="@drawable/amplitude_icon"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/mic_icon"
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_marginLeft="-73dp"
            android:layout_marginTop="16dp"
            android:src="@drawable/small_right_grey_white"
            android:visibility="visible" />
    </LinearLayout>

</LinearLayout>

Answer 1

I would imagine that somewhere in the methods I would set the context, the onRmsChanged handing etc.. but from there Im pretty much lost.

Something like this:

public void onRmsChanged(float rms) {
    if (rms < limit1)
        mic_amp.setImageResource(1);
    else if (rms < limit2)
        mic_amp.setImageResource(2);
    else if (rms < limit3)
        mic_amp.setImageResource(3);
}

So it will pulse on rms change. You change the image depending on rms level. You can change various ImageView method to change the actual image.

Another problem is that onRmsChanged is not always invoked depending on Android version, so it makes it harder to implement this feature. Then probably the easiest way would be to stay with the original dialog.