Android Studio: Layout preview

David Tiago Conceição
Android Dev BR
Published in
3 min readJan 23, 2016

English version here.

Um dos meus maiores objetivos para os próximos meses é me tornar um desenvolvedor Android mais produtivo. Para isto, nada melhor do que conhecer as ferramentas que a plataforma Android oferece. Nesta série de dicas, abordarei rapidamente algumas dicas do Android Studio que podem facilitar o desenvolvimento. Começando pelo preview dos layouts.

Todas as funcionalidades apresentadas neste post foram testadas no Android Studio 2.0, Preview 6. Embora elas possam funcionar corretamente em outras versões, podem haver diferenças.

O Android Studio tem recebido constantes melhorias na visualização de layouts de telas. Desde as primeiras versões, existem as opções para visualizar como as telas serão renderizadas em diferentes dispositivos e versões do sistema. Mas em alguns casos, simplesmente adicionar componentes às telas não traz muitos ganhos. Para entender melhor, vamos começar adicionando um RecyclerView a um layout.

Preview de um RecyclerView

Não temos muita noção de como esta tela irá se comportar em um dispositivo. Vamos melhorar isto, começando com um passo atrás: criando o layout das linhas destas lista. Cada linha será composta de um TextView dentro de um CardView. Novamente não temos uma noção clara de como será o layout da tela.

Não consigo ver uma linha

Vamos melhorar isto adicionando alguns atributos. Queremos que estes atributos nos ajudem a visualizar a linha, mas não atrapalhem em tempo de execução. Por isso, ao invés de adicionar atributos do namespace android, vamos incluir elementos do namespace tools. Estes atributos serão analisados na visualização do Android Studio, mas ignorados em tempo de execução. Vamos começar adicionando um texto e um drawable ao nosso TextView com os atributos tools:drawableLeft=”@mipmap/ic_launcher” e tools:text=”Line number”. Ao digitar tools:, o Android Studio sugere a inclusão do namespace.

Agora sim, um preview da linha

Como podemos perceber, os atributos disponíveis em tools são os mesmos disponíveis em android, porém com efeito apenas dentro do Android Studio. Com isso, é possível aplicar vários atributos com facilidade, prevendo como os mesmos serão aplicados em tempo de execução.

Voltando para nosso RecyclerView, podemos agora aplicar nossa linha de preview adicionando o atributo tools:listitem=”@layout/row_person”. Podemos ir além, indicando qual gerenciador de layout deverá ser utilizado, além de qual a orientação do mesmo, adicionando os atributos app:layoutManager=”LinearLayoutManager” e android:orientation=”vertical”, respectivamente. Isto elimina a necessidade de definir o gerenciador de layout via código Java, simplificando nossas classes.

Um preview mais preciso da lista

Agora, com o preview configurado, fica muito mais fácil verificar como a lista será exibida em diferentes dispositivos. Basta alternar entre as configurações disponíveis, modificando o dispositivo nas opções logo acima do preview da tela.

Preview em um dispositivo diferente

Podemos também ter uma visão geral em diversos dispositivos, selecionando a opção Preview all screen sizes.

Um pouco confuso, útil em alguns casos

Agora que usamos alguns atributos básicos de tools, podemos expandir o uso para diversas situações. Tem uma ImageView com imagem carregada dinamicamente via library? Utilize o atributo tools:src e faça um preview de como a tela irá se comportar. Tem um componente com a cor definida dinamicamente? Utilize o atributo tools:tint e faça um preview do comportamento.

O código deste exemplo está no GitHub.

Em breve, mais dicas sobre Android Studio e ferramentas para apoiar o desenvolvimento.

--

--

David Tiago Conceição
Android Dev BR

Android Application Engineer @ Involves; Admin @ Android Dev Br; Organizer @ GDG Floripa www.androiddevbr.org