ConstraintLayout, a evolução do RelativeLayout

Em maio, durante o Google I/O 2016, a empresa apresentou o Android Studio 2.2 Preview. Entre muitas novidades, destacamos uma nova versão do Layout Editor e o ConstraintLayout que conceitualmente é similar ao RelativeLayout, porém, se atrelado ao novo editor, traz diversos recursos que facilitam a vida de desenvolvedores experientes e iniciantes, principalmente aqueles que não estão habituados a trabalhar com XML.

Novo Layout Editor

Na versão atual do Android Studio, eu utilizo o Layout Editor apenas como uma pré-visualização do layout que estou construindo através do editor de XML. Ele costuma ser lento e muitas vezes é melhor executar a aplicação ao invés de tentar utilizá-lo. Acho que não estou sozinho nesse barco…

Uma das novidades do editor é a visualização “blueprint”. Esta visualização é bem leve e traz informações visuais sobre margens e as constraints do novo layout. Além disso, você também consegue visualizar views que às vezes são invisíveis no layout final. Na imagem abaixo, você pode conferir a visualização que já existe na versão atual do Android Studio lado a lado com a visualização blueprint e também pode escolher visualizar apenas uma delas, através da toolbar do editor.

Blueprint é a nova forma de pré-visualizar seu layout.

Agora vamos ao assunto principal deste artigo: o ConstraintLayout. No RelativeLayout podemos posicionar uma view na tela baseada em uma outra view. No novo layout isso continua acontecendo, mas agora podemos utilizar o recurso de drag-and-drop de elementos do editor para posicionar os elementos e criar as constraints que garantem a sua posição na tela, tornando o layout mais responsivo. Podemos criar as constraints manualmente ou deixar o editor criá-las automaticamente.

Crie as constraints manualmente
O editor pode inferir as constraints para você.

Mas o que são constraints?

Constraint é a descrição de como uma view se posiciona na tela de forma relativa a um outro elemento do layout ou ao próprio ConstraintLayout.

Um lado de uma view pode se ligar a um anchor point de outra view.

Conecte as view utilizando o anchor point

Você também pode ligar um lado de uma view a borda do layout.

Conecte os elementos a borda do layout

O ConstraintLayout oferece uma opção chamada “guideline”

Adicione guidelines ao seu ConstraintLayout

Guideline é uma linha invisível que pode ser utilizada para alinhar seus elementos.

Conecte uma view às guidelines

Tipos de constraints

Sabendo que uma view pode se posicionar na tela com relação a outro elemento ou ao próprio layout, podemos determinar quatro tipos de constraints:

  • Side connection with the layout: Conecte um lado da view a um lado do layout. Por exemplo, conecte o lado de cima da view com o borda superior do ConstraintLayout.
Side connection with the layout
  • Side connection with a view: Conecte um lado da view com um lado oposto de outra view. Por exemplo, conecte o lado direito de um Button com o lado esquerdo de um Textview. O Button sempre estará ao lado esquerdo do TextView.
Side connection with a view
  • Side alignment with a view: Alinhe a borda da view com a mesma borda de outra view. Por exemplo, alinhe o lado esquerdo de um Button com o lado equerdo de outro Button. Dessa forma, eles estarão empilhados verticalmente e alinhados à esquerda.
Side alignment with a view
  • Baseline alignmet with a view: Alinhe o baseline do texto de uma view com o baseline do texto de outra view. Use este tipo para alinhar horizontalmente quando o alinhamento do texto das views for mais importante que o alinhamento dos lados da view.
Baseline alignment with a view

Como usar

O ConstraintLayout é compatível com Android 2.3 ou superior, mas para utilizar os recursos do Layout Editor é necessário utilizar o Android Studio 2.2 Preview.

Nada impede que você utilize este layout na versão atual do Android Studio, mas deverá fazer tudo manualmente, através do XML o que, de certa forma, acaba com grande parte da mágica deste novo layout.

É necessário atualizar o Android Support Repository para versão 32 ou superior e adicionar a dependência abaixo.

Lembre-se de que o editor está na versão preview e o layout ainda é alpha. Já peguei diversos bugs durante a pesquisa para este artigo e não aconselho, de forma alguma, a utilização desses recursos nos aplicativos em produção.

Outro ponto negativo é a falta de documentação. O único documento oficial é este: http://tools.android.com/tech-docs/layout-editor em cuja fonte se baseia este artigo.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.