1

Utilizando Recursos Multimídia em Android

Imagem:

Descrição da Imagem: Montar interfaces gráficas utilizando XML, manipular

eventos em Java, inserir imagens de fundo e trabalhar com arquivos de áudio
em um aplicativo mobile é tarefa simples, basta entender alguns conceitos, é
 2

isso que iremos aprender neste capítulo, desenvolveremos este aplicativo que
está a imagem na abertura deste capítulo.

Linha de Apoio ou Lead: Trabalhar com interfaces gráficas em XML,

implementar códigos para o evento de click dos botões em Java, trabalhar com
o arquivo de strings, inserir imagens no aplicativo como plano de fundo de uma
Activity e trabalhar com reprodução de áudio. Esteja atento, estaremos neste
capítulo desenvolvendo nosso primeiro aplicativo.

Neste capítulo aprenderemos os conceitos fundamentais da disciplina,

você que está lendo esta apostila, desenvolva junto este exemplo em seu
computador, assim, os conceitos ficarão mais claros, ao terminar este exemplo
saberemos o que é um arquivo XML e como desenvolver (programar) uma
Activity (tela) no XML, o que é um arquivo de strings e sua importância, aonde
colocar uma imagem de fundo dentro do projeto, em que diretório e como
referenciar no código, em que local dentro do projeto inserir um som e como
fazer reproduzi-lo via código no Android Studio. Também iremos manipular os
eventos de click nos botões na linguagem Java, também aprenderemos a
testar o aplicativo no smartphone e no emulador do Android Studio. Esses são
conteúdos básicos, fundamentais, porém, essenciais para o entendimento dos
próximos conteúdos, esteja atento, caso surjam dúvidas, perguntem.

3.1 Iniciando um Novo Projeto no Android Studio

Para iniciar o aplicativo, criaremos um projeto novo no Android Studio,

para isso vá na opção File, depois em New e depois em New Project. Abrirá
uma janela parecida com a da figura 3.1, onde é preciso definir o nome do
aplicativo, o domínio (que identifica o aplicativo na Play Store, geralmente se
for um aplicativo corporativo é o mesmo endereço do site da empresa ao
 3

contrário) e a localização onde o projeto será salvo. Neste projeto foi colocado
o nome de “App Reproduz Som” para o nome do aplicativo, poderemos deixar
espaço sem problemas no nome do aplicativo, o domínio para “br.com.uniftec”
e o local, a pasta padrão do Android Studio. Caso queira alterar esses dados,
fique à vontade.

Figura 3.1: Janela de configuração do nome, domínio e localização do projeto.

Ao clicar em Next aparecerá uma janela conforme apresentado na figura

3.2, onde selecionamos a API e a versão do sistema operacional Android
mínima que o aplicativo deverá suportar, deixe selecionado a API 14 e a versão
4.0 como versão mínima do Android, não há necessidade do aplicativo suportar
versões abaixo da 4.0, pois a quase totalidade dos usuários estão desta versão
em diante.
 4

Figura 3.2: Seleção da API e versão do sistema operacional Android mínimo que o
aplicativo deverá suportar.

Ao clicar em Next, a próxima janela conforme pode ser visto na figura

3.3 é para selecionar o tipo de Activity, após escolhermos o tipo de Activity o
Android Studio irá criar um arquivo XML para que possamos montar a interface
gráfica e um arquivo Java para manipular os eventos dessa Activity, selecione
a opção “Empty Activity”, para abrir uma Activity em branco para que possamos
desenvolver a interface gráfica conforme as nossas necessidades.
 5

Figura 3.3: Escolha do modelo de Activity a ser inserida no aplicativo.

Ao clicar em Next, será mostrada uma janela para a configuração da

Activity, conforme pode ser visto na figura 3.4. Para o nome da classe Java que
irá manipular os eventos de click foi inserido o nome de “ReproduzSom”,
lembrando, para nomes de classes, a primeira letra de cada palavra deve ser
sempre maiúscula e as demais minúsculas, nunca deixe espaço entre uma
palavra e outra. Para o nome do arquivo XML correspondente ao código para
montar a interface gráfica do aplicativo foi estabelecido o nome
“activity_reproduz_som”. Fique à vontade para inserir outros nomes, caso
queira.
 6

Figura 3.4: Escolha do nome da classe Java e do arquivo XML para a Activity.

Ao clicar na opção Finish, a estrutura do projeto no Android Studio será

criada.

3.2 Desenvolvendo a Interface Gráfica do Aplicativo

O primeiro passo que iremos desenvolver no aplicativo é manipular o

arquivo de strings. O arquivo de strings nada mais é do que um arquivo onde
ficam todos os textos do aplicativo, todos os textos que irão aparecer para o
usuário na tela. Para localizar este arquivo dentro do projeto, vá no diretório
res, após em values e por fim, encontrará o arquivo chamado “strings.xml”,
conforme pode ser visto na figura 3.5.
 7

Figura 3.5: Localização do arquivo de strings dentro do projeto.

O arquivo de strings possui a seguinte estrutura, para cada texto

presente no aplicativo, é estabelecido um nome para este texto. Neste
aplicativo a tag app_name já deve estar presente, talvez o texto seja outro,
dependendo o nome que você colocou na primeira janela quando iniciou o
projeto do aplicativo, caso queira alterar o nome do aplicativo, basta alterar
esse texto presente em app_name. Iremos criar uma string para armazenar o
texto “Play” e o texto “Stop” e iremos dar os nomes das strings de “play” e
“stop”, respectivamente, conforme pode ser visto na figura 3.6. Será com o
nome das strings que faremos referência ao texto em nosso código.

Figura 3.6: Código completo do arquivo de strings.

Para inserir uma imagem no aplicativo, o primeiro passo é inserir a

imagem dentro do projeto no Android Studio. Todas as imagens presentes no
 8

aplicativo devem ficar nos diretórios drawable. Copie o arquivo que você deseja
inserir como imagem de fundo no aplicativo e vá com o botão direito e clique
em “Paste” (colar) na pasta drawable, abrirá uma janela conforme mostrado na
figura 3.7. Cole a imagem nas duas pastas, para manter a compatibilidade com
todos os tamanhos e versões de dispositivos Android.

Figura 3.7: Pastas drawable para inserir uma imagem no projeto.

Para inserir um arquivo de som dentro do projeto do Android Studio, crie

um diretório chamado raw, clicando com o botão direito em cima do diretório
res do projeto, clique em New, por último em Directory, escreva o nome do
diretório raw, tudo minúsculo e clique em OK. Após cole o arquivo de áudio que
você gostaria que o aplicativo reproduzisse dentro da pasta raw.

O próximo passo é implementar a interface gráfica do aplicativo. Para

isso, precisamos encontrar o arquivo XML correspondente a interface gráfica
da Activity, que deve estar dentro da pasta res, após dentro da pasta layout e
por fim, encontrará o arquivo XML, que no nosso exemplo está com o nome de
 9

“activity_reproduz_som” conforme pode ser visto na figura 3.8, esse nome pode
variar conforme o nome que você tenha dado quando criou o projeto.

Figura 3.8: Localização do arquivo XML da interface gráfica da Activity.

Agora, iremos programar a interface gráfica da Activity. Tudo inicia

inserindo um LinearLayout, nele definimos as configurações básicas da Activity.
Conforme pode ser visto na figura 3.9, começamos definindo que na largura e
na altura a nossa Activity (tela) ocupará todo o espaço da tela do celular
(layout_width e layout_ height com match_parent). Em XML para Programação
Para Dispositivos Móveis não é uma boa prática de programação definir um
tamanho para cada componente, sempre que possível utilizamos match_parent
para indicar todo o espaço na largura ou na altura e utilizamos o termo
wrap_content para indicar somente o espaço necessário, como existem
diversos tamanhos de telas definir um tamanho fixo para um componente na
largura ou na altura pode ser que este componente fique muito grande em um
dispositivo e em outro pode ser que fique muito pequeno dependendo do
tamanho da tela do smartphone. No LinearLayout utilizamos também a
propriedade layout_weight que determina o peso que o componente exerce
sobre os demais componentes, para ficar mais fácil de entender, poderíamos
dizer que esta propriedade está determinando que vão existir duas divisões na
tela, uma para cada botão que iremos inserir na sequência. Utilize margens no
 10

canto inferior, esquerda, direita e superior (paddingBottom, paddingLeft,

paddingRight e paddingTop, respectivamente), para que as interfaces gráficas
fiquem mais interessantes visualmente, os componentes da interface gráfica
não fiquem encostado nos cantos da tela, no código foi definido uma margem
de 16dp. Para colocar uma imagem no fundo do aplicativo utilize a propriedade
background, indique o caminho onde a imagem está dentro do projeto e o
nome do arquivo, sem a extensão (@drawable/fundo). Por último, é preciso
definir a orientação em que iremos desenvolver nossa interface gráfica,
coloque a orientação para vertical (orientation=“vertical”).

Dentro do LinearLayout, insira um botão (Button), o botão terá um nome,

propriedade id chamado btnPlay, ocupará todo o espaço na largura, porém,
somente o espaço necessário na altura (layout_width com match_parent e
layout_height com wrap_content), ocupará o espaço de uma divisão das duas
divisões da interface gráfica. A propriedade text indica o texto que deverá
aparecer no botão, o texto está no arquivo de strings com o nome de play
(@string/play). Para que todas as letras não fiquem maiúsculas, mas somente
a primeira letra, utilize a propriedade textAllCaps como falso, coloque a cor do
texto para preto (propriedade textColor). No exemplo utilizamos 40sp para o
tamanho do texto (textSize). E por último, utilizamos o botão com fundo
transparente para que possa aparecer a imagem de fundo (background).

Após, iremos inserir outro botão (Button) onde utilizaremos as mesmas

propriedades. Para inserir o nome btnStop para o botão utilizamos a
propriedade id, largura para todo o espaço (layout_width em match_parent),
altura somente o espaço necessário (layout_height em wrap_content), ocupará
um espaço dos dois da interface gráfica (layout_weight), o texto (text) está no
arquivo de strings com o nome de stop (@string/stop), para que apenas a
primeira letra fique maiúscula e não todas utilizamos a propriedade textAllCaps
para falso, a cor do texto (textColor) preta, tamanho do texto (textSize) para
40sp e a cor de fundo do botão (background) para transparente, para aparecer
a imagem de fundo.
 11

Figura 3.9: Código completo do arquivo XML da interface gráfica da Activity.

A interface gráfica do aplicativo está pronta, porém, caso testássemos

nosso aplicativo agora, ao clicar nos botões, nenhuma ação seria realizada,
pois até o momento só a interface gráfica foi implementada. Na sequência
iremos manipular os eventos de click nos botões na interface gráfica.
 12

3.3 Manipulando os Eventos

O primeiro passo para manipular os eventos de click na interface gráfica

da Activity é encontrar a classe Java que manipula a interface gráfica,
conforme pode ser visto na figura 3.10, vá no diretório java, entre dentro do
diretório do projeto e encontre o arquivo ReproduzSom ou o nome que você
deu no início da criação do projeto.

Figura 3.10: Localização da classe Java para manipulação dos eventos da Activity.

O primeiro passo é declarar as variáveis necessárias. Iremos precisar

dos objetos btnPlay e btnStop da classe Button e declaramos um objeto player
da classe MediaPlayer para que possamos reproduzir um áudio. Na sequência,
os botões btnPlay e btnStop declarados na classe Java precisam ser
relacionados com os componentes na interface gráfica do arquivo XML, ou
seja, declarar que o botão btnPlay do Java está relacionado ao botão btnPlay
da interface gráfica do arquivo XML e o botão btnStop do Java está relacionado
ao botão btnStop do arquivo XML. O próximo passo é programarmos o evento
de click do botão btnPlay, no evento de click é preciso testar se o player é nulo,
ou seja, se o player nunca reproduziu som nenhum, neste caso eu indico o som
a ser reproduzido e mando iniciar a reprodução do som, o próximo passo é
testar se o som não é nulo, mas não está reproduzindo o som no momento
(!player.isPlaying()), neste caso é preciso indicar o som a ser reproduzido e
 13

mandar iniciar a reprodução do som. Por último é preciso programarmos o

evento de click no botão btnStop, no evento de click é preciso testar se o player
for diferente de nulo, neste caso basta dar um stop no player. Na figura 3.11 é
mostrada o código completo da classe Java que manipula a interface gráfica.

Figura 3.11: Código completo da classe Java para manipulação dos eventos.

A princípio o nosso aplicativo está pronto, agora iremos aprender como

testar o aplicativo.
 14

3.4 Testando o Aplicativo

Para testar um aplicativo, vá na opção Run, depois em Run ‘app’, abrirá

uma janela parecida com a mostrada na figura 3.12. Nesta janela você poderá
selecionar os dispositivos (smartphones) que estiverem conectados em uma
entrada USB do computador para testar o aplicativo neste smartphone ou
poderá selecionar um emulador que já tenha sido configurado no Android
Studio ou ainda poderá configurar um novo emulador no Android Studio para
depois usar para testar. Selecione a opção desejada e clique no botão “OK”.
Caso você tenha selecionado um smartphone para testar o aplicativo, não se
esqueça de ter ativado antes o modo desenvolvedor no Configurar do seu
smartphone.

Figura 3.12: Escolha dos devices (smartphones) conectados no computador para

testar o aplicativo nestes dispositivos.
 15

Para configurar um novo emulador no Android Studio, a primeira janela

que irá aparecer é a mostrada na figura 3.13 para escolher o tamanho,
resolução e densidade do emulador. Escolha o emulador que deseja testar o
aplicativo e clique em Next, para aplicativos comerciais é interessante testar no
maior número de smartphones possíveis e em diversos emuladores com
tamanhos de telas diferentes, para garantir que o aplicativo se comporta da
maneira esperada nos mais diversos smartphones diferentes, com tamanhos
de telas diferentes.

Figura 3.13: Escolha de um emulador do Android Studio para testar a aplicação.

Ao clicar em Next, aparecerá uma janela parecida com a mostrada na

figura 3.14, escolha a API e versão do sistema operacional Android em que
deseja testar o aplicativo. Pode ser que seja preciso fazer download da API e
isso poderá demorar alguns minutos. Após fazer download caso seja
necessário, clique em Next.
 16

Figura 3.14: Determinando a configuração do emulador.

Após, o emulador estará configurado e pronto para ser utilizado,

conforme pode ser visto na figura 3.15. Escolha o emulador que deseja utilizar
para testes, clique no botão “OK” e aguarde, o emulador irá demorar alguns
minutos para iniciar, após iniciar o aplicativo será carregado e será possível
testá-lo como se estivéssemos utilizando um smartphone.
 17

Figura 3.15: Emulador configurado, pronto para ser utilizado.

Caso vocês desenvolvam um aplicativo e queiram publicar na Play

Store, não se esqueçam, testem no maior número de smartphones possíveis, e
utilizem os recursos do emulador do Android Studio, nele é possível emular o
funcionamento do aplicativo nos mais diversos tamanhos de dispositivos e
versões do sistema operacional Android, garantindo que o aplicativo irá
funcionar adequadamente nas mais diversas versões do sistema operacional
Android e nos mais diversos tamanhos de telas, quanto mais dispositivos você
testar seu aplicativo, maior será a garantia de que ele não possua bugs e que
irá funcionar adequadamente quando for publicado e os usuários começarem a
fazer download e utilizarem o aplicativo no dia-a-dia.
 18

3.5 Síntese

Neste capítulo desenvolvemos o nosso primeiro aplicativo utilizando o

Android Studio, foi possível inserir uma imagem no fundo do aplicativo, assim
como inserir e reproduzir um áudio, aprendemos os conceitos fundamentais da
área de programação mobile, desenvolvemos nossa primeira interface gráfica
utilizando linguagem XML, manipulamos o arquivo de strings, onde ficam todos
os textos que serão apresentados no aplicativo para o usuário, manipulamos os
eventos de click na interface gráfica utilizando a linguagem Java, além de
aprendermos a testar o aplicativo no smartphone e utilizando o emulador do
Android Studio. Faça este aplicativo, teste, tire todas as dúvidas, ele é um
aplicativo simples, porém, ensina vários conceitos que são fundamentais,
importantíssimos para entender o funcionamento do Android Studio, do
processo de desenvolvimento de um aplicativo, faça, teste este aplicativo e
qualquer dúvida pergunte!

Exercícios

1. Utilizamos para desenvolver aplicativos para a plataforma Android as

linguagens XML e Java. Qual a função de cada uma dessas linguagens no
desenvolvimento de um aplicativo para a plataforma Android? Fale com suas
palavras, com base naquilo que você aprendeu lendo o e-book e assistindo as
videoaulas.

2. Para que serve o arquivo strings.xml? Fale com suas palavras, com base
naquilo que você aprendeu lendo o e-book e assistindo as videoaulas.

3. Em quais locais são colocados os arquivos externos, como por exemplo,

áudios e imagens no Android Studio?
 19

4. Crie o código para um botão “Limpar” na linguagem XML. Defina as

propriedades id, text, layout_width, layout_height, textColor e textSize para este
botão.

5. Altere o código do aplicativo desenvolvido no e-book, faça com que o

aplicativo possa reproduzir três sons diferentes, para isso o aplicativo deverá
ter quatro botões, um botão para cada som e o botão “Stop”, que ao ser clicado
deverá parar a reprodução do som.