Do que se trata no artigo: Este artigo demonstra os passos básicos para desenvolver um aplicativo que utiliza a interação por voz, posterior reconhecimento do que foi dito e com isso realizar uma determinada acção (no nosso exemplo, faremos uma simples mudança na interface).

Em que situação o tema é útil: Será útil para os programadores que desejem ter uma experiência inicial com a API de reconhecimento de voz.

Desenvolvendo aplicações para Android: A utilização de smartphones tem crescido no mundo todo, tendo como um dos principais sistemas operativos o Android, o qual conta com diversas aplicações para atrair novos utilizadores. Pensando nisso, a Google disponibilizou o Android SDK, uma plataforma gratuita para o desenvolvimento de aplicações. Este artigo apresenta os passos necessários para o desenvolvimento de uma aplicação que utiliza uma busca por voz, e através dessa busca retorna resultados que serão analisados e uma nova acção será tomada de acordo com essa análise.

Introdução

O SDK é uma sigla de Software Development Kit (Kit de Desenvolvimento de Software), que é normalmente disponibilizado por empresas que desejam que os programadores externos tenham uma melhor integração com o software proposto. Neste artigo utilizaremos o ADK-SDK + Eclipse (IDE) que possui todas as ferramentas necessárias para o desenvolvimento de uma aplicação Android.

Abaixo seguem os passos para o download e instalação do IDE+SDK. Neste artigo vamos mostrar a criação de uma aplicação onde as pronúncias das palavras guitarra ou piano redirecionarão a um ecrã com a imagem dos respectivos instrumentos musicais. É um exemplo simples, porém com a criatividade pode ser estendido de muitas formas para outras aplicações.

Configurando o Android SDK

O primeiro passo é fazer o download no site oficial que pode ser consultado na seção de referências.

Após a descompactação do arquivo (que deve estar no formato ZIP), basta abrir o Eclipse localizado na pasta com o seu nome.

Criando o projeto

Com o Eclipse aberto, abra o menu File > New e em seguida selecione a opção Others. Escolha a pasta Android e selecione a opção Android Application Project, conforme mostra a Figura 1.

Nos próximos passos iremos ter que dar um nome ao nosso projeto e à nossa aplicação e escolher o seu logo. No ecrã de selecção do tipo de Activity, escolhemos o padrão BlankActivity que determina uma Activity vazia. Essa opção deve ser selecionada pois faremos tudo do “zero”. De seguida definimos o nome da nossa Activity e do seu Layout e então clicamos em Finish.

Entendendo a Interface do Eclipse (IDE)

O Eclipse é um ambiente de desenvolvimento que facilita o desenvolvimento de software pela inclusão de inúmeras ferramentas que, dentre outras coisas, economizam tempo ao programador.

Neste artigo vamos comentar apenas os itens que serão utilizados da Interface de desenvolvimento Android fornecida pelo Eclipse. Essa explicação será somente para que o leitor possa se localizar quando citarmos um determinado ponto da interface, o significado de cada um será explicado posteriormente.

No canto esquerdo é possível observar uma hierarquia de pastas, a raiz é obviamente a pasta do seu projeto e todos os arquivos utilizados no aplicativo devem estar dentro dela.

A pasta source contém o arquivo .java que vai conter todo a parte lógica necessária para o funcionamento do aplicativo.

A pasta res contém outra hierarquia de pastas, que, por sua vez, contém todos os arquivos necessários para a definição da interface gráfica do aplicativo. Desde arquivos XML até aos arquivos com as imagens que serão utilizadas.

XML no Layout

XML ou eXtensible Markup Language é uma linguagem de marcação utilizada pelo Android para definir a interface gráfica do aplicativo, permissões e outras configurações do sistema operacional.

Utilizando a IDE Eclipse podemos determinar a interface gráfica do aplicativo de duas formas, uma delas é definindo o elemento via XML ou via interface do Eclipse que se assemelha a “montar” visualmente o aplicativo. É importante enfatizar o fato de que cada componente da interface gráfica possui um ID, isto é, possui um identificador único. Esse aspecto é importante, pois durante a programação vamos aceder os elementos da interface gráfica através desse ID. Dessa forma vamos deixar claro para o leitor quando estaremos definindo esse identificador e onde estaremos utilizando-o.

Iniciando cores e nomes

O uso de cores é inevitável para a construção de interfaces, porém precisamos definir as cores antes de utilizá-las. Para isso vamos ao arquivo XML chamado string.xml, esse arquivo está dentro da pasta values que, por sua vez, está dentro de res.

Dentro dele escreva o seguinte código XML:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">recVoice</string>
  <string name="action_settings">Settings</string>
  <string name="hello_world">Hello world!</string>
  <color name="gray_back">#E8E8E8</color>
  <color name="blue_back">#4372AA</color>
  <color name="font_gray">#344152</color>
</resources>

A primeira linha é padrão. Seguindo abrimos a marcação <resources> onde vão estar a definições das cores e nomes das strings. É muito simples entender o significado de cada linha, no que se referem as string temos o nome que vamos dar a uma e depois algo que podemos chamar de valor da string, por exemplo, a string app_name possui valor recVoice. O mesmo segue para as cores, primeiro atribuímos um nome a ela e depois um valor em hexadecimal, pois é dessa forma que um dispositivo electrónico “enxerga” as cores. As cores ficam à escolha do leitor, o que temos acima são somente exemplos que serão utilizados na aplicação .

Iniciando o desenvolvimento da interface

Nessa aplicação teremos quatro telas, logo temos quatro arquivos XML para descrever cada uma. Começando com a tela principal, este arquivo já estará criado na pasta Layout que está dentro de res. É possível ver essas pastas no canto esquerdo da interface. O nome desse arquivo XML é activity_main, porém vamos renomear para activity_voice a fim de manter um padrão.

Com o objetivo de deixar o mais claro possível todos os elementos que farão parte dessa tela serão primeiramente descritos, depois o código em XML será mostrado e posteriormente explicações sobre casos mais particulares.

De início temos de definir a estrutura de layout que vamos utilizar, escolhemos a estrutura Linear Layout, ela organiza as componentes dentro da tela de forma que os mesmos sejam distribuídos de forma horizontal ou vertical.

Botões

Anteriormente no arquivo XML “strings” foram definidas algu- mas cores, para escolher a cor de plano de fundo dessa tela vamos utilizar uma delas, mais especificamente a “gray_back”.

Agora três botões serão adicionados a tela, dois deles serão para redireccionarmos a aplicação para uma tela que contém a imagem de um piano ou de uma guitarra, e o outro será o botão para falarmos e posteriormente realizar a busca.

Analisando cada um dos botões

O botão que redireciona para a guitarra contém o id “bguitarra”, lembre-se que o id é extremamente importante, pois é através dele que conseguimos acessar um elemento da interface.

Dentro desse botão colocaremos o texto “Guitarra”. De forma semelhante acontecerá com o botão que referencia a uma tela que contém um piano como plano de fundo, esse botão terá o id “bpiano” e colocaremos um texto “Piano”.

O terceiro botão servirá para que o usuário fale a aplicação e a busca seja realizada. Esse botão terá o id “speakButton” e não teremos nenhum texto escrito nele. Nesse botão há algo novo em relação aos outros, foi definido uma imagem como fundo nele. Para fazer isso, antes de tudo temos de obter uma imagem, porém é importante saber onde salvar essa imagem. Dentro de res existem várias pastas cujo primeiro nome é “drawable”, uma cópia do arquivo que contém a ima- gem deve ser salvo em cada uma dessas pastas. O nome do arquivo imagem que será utilizado nesse botão é “voice_icon”.

List View

Haverá também uma list view que vai ter todos os resultados da busca do que foi dito, ela será muito importante para identificarmos o que foi dito e posteriormente realizarmos uma acção. O ID da list view será list.

Na próxima seção teremos o código em XML da interface principal do aplicativo, tudo o que foi descrito acima está traduzido nas linhas de código a seguir, porém, para tentarmos reduzir as dúvidas, comentaremos os pontos mais importantes.

XML da interface principal

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@color/gray_back">
  <Button android:id="@+id/bguitarra"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Guitarra" />
  <Button android:id="@+id/bpiano"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Piano" />
  <TextView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_margin="20dp"
      android:text="Clique no botão e fale"
      android:textColor="@color/font_gray"
      android:textSize="18dp" />
  <Button android:id="@+id/speakButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:background="@drawable/voice_icon"/>
  <ListView android:id="@+id/list"
      android:layout_width="fill_parent"
      android:layout_height="0dip"
      android:layout_weight="1"/>
</LinearLayout>

Primeiramente é possível observar que todas as componentes dessa interface estão associadas a um layout, nesse caso o Linear Layout. É necessário comentar que em uma interface podem ser usados vários tipos de layout, nessa situação foi utilizado o Linear pelo fato de ser mais simples e intuitivo, mas fica a critério do leitor utilizá-lo ou não. Como opção do Linear podemos definir a sua orientação (horizontal ou vertical), é possível visualizar a escolha na seguinte linha de código XML:

android:orientation="vertical"

As definições de ID são extremamente fáceis de se notar e extremamente importantes também, os IDs definidos no código XML são meramente figurativos, fica à escolha do leitor utilizá-los ou não, porém deve-se atentar ao fato de que quando quiser aceder esse elemento de imagem é necessário recordar o ID que foi dado a ele.

Layout tela de guitarra e piano

Por simplicidade nas telas que terão a imagem da guitarra e do piano definiremos também como Linear Layout. As duas interfaces são incrivelmente mais simples que a principal, pois terão somente um botão e uma imagem como plano de fundo.

Semelhante à escolha de uma imagem para o botão de falar na tela principal vamos manter uma para o plano de fundo de cada interface. O processo é o mesmo, escolha duas imagens que remetem a uma guitarra e a um piano e mantenha uma cópia de cada em todas as pastas cujo primeiro nome é drawable, a escolha da imagem fica a critério do leitor.

Nas interfaces teremos um botão que vai redirecionar a aplicação para a tela principal, esses botões possuem o ID: btback para a tela da guitarra e btbackp para a tela do piano.

XML da tela guitarra:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/img_guitarra" >
  <Button android:id="@+id/btback"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_alignParentTop="true"
      android:layout_marginTop="32dp"
      android:text="Back" />
</RelativeLayout>

XML da tela piano:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/img_piano">
  <Button android:id="@+id/btbackp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_alignParentTop="true"
      android:layout_marginTop="14dp"
      android:text="Back" />
</RelativeLayout>

Nota-se que em ambos os códigos XML existem uma linha em que selecionamos o fundo da tela, no caso do piano será:

android:background="@drawable/img_piano"

Nesse ponto é importante lembrar o nome que foi dado à imagem e garantir que uma cópia dela foi armazenada nas pastas drawable.