Concrete Logo
Hamburger button

Layouts e resources – Tutorial Android 4

  • Blog
  • 3 de Maio de 2017

No último post criamos nossa primeira Activity e entendemos um pouco sobre Intents. Hoje vamos entender um pouco mais sobre resources no Android e criar um layout para a nossa Activity. Preparados?

Para o tutorial de hoje, vamos trabalhar majoritariamente com a pasta res, que fica localizada no caminho app/src/main/res. É nela em que ficam todos os recursos do seu projeto, que não são, necessariamente, código Java. O projeto, no momento, deve ter algumas pastas como drawable (vazia), mipmap (em algumas versões com sufixos estranhos) e values.

Um projeto Android padrão costuma ter várias outras, mas vamos entrar nos detalhes à medida que elas forem necessárias. Essas pastas separam os tipos de recursos que temos no projeto, como por exemplo a drawable, que contém qualquer tipo de coisa desenhável, desde formas até imagens e seletores. A mipmap contém somente o ícone do aplicativo e a pasta values contém valores em geral, desde inteiros até strings, cores, dimensões, estilos etc.

Se você abrir cada uma das pastas (mipmap-hdpimipmap-mdpimipmap-xhdpi etc) verá que temos o ícone do aplicativo em diferentes tamanhos. Isso ocorre porque os dispositivos Android possuem diversas configurações no que diz respeito a tudo no dispositivo, desde o idioma até o que chamamos de ‘densidade da tela’. Ter uma maior densidade quer dizer que aquele dispositivo tem mais pixels em uma menor área física.

Exemplo: um dispositivo que tem uma tela de 4,7″ e uma resolução de 480×800 pixels tem uma densidade mais baixa (hdpi) do que um device que tem a mesma tela de 4,7″, porém uma resolução de 1080×1920 (xxhdpi). Exatamente por suportar uma diversidade grande de tamanhos de tela é que no Android não trabalhamos com pixels e sim com density pixels. Assim, um botão tende a ter sempre “mais ou menos o mesmo tamanho”, independente da resolução da tela. Para aprender mais sobre isso, dê uma olhada na documentação do Android (que agora também possui versão em português).

E como essa mágica é feita? Não é mágica. Ao colocar um qualificador na pasta, o Android, na hora em que estiver executando, reconhece a configuração do dispositivo e usa o recurso específico para a sua configuração, assim não precisamos fazer várias condições em nosso código. É importante lembrar que podemos ter vários tipos de qualificadores ou até mesmo adicionar pastas com mais de um qualificador. Veremos alguns casos em outros posts. 😉

Resumindo: supondo que estou em dispositivo xhdpi e preciso do resource mipmap/ic_launcher, o Android automaticamente buscará em mipmap-xhdpi/ic_launcher. Caso não exista uma versão específica para a configuração, ele busca a opção mais genérica, aquela sem qualquer sufixo.

Bom, agora que já estamos mais familiarizados com o mecanismo de resources e pastas no Android, vamos criar uma nova dentro de res, chamada layout. Esta pasta, como o próprio nome sugere, guardará arquivos que representam os layouts das nossas telas. Vamos criar um arquivo chamado activity_main.xml, sendo que grande maioria dos resources no Android utilizam a notação de XML.

Nesse arquivo, primeiramente, vamos colocar um container, o LinearLayout. Os containers servem para organizar os elementos na tela e no caso do LinearLayout organiza os elementos alinhados, um após o outro, utilizando a orientação vertical ou horizontal. Adicionando o LinearLayout, o arquivo activity_main.xml fica assim:

Você pode perceber que, além da orientação, também configuramos a largura (width) e a altura (height) do elemento. Para essas dimensões podemos utilizar um valor ou as constantes match_parentwrap_contentmatch_parent, indicando o que o elemento adotará para essa dimensão, a mesma que seu elemento pai. No caso, como o LinearLayout é o primeiro elemento da nossa hierarquia de views, ele adotará o tamanho de seu pai (algum container do Android que representa a tela). Assim, temos um LinearLayout do tamanho da tela. 🙂

Vamos agora adicionar dois campos de texto e um botão ao nosso layout.

Os campos de entrada de texto no Android são conhecidos como EditText. Além da altura e da largura, também especificamos o id e a propriedade hint. Ids no Android são identificadores, o que nos permitirá referenciar este elemento em outros lugares (seja no XML, seja nas nossas classes Java); a notação @+id indica que estamos criando esse recurso caso ele não exista.

Sempre que tiver a notação @ em um XML significa que estamos referenciando um recurso. O + indica a criação e id indica que é um resource do tipo id. Já o hint indica um texto de sugestão que será exibido quando o campo estiver vazio, indicando ao usuário o que deve ser inserido. Também estamos utilizando a notação de recurso, dessa vez referenciando um recurso do tipo string (que terá um valor correspondente dentro de res/values/strings.xml):

No caso do Button teremos atributos semelhantes, com a diferença de que utilizaremos a propriedade text em vez de hint. Com essa propriedade, teremos um texto no botão.

Com o arquivo de layout criado, voltamos à classe MainActivity ao definir esse arquivo de layout, vinculando-o à Activity. Para isso, vamos utilizar ainda o método onCreate(), chamado sempre que a Activity é criada. Nele, vamos vincular o nosso layout XML à Activity e fazemos isso chamando o método setContentView(). Este método pode receber um objeto do tipo View ou uma referência a um resource de layout. Note o uso da classe R. Esta classe é gerada automaticamente a cada build do projeto como uma referência a todos os resources que temos, para uso em nosso código Java. Vamos também remover os Logs que adicionamos anteriormente.

O método fica assim:

Com esse XML, caso execute o aplicativo, nossa tela fica com o seguinte layout:

Para uma experiência mais agradável, poderíamos centralizar os elementos verticalmente. Para isso, podemos adicionar a propriedade gravity com o valor center_vertical. Essa propriedade indica como os filhos do container vão se comportar, conforme forem adicionados. Assim, teremos a tela final:

E é isso! No próximo post vamos ver o mecanismo de binding de views e callbacks no Android! Caso queira baixar o projeto que desenvolvemos até agora, você pode encontrar no Github.

Até o próximo post!

É desenvolvedor Android e quer fazer parte de um time incrível? Clique aqui.