Design de interface - Como garantir a mesma aparência em qualquer tamanho de tela no Android.

Alô pessoal! Estamos de volta com outro assunto de fundamental importância no desenvolvimento de aplicações Android. O design de interface. 

Ocorre que existe uma miríade de dispositivos de todos os tipos e tamanhos, variando desde celulares com tela de duas polegadas até tablets de 12 polegadas. Neste cenário tão diverso, como é possível garantir a mesma aparência de um aplicativo, seja lá qual for o tamanho de tela do Android?

Bem, essa questão já era previsível pelos autores do projeto do Android. Parecia bastante plausível a ideia de que um dia os dispositivos teriam telas maiores, ou que o sistema migraria para aparelhos de televisão. Garantir que as telas do app sejam proporcionais às dimensões do aparelho  é, portanto, possível, pois o framework de desenvolvimento do Android é preparado para isto desde a concepção.

Para exemplificarmos, vamos então, retornar ao nosso projeto "meuPrimeiroApp", abrindo o arquivo "activity_main.xml", localizado na pasta "res/layout". Este é o arquivo que define a aparência da tela principal do app. Ao abrir o arquivo, veremos o seguinte código-fonte:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

</RelativeLayout>

Na parte de baixo da janela onde está aberto o arquivo, podemos visualizar duas abas: "Graphical Layout" e "activity_main.xml". Alternando entre as duas, é possível verificar que enquanto uma mostra o código-fonte que representa o layout, a outra mostra o desenho da tela propriamente dita, isto é, o próprio layout:

Layout de uma activity do Android

Podemos ver que a janela mostra uma tela maior à esquerda, que é a representação do modelo de celular atual, selecionado (no caso Nexus One). Também vemos telas "menores", representando telas de outros modelos de celular. Na imagem acima podemos perceber que temos uma representação do mesmo layout em uma tela de 3.2 polegadas, também em 5.1 polegadas, e, finalmente, num tablet de 10.1 polegadas.

Note como o texto "Hello world!" aparece minúsculo na tela do tablet de 10.1 polegadas! Isto ocorre porque ainda não fizemos nenhuma previsão em relação a tamanhos variados de tela no nosso app.

Vamos então aumentar o tamanho da fonte para que fique mais visível na tela do tablet. Nesse arquivo "activity_main.xml", vamos editar a parte do "TextView" (que mostra o HelloWorld), para que fique assim:

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world"

        android:textSize="64sp" />

Agora gravemos a tela com CTRL+S e mudemos para a aba "Graphical Layout" para vermos as modificações. Ora, ora, ora... O texto "HelloWorld!" aumentou na tela do tablet de 10. Mas... O problema é que ficou enorme nas telas pequenas!

Como resolver este dilema?

Fácil! A Google criou uma solução pra isso, através do uso de um arquivo chamado "dimens.xml" (dimensions). Este arquivo serve justamente para parametrizar os valores de acordo com os vários tamanhos de tela existentes.

Vamos então, alterar o trecho de código para:

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world"

        android:textSize="@dimen/tamanhoFraseSaudacao" />

Poderemos ver inicialmente que o Eclipse reclamará, apresentando um "X" vermelho na linha onde especificamos o "@dimen/tamanhoFraseSaudacao". Isto é porque ainda não definimos esse parâmetro, e, portanto, o Eclipse não o reconhece.

Para isso, vamos abrir o arquivo "dimens.xml" da pasta "res/layout/values" e clicar na aba "dimens.xml" para ver o código-fonte do arquivo. Teremos algo do tipo:

<resources>

    <!-- Default screen margins, per the Android Design guidelines. -->

    <dimen name="activity_horizontal_margin">16dp</dimen>

    <dimen name="activity_vertical_margin">16dp</dimen>

</resources>

O próximo passo é acrescentar uma nova linha "<dimen name..." antes do fechamento do tag "</resources>", assim:

<dimen name="tamanhoFraseSaudacao">32dp</dimen>

Gravemos com CTRL+S. Para ver as alterações, nem precisamos compilar o código. Basta voltarmos no arquivo "activity_main.xml" e selecionarmos a aba "Graphical Layout".

Veremos que a fonte diminuiu novamente, mas em todas as telas. É porque nós apenas criamos o parâmetro, mas ainda não definimos o tamanho da fonte para outras dimensões de tela.

Agora então, copiemos a linha "<dimen name="tamanhoFraseSaudacao">32dp</dimen>". Vamos colar esta linha no arquivo: "res/layout/values-sw600dp/dimens.xml", desta forma:

<resources>

    <!--

         Customize dimensions originally defined in res/values/dimens.xml (such as

         screen margins) for sw600dp devices (e.g. 7" tablets) here.

    -->

   <dimen name="tamanhoFraseSaudacao">72dp</dimen>

</resources>

Alteramos o valor do tamanho da fonte, de 32dp para 72dp. Esse arquivo, nesta pasta "values-sw600dp" especifica os parâmetros para telas em torno de 7 polegadas, conforme o comentário gravado no arquivo já ensina.

Analogamente, faremos alteração semelhante no arquivo "res/layout/values-sw720dp-land/dimens.xml":

<resources>

    <!--

         Customize dimensions originally defined in res/values/dimens.xml (such as

         screen margins) for sw720dp devices (e.g. 10" tablets) in landscape here.

    -->

    <dimen name="activity_horizontal_margin">128dp</dimen>

    <dimen name="tamanhoFraseSaudacao">120dp</dimen>

</resources>

Salvemos tudo com CTRL+S e retornemos ao layout da tela (activity_main.xml), na aba "Graphical Layout". Pode ser que o Eclipse não faça o refresh das telas, se isto acontecer, clique no ícone de uma lupa com o número 1 dentro, na lateral direita da janela (ou tente alternar entre as telas dos modelos de celular, clicando em uma delas).

Veremos que, agora, seja numa tela de 3, 5 ou 10 polegadas, o texto aparece de forma proporcional, pois as dimensões foram parametrizadas.

Embora neste exemplo tenhamos feito um tratamento relacionado ao tamanho das fontes de um texto que aparece na tela, a mesma lógica vale para botões, caixas de texto e quaisquer outros elementos visuais que precisem ser reescalonados de acordo com a tela em que apareçam.

Imagens são um caso à parte, conforme comentado no post Entendendo o framework do Android - Parte 2, situação em que as pastas "drawable" são utilizadas para solucionar a mesma questão. Futuramente trataremos do assunto em um post específico.

A mesma abordagem (de parametrização) é utilizada quando desejamos traduzir um aplicativo para outras línguas (mas nos arquivos "string.xml") conforme veremos também num post futuro.

É isso aí pessoal. Mais uma lição importante pra quem quer começar a desenvolver pra Android com o pé direito!

Espero que tenha sido proveitoso. Abraços!