Aula 06 – Layout

Programação de
Apps Android

• Qual o layout mais

flexível para criar apps
modernos?
1 Prof. Márcio Nunes
 INTERFACE GRÁFICA
Introdução
• Como vimos, é por meio dos arquivos de layout XML que
construímos as interfaces gráficas (GUI) dos nossos apps.
Porém, isso também pode ser feito via código
(programaticamente)

• Assim, as interfaces gráficas representam o principal canal de

interação entre o programa e os usuários, onde todas as ações
do usuário são feitas
 INTERFACE GRÁFICA
Android GUI
• No Android, a interface gráfica é composta pela combinação de
um catálogo de componentes

• Existem basicamente dois tipos de componentes:

●
Gerenciadores de Layouts
(ou Layouts): lidam com o
posicionamento dos elementos

●
Widgets: componentes com os quais
o usuário pode visualizar e interagir
(Button, TextView, ImageView)
 INTERFACE GRÁFICA
Editor Visual
•
 COMPONENTES
Propriedades Comuns
• Todos os componentes têm algumas propriedades em comum:
Propriedade Descrição Valores

android:layout_width Define a largura do componente match_parent

android:layout_height Define a altura do componente wrap_content
XX dp
android:layout_margin
android:layout_marginTop
android:layout_marginBottom Define as margens do
android:layout_marginVertical componente dentro do seu XX dp
android:layout_marginStart container
android:layout_marginEnd
android:layout_marginHorizontal
android:id Identifica uma view para ser @+id/identificador
referenciada posteriormente
 COMPONENTES
Propriedades Comuns
●
Esses valores são descritos a seguir:
— match_parent: o componente ocupa todo o
tamanho definido por seu layout pai (tela
inteira ou todo o espaço). É o mesmo que
fill_parent (deprecated no Android 2.2) 50 dp

— wrap_content: o componente ocupa apenas

o tamanho necessário na tela, sem esticar
 COMPONENTES
Propriedades Comuns
●
Esses valores são descritos a seguir:
— XX dp: Número inteiro especificando o
tamanho (ex: 50 dp, para ocupar 50
pixels na tela). A notação dp (density
independent pixel) faz a conversão
correta de pixels conforme a
densidade/resolução da tela, por isso,
NUNCA UTILIZE PIXELS (ex: 50 px).
 COMPONENTES
A Classe View
●
A Classe android.view.View é a classe base de todos os
componentes visuais (Gerenciadores de Layouts e Widgets)
●
Suas diversas sub-classes são utilizadas para criar a GUI

●
Assim qualquer componente herda dessa classe, e
obritagoriamente deve implementar o método
onDraw(canvas), que desenha o componente na tela
— Widgets geralmente herdam diretamente da classeView
— Gerenciadores de layout herdam a classe View por meio
de outra classe android.view.ViewGroup
 COMPONENTES
A Classe View
●
 INTERFACE GRÁFICA
Layouts
●
São os componentes que tem como propósito agrupar e
organizar outros componentes na tela
●
Todos os layouts devem herdar de android.view.ViewGroup
como vimos na figura de hierarquia da classe View. Assim, um
ViewGroup pode conter vários objetos View e outros
ViewGroup.
 INTERFACE GRÁFICA
Layouts
• Os principais layouts são:
Layout Descrição
AbsoluteLayout Posiciona os componentes de forma fixa, utilizando coordenadas x e y.
Deprecated!!
LinearLayout Organiza os componentes linearmente, podendo ser configurado para
exibí-los na horizontal ou vertical.
FrameLayout Tipo mais simples de Layout. Exibe um componente sobre outro,
utilizando uma lógica de pilha.
RelativeLayout Organiza os componentes de forma relativa a outros. Ex: posiciona
componente A acima (a esquerda, direita ou embaixo) do componente B.
 INTERFACE GRÁFICA
Layouts
• Os principais layouts são:
Layout Descrição
ScrollView Permite fazer a rolagem na tela quando não houver espaço suficiente
HorizontalScrollView para todos os componentes.
ConstraintLayout* Permite organizar os componentes com base em regras e restrições
TableLayout Organiza os componentes no formato de uma tabela. Esse layout é
uma derivação do LinearLayout.
GridLayout Similar ao TableLayout, mas permite que um componente ocupe mais
de uma linha
 LAYOUTS
Linear Layout
• O Linear Layout é outro gerenciador de layout que permite
organizar os elementos na vertical ou horizontal, uns após os
outros

• A forma de organização do
Linear Layout é dada pelo
atributo android:orientation,
que é obrigatório.
 LAYOUTS
Linear Layout

• Pode-se aninhar vários Linear Layouts

para formar estruturas mais complexas
(assim como isso é possível para todos
os outros layouts):
 LAYOUTS
Linear Layout
●
Para demonstrar os diversos layouts, crie um projeto
HelloLayouts (Empty Views Activity), e então altere o arquivo
activity_main.xml conforme a seguir:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exemplos de Layouts"
android:layout_gravity="start"
android:paddingHorizontal="10dp"/>
... activity_main.xml
 LAYOUTS
Linear Layout
●
Para demonstrar os diversos layouts, crie um projeto
HelloLayouts (Empty Vies Activity), e então altere o arquivo
activity_main.xml conforme a seguir:
...
<Button
android:id="@+id/btn_frame_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Frame Layout"
android:layout_margin="16dp"/>

</LinearLayout> activity_main.xml
 INTERFACE GRÁFICA
Padding e Margin
• Todo componente pode definir os atributos android:padding e
android:layout_margin (e seus derivados android:layout_marginHorizontal,
android:layout_marginEnd,android:layout_paddingStart, etc)

• O android:layout_margin é o espaçamento do componente em relação às

bordas ou ao componente vizinho (apenas afasta, não alterando o tamanho)

• O android:padding é o
espaçamento da borda do
componente para o seu
interior (altera o tamanho
do componente).
 INTERFACE GRÁFICA
gravity e layout_gravity
• O atributo android:gravity configura o posicionamento do conteúdo da
própria view ou do próprio layout que especifica esse parâmetro.
• Os valores possíveis são:
Valor Descrição
start, left, end, Empurra os objetos para o canto especificado do
right, top, bottom container
centerVertical, Coloca os objetos no centro vertical ou horizontal
centerHorizontal do container
fillVertical, Aumenta o tamanho vertical e/ou horizontal do
fillHorizontal, objeto se necessário para ele preencher
fill completamente o seu container
clipVertical, Corta as bordas do objeto ao longo do eixo
clipHorizontal, vertical ou horizontal do container
 INTERFACE GRÁFICA
gravity e layout_gravity
• O atributo android:layout_gravity configura o posicionamento da view em
relação ao seu layout pai.
• Os valores possíveis são os mesmos de android:gravity:
Valor Descrição
start, left, end, Empurra os objetos para o canto especificado do
right, top, bottom container
centerVertical, Coloca os objetos no centro vertical ou horizontal
centerHorizontal do container
fillVertical, Aumenta o tamanho vertical e/ou horizontal do
fillHorizontal, objeto se necessário para ele preencher
fill completamente o seu container
clipVertical, Corta as bordas do objeto ao longo do eixo
clipHorizontal, vertical ou horizontal do container
 LAYOUTS
Frame Layout
• O Frame Layout é o gerenciador de layout mais simples,
empilhando um componente sobre outro durante a exibição.

• Os componentes são sobrepostos, sendo que o primeiro ficará

mais atrás e os próximos à frente do anterior.

• Normalmente é usado para

colocar um único elemento
dentro dele.
 LAYOUTS
Frame Layout
●
Arraste a imagem fornecida para a pasta res/drawable.
●
Crie uma activity FrameLayoutActivity por meio do menu File
→New → Activity → Empty Views Activity conforme a seguir:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/pampulha"/>
... activity_frame_layout.xml
 LAYOUTS
Frame Layout
●
Arraste a imagem fornecida para a pasta res/drawable.
●
Crie uma activity FrameLayoutActivity por meio do menu File
→New → Activity → Empty Views Activity conforme a seguir:
...
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Frame Layout: Pampulha"
android:textSize="20sp"
android:background="#000"
android:textColor="#FFFFFF"
android:layout_gravity="bottom"/> activity_frame_layout.xml
</FrameLayout>
 INTERFACE GRÁFICA
TextView
• As cores no Android Studio são especificadas por um valor RGB e um
canal Alfa.

• O valor pode ser especificado em algum dos formatos abaixo, sempre

começando com cerquilha (#), seguido por Alpha-Red-Green-Blue:
- #RGB → #F00 - #ARGB → #5F00
- #RRGGBB → #00FF00 - #AARRGGBB → #5500FF00
●
Pode-se definir recursos de cores no arquivo res/values/colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
</resources> colors.xml
 INTERFACE GRÁFICA
TextView
• Ao definir tamanhos de texto, usaremos a unidade scalable pixels (sp).

• Por padrão, a unidade sp é do mesmo tamanho que um dp, mas é

redimensionada com base no tamanho da fonte de texto do sistema, que
pode ser alterada em Acessibilidade → Tamanho da Fonte.

• Nunca usar sp para

tamanhos de layout.
 INTERFACE GRÁFICA
ImageView
• Um ImageView é um widget utilizado para mostrar uma imagem.

• A imagem é definida no atributo android:src, e o atributo

android:scaleType informa como a imagem deve ser redimensionada,
podendo ser:
 INTERFACE GRÁFICA
ImageView
• Valor Descrição

center Centraliza a imagem sem realizar nenhuma escala

centerCrop Redimensiona a imagem de modo que a largura e altura sejam igual ou maior que a
ImageView, cortando a imagem na vertical ou horizontal
centerInside Se a imagem for maior que a ImageView, redimensiona uniformemente de modo que
largura e altura sejam igual ou menor que a ImageView, ficando as bordas vertical ou
horizontal vazias. Se a imagem for menor, apenas será centralizada na ImageView
matrix A imagem será desenhada pela parte superior esquerda sem redimensionar
 INTERFACE GRÁFICA
ImageView
• Valor Descrição

fitCenter Similar a centerInside, mas a imagem sempre será redimensionada e centralizada

fitStart Similiar a fitCenter, mas a imagem ficará alinhada ao início da ImageView (à esquerda se
a largura for maior que a altura, e ao topo, caso contrário).
fitEnd Similiar a fitCenter, mas a imagem ficará alinhada ao fim da ImageView (à direita se a
largura for maior que a altura, e à parte inferior, caso contrário).
fitXY Redimensiona a imagem de modo a preencher toda a ImageView (pode distorcer).
 LAYOUTS
Frame Layout
●
Agora vamos alterar a MainActivity conforme a seguir:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button btnFrameLayout = findViewById(R.id.btn_frame_layout);

btnFrameLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(getBaseContext(), FrameLayoutActivity.class);
startActivity(intent); //Navega para a próxima tela
}
});
}
} MainActivity.java
 LAYOUTS
Relative Layout
• O Relative Layout é um gerenciador de layout
que permite posicionar os componentes em
relação a outros componentes (por meio do id)
ou às bordas (acima, abaixo, ao lado, etc).

• O posicionamento é feito com base em uma lista de atributos:

android:layout_above android:layout_alignParentTop android:layout_centerVertical
android:layout_below android:layout_alignParentStart android:layout_centerHorizontal
android:layout_toEndOf android:layout_alignParentEnd android:layout_centerInParent
android:layout_toStartOf android:layout_alignParentBottom android:layout_alignBottom
android:layout_alignEnd android:layout_alignStart android:layout_alignTop
 LAYOUTS
Relative Layout
●
Crie uma activity RelativeLayoutActivity por meio do menu
File →New → Activity → Empty Views Activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView android:id="@+id/imgIcon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="8dp"
android:src="@mipmap/ic_launcher_round"/>

<CheckBox android:id="@+id/cbEnable"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"/>
... activity_relative_layout.xml
 LAYOUTS
Relative Layout
●
Crie uma activity RelativeLayoutActivity por meio do menu
File →New → Activity → Empty Views Activity:
...
<TextView android:id="@+id/txtTitulo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toStartOf="@id/cbEnable"
android:layout_toEndOf="@id/imgIcon"
android:text="Título"/>

<TextView android:id="@+id/txtSubtitulo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtTitulo"
android:layout_toEndOf="@id/imgIcon"
android:text="Subtítulo"/>

</RelativeLayout> activity_relative_layout.xml
 LAYOUTS
Relative Layout
●
Agora vamos alterar a activity_main.xml conforme a seguir:
...
<Button
android:id="@+id/btn_relative_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Relative Layout"
android:layout_margin="16dp"/>

</LinearLayout> activity_main.xml
 LAYOUTS
Relative Layout
●
Agora vamos alterar a MainActivity.java conforme a seguir:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
...
Button btnRelativeLayout = findViewById(R.id.btn_relative_layout);
btnRelativeLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(getBaseContext(), RelativeLayoutActivity.class);
startActivity(intent); //Navega para a próxima tela
}
});
}
} MainActivity.java
 LAYOUTS
Table Layout
• O Table Layout é um gerenciador de layout que organiza os
componentes na forma de tabela, útil para mostrar dados
tabulares (relatórios, formulários, etc).

• As linhas da tabela são representadas

por android.widget.TableRow, que é
uma subclasse de LinearLayout.
 LAYOUTS
Table Layout
• As linhas da tabela podem ser alteradas com:
– android:layout_span: quantas colunas o componente ocupará.
– android:stretchColumns: índices das colunas separadas por
vírgula (começa em 0) que devem ocupar o espaço disponível
(expandidas).
– android:shrinkColumns: índices das colunas separadas por
vírgula (começa em 0) que devem ficar menores, caso não
haja espaço suficiente para todos os componentes, de modo
que se o conteúdo for muito grande, seja exibido em várias
linhas.
 LAYOUTS
Table Layout
●
Crie uma activity TableLayoutActivity por meio do menu File
→ New → Activity → Empty Views Activity conforme a seguir:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:stretchColumns="1,2">
<!-- Linha 1 -->
<TableRow>
<TextView
android:text="Nome"/>
<EditText
android:layout_span="2"/>
</TableRow>
... activity_table_layout.xml
 LAYOUTS
Table Layout
●
Crie uma activity TableLayoutActivity por meio do menu File
→ New → Activity → Empty Views Activity conforme a seguir:
...
<!-- Linha 2 -->
<TableRow>
<TextView
android:text="Avisos por:"/>
<CheckBox
android:text="Telefone"/>
<CheckBox
android:text="Email"/>
</TableRow>

</TableLayout> activity_table_layout.xml
 LAYOUTS
Table Layout
●
Agora vamos alterar a MainActivity conforme a seguir:
...
<Button android:id="@+id/btn_table_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Table Layout"
android:layout_margin="16dp"/>
</LinearLayout> activity_main.xml

protected void onCreate(Bundle savedInstanceState) {

...
Button btnTableLayout = findViewById(R.id.btn_table_layout);
btnTableLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(getBaseContext(), TableLayoutActivity.class);
startActivity(intent); //Navega para a próxima tela
}
});
... MainActivity.java
 LAYOUTS
ScrollView e HorizontalScrollView
• O ScrollView e o HorizontalScrollView são utilizados quando
há muitos elementos na tela (na vertical ou horizontal) e surge a
necessidade de fazer a rolagem (scroll).

• Essas classes devem ter apenas um layout

dentro, como um LinearLayout, e conforme
o tamanho fará a rolagem ou não.
 LAYOUTS
ScrollView e HorizontalScrollView
●
Crie uma activity ScrollActivity por meio do menu File → New
→ Activity → Empty Views Activity conforme a seguir:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
...
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="Botao 1"/>
... activity_scroll.xml
 LAYOUTS
ScrollView e HorizontalScrollView
●
Crie uma activity ScrollActivity por meio do menu File → New
→ Activity → Empty Views Activity conforme a seguir:
...
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="Botao 2"/>
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="Botao 3"/>
</LinearLayout>
</ScrollView> activity_scroll.xml
 LAYOUTS
ScrollView e HorizontalScrollView
●
Agora vamos alterar a MainActivity conforme a seguir:
...
<Button android:id="@+id/btn_scroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Scroll Layout"
android:layout_margin="16dp"/>
</LinearLayout> activity_main.xml

protected void onCreate(Bundle savedInstanceState) {

...
Button btnScrollLayout = findViewById(R.id.btn_scroll);
btnScrollLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(getBaseContext(), ScrollActivity.class);
startActivity(intent); //Navega para a próxima tela
}
});
... MainActivity.java
 LAYOUTS
Linear Layout
●
Uma maneira de organizar os elementos no Linear Layout é
atribuir um peso para cada view, por meio do atributo
android:layout_weight.
●
Sempre que utilizar esse parâmetro, defina a
largura ou altura da view para 0dp, indicando
que ela deve respeitar o peso.
●
Se apenas um componente <EditText
android:layout_width=
"match_parent"
precisar ocupar o tamanho android:layout_height="0dp"
android:layout_weight="1"/>
restante, basta atribuir a ele
android:layout_weight=1 .
 LAYOUTS
Linear Layout
●
Se todos os componentes definirem um valor para o atributo
android:layout_weight, cada componente irá ocupar o espaço
proporcional na tela ao seu peso em relação à soma total dos pesos.
 LAYOUTS
Linear Layout
●
Para visualizar o efeito do android:layout_weight, altere a
activity_main.xml de forma que o peso do TextView seja 4 e
de todos os Button seja 1:
...
<TextView
...
android:layout_height="0dp"
android:layout_weight="4"/>

<Button
...
android:layout_height="0dp"
android:layout_weight="1"/>

<Button
...
android:layout_height="0dp"
android:layout_weight="1"/>
...
</LinearLayout> activity_main.xml
 LAYOUTS
Constraint Layout
• O Constraint Layout é um gerenciador de
layout que permite posicionar e dimensionar os
elementos na tela de acordo com os limites do
layout pai ou dos outros componentes (top, start,
end, bottom).

• Esses limites são as constraints (restrições ou

limitações), que representam uma conexão ou
alinhamento em relação à outra view, o layout
parent ou mesmo uma linha-guia invisível.

• * Foi lançado em 2016 e se tornou o gerenciador

de layout padrão do Android
 LAYOUTS
Constraint Layout
• Cada elemento deve ter pelo menos uma constraint horizontal
e uma vertical.

• A lista de restrições possíveis é dada a seguir:

layout_constraintLeft_toLeftOf layout_constraintTop_toTopOf
layout_constraintLeft_toRightOf layout_constraintTop_toBottomOf
layout_constraintRight_toLeftOf layout_constraintBottom_toBottomOf
layout_constraintRight_toRightOf layout_constraintBottom_toTopOf
layout_constraintStart_toStartOf layout_constraintEnd_toEndOf
layout_constraintStart_toEndOf layout_constraintEnd_toStartOf
layout_constraintBaseline_toBaselineOf
 LAYOUTS
Constraint Layout
●
Iremos criar uma tela conforme a figura a seguir. Para isso
crie uma activity ConstraintLayoutActivity por meio do menu
File →New → Activity → Empty Views Activity

●
Utilizando a paleta de Widgets, arraste
inicialmente para a tela 3 Buttons e uma
ImageView, selecionando a imagem
backgrounds/scenic na caixa de diálogo
e ajustando as dimensçoes da imagem.
 LAYOUTS
Constraint Layout
• As constraints são referenciadas pelo id dos elementos ou o parent, e podem ser
especificadas pelo código ou no editor visual (crie uma activity
ConstraintLayoutActivity):
<ImageView android:id="@+id/imageView"
android:layout_width="100dp" TextView
android:layout_height="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/alex_felipe" />

<TextView android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toTopOf="parent" />
• As dimensões no Constraint Layout podem ser especificadas usando wrap_content, 0
dp (equivale a match_parent) ou uma dimensão fixa (123 dp)
 LAYOUTS
Constraint Layout
• Quando o componente está ancorado nas
duas extremidades verticais ou horizontais,
ficará centralizado.

• Para que ele fique próximo a uma das

extremidades, podemos utilizar
app:layout_constraintVertical_bias ou
app:layout_constraintHorizontal_bias, ou
ainda o slider das propriedades de
tamanho.
 LAYOUTS
Constraint Layout
• Quando os elementos formam uma referência cruzada (A à
esquerda de B, B à direita de A e à esquerda de B, etc), temos
uma chain, que pode ser tanto vertical quanto horizontal

• Para formar uma chain, adicione 3 botões na tela, selecione-os,

clique com o botão direito e selecione Chains →
Create horizontal/vertical chain
 LAYOUTS
Constraint Layout
• A tipo da chain será controlada pelo parâmetro
app:layout_constraintHorizontal_chainStyle ou
app:layout_constraintVertical_chainStyle, que estará em apenas um
dos componentes e pode ser:
– spread: componentes distribuídos
uniformemente (padrão)
– spread_inside: similar ao anterior, mas o
primeiro e último componentes ficam
junto à borda
– packed: componentes juntos e centralizados
 LAYOUTS
Constraint Layout
• Podemos ainda criar uma weight chain, com comportamento similar ao
Linear Layout com pesos.

• Para isso, devemos:

1. Selecionar spread na propriedade
app:layout_constraintHorizontal_chainStyle (cadeia horizontal)
ou app:layout_constraintVertical_chainStyle (cadeia vertical)
2. Definir a largura ou altura de cada componente como 0dp
3. Definir o peso de cada componente com as propriedades
app:layout_constraintHorizontal_weight para cadeia horizontal
ou app:layout_constraintVertical_weight para cadeia vertical
 LAYOUTS
Constraint Layout
• Exemplo de weight chain:
<Button
android:id="@+id/button"
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
… />
<Button
android:id="@+id/button"
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="2"
… />
<Button
android:id="@+id/button"
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
… />
 LAYOUTS
Constraint Layout
• Nem sempre posicionar os elementos em relação à outros, às
bordas, ou ainda utilizar chains é suficiente.

• Nestes casos, podemos criar guidelines, que são linhas

(horizontais ou verticais), onde os componentes podem se
posicionar, mas não aparecem em tempo de execução.

• Para adicionar uma guideline, clique com

o botão direito na tela e selecione
Add Helpers → Add Vertical/Horizontal
uideline
 LAYOUTS
Constraint Layout
• Podemos mudar o posicionamento relativo da Guideline (para
cima/direita, para baixo/esquerda ou percentual) clicando sobre
a seta, ou atribuindo valor a um dos parâmetros (apenas um):
– app:layout_constraintGuide_begin
– app:layout_constraintGuide_end
– app:layout_constraintGuide_percent
 LAYOUTS
Constraint Layout
• Como exemplo, crie uma horizontal guideline e um botão
conforme abaixo (faça utilizando apenas a tela Design):
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<Button
android:id="@+id/buttonGL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@+id/guideline2"/>
 TRABALHO 2
App Alcool ou Gasolina
• Os dados na tela não podem ser perdidos ao rotacionar o
aparelho
• Uma tela inicial (utilize apenas Linear Layout) para digitar o
valor do litro da gasolina e do álcool. Deve haver um botão
para a próxima tela, o título do app em verde e logo abaixo
uma figura/ícone ilustrativa (relacionada a preço)
• Uma segunda tela (Utilize apenas Table Layout) para digitar
o consumo (km/l) do veículo utilizando gasolina e álcool.
Deve haver um botão para a próxima tela, um botão para a
tela anterior e uma figura/ícone ilustrativa (relacionada a
combustível/consumo)
 TRABALHO 2
App Alcool ou Gasolina
• Uma terceira tela (utilize um ScrollView com um Constraint
Layout) para exibir o resultado, mostrando os dados
digitados nas telas anteriores, o valor gasto por km para o
álcool e para a gasolina, e uma indicação de qual o
combustível deve ser escolhido utilizando uma
imagem/ícone ilustrativo. Deve haver um botão para
retornar à tela inicial
• Prazo: 2 semanas
• Valor: 15 pontos
 Conceitos Iniciais

Agora Sabemos
Qual o layout mais flexível para criar apps
modernos?

60
 PONTOS CHAVES
• Conhecer os principais componentes de tela (Widget e Layoyt)
• Saber utilizar o Editor Visual do Android Studio
• Entender as propriedades layout_width,layout_height, layout_weight, layout_margin e padding.
●
Entender a diferença entre layout_gravity e gravity
●
Saber utilizar os principais gerenciadores de layouts
●
Entender a diferença entre as unidades px, dp e sp
●
Saber referenciar as cores utilizando a componente alfa + RGB
●
Saber utilizar o componente ImageView
●
Saber utilizar guidelines e chains no ConstraintLayout

• Referências complementares
Android Guide: Layouts
DevMedia: Técnicas de Layout
61
62