Como Criar Aplicativos Para Tablets (Suporte a Telas Grandes)

Postado em 18/01/2023

Por Tiago Aguiar 5 min de leitura

Com o aumento da popularidade de tablets e dispositivos móveis, ter uma versão responsiva e otimizada para esses dispositivos se tornou essencial para o sucesso de um aplicativo móvel. Além de garantir uma melhor experiência ao usuário, ter uma versão tablet também pode ampliar o alcance do seu aplicativo, atraindo novos usuários e aumentando a fidelidade dos existentes.

Neste artigo, vamos explorar os motivos pelos quais ter uma versão tablet responsiva é crucial para o sucesso de seu aplicativo móvel e como aplicar ao seu projeto.

Diferenciando Layouts de Smartphones e Tablets

No Android, a pasta res/layout é usada para armazenar os arquivos de layout XML que descrevem como a interface do usuário deve ser exibida. Esses arquivos de layout são usados pelo sistema Android para renderizar as visualizações na tela do dispositivo.

Quando o aplicativo é executado, o Android carrega esses arquivos de layout e os usa para criar as visualizações na tela. O sistema Android usa as informações contidas nos arquivos de layout para determinar o tamanho, posição e outros atributos das visualizações.

Além disso, o Android usa esses arquivos de layout para definir como as visualizações devem ser exibidas em diferentes tamanhos de tela e orientações, e é ai que começamos a trabalhar.

A criação de diferentes versões de arquivos de layout para diferentes tamanhos de tela e orientações é feito por meio da utilização de pastas adicionais dentro da pasta “res”, como layout-land. Dessa forma, é possível personalizar a interface do usuário para se adequar aos diferentes tamanhos de tela e orientações de dispositivos.

O critério que ele usa é baseado no conceito smallest width que indica a largura mínima que o dispositivo precisa ter para que aplique aquele layout. Por exemplo:

layout-sw480dp: Layout para smartphones (padrão)
layout-sw600dp: Layout para tablets de 7 polegadas
layout-sw720dp: Layout para tablets de 10 polegadas

Criando o Layout para Tablets no Android

Agora que você já sabe como o sistema Android carrega os layouts, vamos criar uma nova pasta dentro de res.

Crie uma pasta de recursos adicional dentro da pasta “res” com o nome “layout-sw600dp”.
Dentro da pasta “layout-sw600dp”, crie um arquivo XML de layout que represente sua interface do usuário para tablets. Para o nosso exemplo, copie e cole o arquivo activity_main.xml e modifique a propriedade de cor para vermelho android:background="#FF0000"

Com o novo layout, adicione os mesmo componentes em ambos os XMLs com os mesmos IDs. Ou seja, se no seu layout de smartphone tiver um TextView com id txt, no arquivo de tablets é preciso ter o mesmo componente para evitar futuros crashes de referências não encontradas.

Agora teste o seu layout em dispositivos de tablet reais ou simuladores para garantir que ele se adapte corretamente às diferentes resoluções de tela.

Você verá um fundo completamente vermelho na versão Tablet e um fundo branco na versão Smartphone.

Layouts para Tablets Retrato (Portrait) e Paisagem (Landscape)

Para diferenciar a orientação/rotação do dispositivo, vamos usar o mesmo princípio de pastas layout.

Crie uma nova pasta dentro de res com o nome de layout-sw600dp-land: res/layout-sw600dp-land
Copie novamente o layout da activity e troque a cor de fundo para um verde (00FF00) .
Execute o aplicativo em um tablet e rotacione o dispositivo para visualizar o carregamento do novo layout.

Agora, como posso descobrir qual é a orientação do meu dispositivo programaticamente?

Há uma propriedade chamada orientation dentro de resources que nos ajuda a descobri como o dispositivo está sendo exibido.

  
// distinguir a orientação
val orientation = resources.configuration.orientation
if (orientation == Configuration.ORIENTATION_PORTRAIT) {
	findViewById<TextView>(R.id.txt).text = "retrato"
} else {
	findViewById<TextView>(R.id.txt).text
}

Executando o Aplicativo Android no Tablet ou Smartphone

Já sabemos como usar layouts diferentes. Agora, como saber se a execução do programa está sendo realizada por um tablet ou smartphone?

Saber isso permite que você crie lógicas de programação diferentes baseadas no dispositivo.

Existem várias formas de se fazer essa lógica. Mas a mais simples e efetiva que eu conheço é usar os recursos da pasta values.

Só recapitulando, a pasta “values” no Android é uma pasta de recursos que contém arquivos XML que armazenam valores estáticos, como strings, cores, dimensões, estilos, entre outras propriedades. Esses valores são usados na interface do usuário de um aplicativo Android e podem ser referenciados pelos arquivos de layout XML.

Ela também é usada para centralizar e compartilhar valores entre vários arquivos de layout, tornando mais fácil e eficiente manter a consistência de estilo em todo o aplicativo. Além disso, ao armazenar valores em arquivos XML na pasta “values”, é possível traduzir o aplicativo para outros idiomas e adaptá-lo a diferentes culturas.

Exemplos de arquivos que podem ser encontrados na pasta “values” incluem “strings.xml”, “colors.xml”, “dimens.xml” e “styles.xml”. Cada um desses arquivos contém valores específicos, como strings de texto para serem exibidas na interface do usuário, cores para serem usadas na interface do usuário, dimensões para espaçamentos e margens, e estilos para controlar a aparência de elementos da interface do usuário.

E há mais um arquivo dentro de values que podemos usar: o bools.xml.

Combinando a fundamento de nome de pasta com o arquivo de bools.xml, podemos distinguir em tempo de execução no programa qual foi o layout carregado pelos valores booleanos.

Crie uma pasta chamada values-sw600dp dentro de res: res/values-sw600dp.

Dentro desta pasta você irá adicionar um arquivo bools.xml com o seguinte conteúdo:

  
<resources>
	<bool name="is_tablet">true</bool>
</resources>

Agora crie o mesmo arquivo bools.xml na pasta values padrão com o seguinte conteúdo:

  
<resources>
	<bool name="is_tablet">false</bool>
</resources>

Note que a variável is_tablet é quem vai nos ajudar a identificar o dispositivo programaticamente.

Dentro da sua Activity, cole o trecho de código:

  
// identifica se é tablet ou não = smartphone
val isTablet = resources.getBoolean(R.bool.is_tablet)
if (isTablet) {
	findViewById<TextView>(R.id.txt).text = "é tablet"
} else {
	findViewById<TextView>(R.id.txt).text = "é smartphone"
}

Concluindo

Em conclusão, a versão tablet responsiva de um aplicativo móvel é crucial para garantir uma experiência de usuário satisfatória em dispositivos de tela grande. O Android possibilita a criação de layouts personalizados para diferentes tamanhos de tela e resoluções através da pasta “res” e suas sub-pastas, como “layout-sw600dp”.

A partir de agora, você já pode criar interfaces do usuário de seus aplicativos de forma eficiente e adaptável a diferentes tamanhos de tela e orientações.

Android

#kotlin #androidStudio