No último artigo, 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 artigo 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-hdpi, mipmap-mdpi, mipmap-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 artigos.

Resumindo: supondo que estou com um 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 a 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:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
</LinearLayout>

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_parent e wrap_content. match_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):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical">
 
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/name" />
 
    <EditText
        android:id="@+id/address"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/address" />
 
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/save" />
 
</LinearLayout>

<!-- Arquivo strings.xml -->
<resources>
    <string name="app_name">Tutorial</string>
    <string name="save">Save</string>
    <string name="address">Address</string>
    <string name="name">Name</string>
</resources>

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:

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

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:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical">
 
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/name" />
 
    <EditText
        android:id="@+id/address"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/address" />
 
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/save" />
 
</LinearLayout>

E é isso! No próximo artigo 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.

***

Artigo originalmente publicado em: https://www.concretesolutions.com.br/2017/05/03/tutorial-android-layouts-resources/