Parte 5 — Alterando e finalizando a aplicação de teste

Esta é uma série de cinco posts ensinando a configurar o ambiente de desenvolvimento de aplicações para dispositivos móveis usando o Android Studio. Na primeira parte, vimos como instalar o Java SE. Na segunda parte, mostramos como instalar o Android Studio. Na terceira parte, criamos uma aplicação de teste para verificar se o ambiente de desenvolvimento foi instalado corretamente. Na quarta parte, mostramos como executar esta aplicação no emulador do Android. Finalmente, nesta quinta e última parte, alteraremos a aplicação para demonstrar algumas características do desenvolvimento para Android.

Nosso projeto encontra-se basicamente como o assistente de criação de projetos do Android nos entregou. Temos uma Activity principal e seu arquivo de layout associado.

Vamos agora alterar a aplicação para mostrar a data e a hora atual na tela quando o usuário clicar em um botão.

O primeiro passo será ir para a visão de design do arquivo de layout (activity_main.xml). Você pode alterar entre a visão de design e de texto XML clicando nas duas abas no canto inferior da tela, logo abaixo da paleta de componentes.

O Android Studio mostra a visão de como a tela irá ficar. No momento temos apenas o texto Hello World!. Vamos aumentar o tamanho da fonte para 24sp. Para isto, basta usar a área de atributos à direita. Esta área mostra os atributos do componentes que está selecionado na tela. Selecione o TextView, procure pela propriedade textSize e altere para 24sp. As letras sp significam uma unidade de medida que é independente da densidade de pixels do dispositivo. Na prática, isso significa que o texto irá aumentar ou diminuir de tamanho de acordo com o tamanho da tela do dispositivo onde a aplicação estiver sendo executada.

Alteremos também o ID do component para dataHoraTextView. O ID é a primeira propriedade listada na área de atributos.

Feito isto, vamos adicionar um botão para o usuário clicar. Basta arrastar um componente Button da paleta de componentes. Posicione o componente logo abaixo do TextView e altere o seu ID para mostrarDataHoraButton. Altere também a propriedade text para Mostrar Data e Hora.

Apesar de termos colocado o botão no centro da tela, ele não permanecerá nesta posição quando a aplicação for iniciada. O motivo é que nós ainda não definimos sua posição em relação aos demais componentes da tela. Para que o botão fique sempre centralizado em relação à tela e abaixo do TextView, devemos alterar suas restrições (constraints). O quadrado com sinais de + logo abaixo do atributo ID serve para isso.

Com o botão selecionado, clique nos sinais de + que ficam no topo e nos lados esquerdo e direito do quadrado. Isso fará com que restrições de posicionamento sejam criadas para o botão. Em outros tutoriais, explicaremos as restrições com mais detalhes.

Pronto, nosso layout está criado. Se executarmos a aplicação agora, ela mostrará a tela inicial com os componentes. No entanto, clicar no botão não surtirá efeito algum pois não foi adicionado nenhum código com o comportamento desejado. Para isso, devemos alterar o código da classe MainActivity.

O primeiro passo é criamos duas variáveis de instância para a classe MainActivity. Essas variáveis representaram os dois componentes da tela. Veja na figura abaixo como criar as duas variáveis. Note os imports no início do arquivo para que as classes TextView e Button possam ser usadas.

O passo seguinte é ligar as variáveis criadas ao componentes no arquivo de layout. Para isto usamos o método findViewById. Este método recebe o identificador do componentes (no formato R.id.<id_do_componente>). Note que temos que fazer um cast para a classe correspondente antes de atribuir o retorno do método à variável.

O próximo passo é adicionar o comportamento de mostrar a data e a hora ao componente mostrarDataHoraButton. Para isto, iremos utilizar o método setOnClickListener() da classe Button. Este método recebe um event listener como parâmetro. A discussão sobre event listeners fica pra outro tutorial, por enquanto podemos apenas digitar o bloco de código que desejamos executar conforme a figura abaixo.

Ao criarmos o bloco no formato event -> {} , estamos utilizando uma funcionalidade do Java 8. Por isso, o Android Studio reclama (marca em vermelho) o código, pois o projeto não está configurado para Java 8. Para resolver o problema, basta teclar Alt-Enter em cima do texto em vermelho que o Android Studio irá sugerir a correção. Escolha a opção para configurar o nível da linguagem para 8, conforme a figura abaixo.

Agora podemos escrever o código do comportamento. Digite o código mostrado na figura abaixo. A primeira linha armazena na variável dataHora, a data e hora atual. A segunda e a terceira linha formatam a data e hora e armazenam o resultado na variável dataHoraFormatada. Finalmente, a quarta linha altera a propriedade text do componente dataHoraTextView para a data e a hora formatada.

O último passo é executarmos a aplicação, clicando no botão Run. Após a tela carregar, podemos clicar no botão e ver o resultado.

Chegamos ao fim de nossa série de artigos de como configurar o Android Studio. Os próximos tutoriais irão apresentar outros conceitos de programação Android. Até a próxima!