Sequência aula dia 09/09/2019

File > New Project

Como escolher a versão?
Help-me choose

Definindo a Activity Padrão

Depois de escolher o SDK, você escolhe uma Activity padrão para seu aplicativo.

Pense em uma Activity como uma janela em seu aplicativo que exibe o conteúdo com o qual o usuário pode
interagir. Uma Activity pode ocupar a tela inteira ou pode ser um simples pop-up.

Suas opções nesse modelo específico variam de uma Activity em branco com uma barra de ação até uma com
um MapView incorporado.

Selecione a opção Blank Activity e clique em Next.

Selecione a opção Blank Activity e clique em Next.

Para acelerar um pouco essa parte, você usará os valores padrão pré-preenchidos.
 Activity Name: Isso dá à sua Activity um nome para se referir no código. Uma classe .java será criada e
usará o conteúdo desse campo de texto para dar um nome à classe.
 Layout Name: Você definirá sua Activity em Java, mas o layout exibido para o usuário será definido em um
tipo especial de XML do Android.

Clique em Finish.

O Android Studio pode levar um tempo para criar seu projeto, pois faz um monte de operações por baixo dos panos.

Isso é tudo o que é preciso para criar um projeto no Android Studio!

UTILIZANDO O EMULADOR
O Android Studio vem com a capacidade de configurar um dispositivo Android baseado em software em seu
computador e executar aplicativos nele, navegar em sites, testar e tudo que você esperaria de um simulador. Esse
recurso é conhecido como o AVD – Android Virtual Device.

Você pode configurar vários emuladores e definir o tamanho da tela e a versão da plataforma de cada um.

Agora, vamos configurar um emulador Android em seu Android Studio.

CRIANDO UM EMULADOR

Clique em AVD Manager. É um botão do lado direito da barra de ferramentas que mostra um Android abrindo a
cabeça ao lado de um dispositivo com um display roxo.

Depois que o AVD Manager abrir, provavelmente você verá um emulador já criado e alguns detalhes sobre ele,
principalmente o tipo de emulador, a API que está sendo usada e o tipo de CPU.

Vamos criar um novo AVD para você entender o processo passo a passo.

Clique em Create Virtual Device na parte inferior esquerda para começar a configurar um novo emulador.
A primeira decisão que você precisa tomar é o tipo de dispositivo. A lista de categorias à esquerda mostra todos os
tipos de dispositivos que você pode emular.
Por enquanto, você só quer emular um dispositivo do tamanho de um celular, mas se quiser emular um
relógio Android Wear ou uma Android TV, há opções para fazer isso aqui.

Selecione o Nexus S na lista de dispositivos disponíveis para na categoria Phone e clique em Next.
Agora você está na etapa em que decide qual versão do Android o dispositivo virtual será executado. Você já terá um
ou dois disponíveis para você graças ao assistente de configuração, portanto, vamos usar um deles.

Selecione Nougat e certifique-se de que o selecionado tenha o valor x86 na coluna ABI para que o emulador seja
executado o mais rápido possível em seu computador.

Clique em Next quando terminar para avançar para a tela final.

A última tela permite confirmar suas escolhas e oferece opções para configurar algumas outras propriedades, como
nome do dispositivo, orientação de inicialização e tamanho da memória RAM.

Por enquanto, use os padrões e clique em Finish.

Executando o Aplicativo

Feche o AVD Manager para voltar para a visualização principal do Android Studio. Agora que você configurou tudo,
clique no botão Run.

Uma nova janela aparecerá, pedindo que você escolha o dispositivo no qual deseja testar seu aplicativo. Atualmente,
você não tem dispositivos em execução, por isso, selecione o Nexus S que você acabou de criar e clique em OK.

No caso de não funcionar na primeira vez ou levar vários minutos para o emulador ser iniciado corretamente, não se
preocupe, isso não é totalmente inesperado.
Parabéns! Você acabou de configurar seu ambiente de desenvolvimento Android e criar seu primeiro aplicativo.
O QUE SÃO AS VIEWS

Primeiro eu preciso explicar o que exatamente é uma View no Android. Simplificando, a View é um retângulo na tela
que mostra algum conteúdo. Ela pode ser uma imagem, um pedaço de texto, um botão ou qualquer outra coisa que o
aplicativo pode exibir. E todas as Views juntas formam o layout da interface.

Tudo o que você vê e/ou interage em seu aplicativo é chamado de interface de usuário, ou UI (do inglês, User
Interface).

Existem diferentes tipos de Views:

 Uma View que mostra algum texto é chamada de TextView
 Uma View que mostra uma imagem é chamado de ImageView
 Uma View que mostra um botão é chamado, claro, de Button

Além dessas, há muitos outros tipos de Views no Android, mas, por agora, vamos nos concentrar nesses três primeiros.

Mencionei que cada view é um retângulo na tela, mas onde estão todos os retângulos?

Bem, tecnicamente eles são invisíveis, mas vou destacá-los para você, assim poderá ver onde estão os limites de cada
retângulo.
Como você pode ver, cada aplicativo pode ser dividido em Views individuais que o compõem. Em outras palavras, as
Views são os componentes básicos que você usa para construir o layout do seu aplicativo.

DESVENDANDO O XML DAS VIEWS

Agora vamos ver mais tecnicamente como funcionam as Views. Internamente uma parte das Views são compostas
por XML, ou seja, utilizamos a sintaxe dessa tecnologia para construir nossos componentes.

Mas o que é sintaxe? Sintaxe significa regras que definem alguma coisa, nesse caso, se o XML da View está correto
ou não.

Este é o código XML para o elemento TextView.

Nós sempre temos que começar escrevendo nosso XML abrindo o elemento (tag) através da utilização de um (<),
seguido do nome do componente. Este exemplo poderia ser uma ImageView, Button, ou qualquer outra View.

Então nós temos uma lista de atributos, um por linha e no final temos (/>) fechando nossa tag.
Outra forma de fazer o fechamento da tag do elemento, é utilizar uma tag separada para o fechamento. Aqui está
o exemplo de um LinearLayout onde isso pode ser utilizado.
Você pode perceber que no meio do LinerarLayout temos dois elementos TextView. Estes são chamados de
elementos filhos dentro do LinearLayout pai.

Outra característica dos elementos XML das Views, são os textos adicionais dentro da tag que são chamados
de atributos. Os atributos são características que determinam o comportamento ou a aparência da View no Android.
 android:Text=”Ola Androideiro!”
 android:background=”@android:color/black”
 android:layout_width=”150dp”
 android:layout_height=”750dp”

Analisando os atributos mais a fundo, temos o nome do atributo do lado esquerdo. Do lado direito, temos o valor do
atributo. É importante notar que os valores devem ser colocados entre aspas como parte da sintaxe do XML.

TRABALHANDO COM VIEWS RESPONSIVAS

Um dos desafios para o desenvolvedor Android é conseguir criar layouts que se encaixam nos
vários tamanhos e resoluções diferentes de telas de dispositivos presentes no mercado. É importante que todo
aplicativo suporte o máximo de telas diferentes para que funcione, sem problemas, em vários dispositivos.

Vamos ver como isso funciona na prática.

Os retângulos desenhados abaixo representam diferentes dispositivos com o mesmo tamanho físico, mas com
diferentes resoluções.

A tela do telefone é composta de muitos pequenos quadrados, que são os Pixels. Digamos que temos uma View (um
botão, por exemplo) com o tamanho de 2 pixels de altura por 2 pixels de largura. Veja abaixo como ficaria nosso
botão em diferentes resoluções.

Não ficou legal, né? Na resolução xhdpi, fica difícil pressionar o botão de tão pequeno!
É por isso que temos a medida de Pixels Independente de Densidade (DP). Eu posso definir o meu botão com
tamanho de 2dps de altura por 2dps de largura.

Você não tem que se preocupar em fazer funcionar nas diferentes resoluções, tudo o que você precisa se lembrar é
de definir o seu tamanho utilizando a medida de DP.

AS 06 VIEWS MAIS USADAS NO ANDROID

Definir quais Views utilizar em um layout é uma parte crítica do desenvolvimento Android. Vamos dar uma olhada nas
Views mais comuns que são utilizadas na maioria dos layouts dos aplicativos.

Com apenas essas 06 opções (juntamente com os ViewGroups) é possível criar layouts extremamente bonitos e
usáveis.
 TextView – Exibe um de texto formatado
 ImageView – Exibe um uma imagem
 Button – É utilizado para e executar uma ação ao ser clicado
 ImageButton – Exibe uma imagem com comportamento de um botão
 EditText – É um campo de texto editável para a entrada de dados
 ListView – É uma lista de itens que contém outras Views

Veja abaixo um resumo das funcionalidade de cada uma e como você pode utiliza-las em seu aplicativo.
TextView
A principal utilidade do TextView é exibir o texto na tela de um aplicativo Android. Embora isso possa parecer uma
tarefa simples, a classe TextView contém uma lógica complexa que lhe permite exibir um texto formatado, hyperlinks,
números de telefone, e-mails e outras funcionalidades úteis.
1. <TextView
2. android:text="Olá Androideiro!"
3. android:background="@android:color/darker_gray"
4. android:layout_width="150dp"
5. android:layout_height="75dp" />

ImageView
Como o nome já diz, o ImageView é projetado especificamente para exibir imagens na tela. Isso pode ser usado para
a exibição de recursos armazenados no aplicativo ou para a exibição de imagens que são baixadas da internet.
1. <ImageView
2. android:src="@drawable/imagem"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"
5. android:scaleType="center"/>

Button e ImageButton
O Button é um dos controles mais básicos disponíveis em um aplicativo. Ele responde a cliques do usuário e chama
um método em seu código para que você possa responder de forma apropriada quando o usuário pressiona o botão.
O ImageButton é um combinado de um Button com uma ImageView, juntando as caracteristicas de cada um em um
só lugar.
1. <Button
2. android:layout_height="wrap_content"
3. android:layout_width="wrap_content"
4. android:text="Meu Botão"
5. android:onClick="clicar" />
1. <ImageButton
2. android:id="@+id/imageButton"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"
5. android:src="@drawable/imagem" />

EditText
O EditText é uma extensão da TextView e permite aos usuários editar/entrar o texto através de uma entrada do teclado.
1. <EditText
2. android:id="@+id/email"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"
5. android:hint="Preencha seu melhor email..."
6. android:inputType="textEmailAddress" />

ListView
A ListView é usada para exibir uma coleção de itens de forma linear em uma única coluna. Cada item individual pode
ser selecionado para a exibição de mais detalhes ou realizar uma ação relacionada a esse item.
1. <ListView xmlns:android="http://schemas.android.com/apk/res/android"
2. android:id="@+id/listview"
3. android:layout_width="match_content"
4. android:layout_height="match_content" />
PERSONALIZAÇÃO DE VIEWS E SEUS ATRIBUTOS

Essa é uma parte muito divertida e extremamente importante dentro do desenvolvimento Android, a personalização e
customização do design das nossas Views. Existem vários atributos disponíveis que podemos utilizar para melhorar o
visual e a usabilidade dos nossos layouts.

Identificando a View
A primeira coisa que devemos entender é o atributo android:id, que é responsável por identificar a View, ou seja, dar
um nome único ao componente.
1. <Button android:id="@+id/meuBotao" />

Este ID pode então ser acessado dentro do código Java.

1. Button meuBotao = (Button) findViewById(R.id.meuBotao);

TextView, EditText e Button

Cada View tem muitos atributos diferentes, que podem ser aplicados em diferentes propriedades. Certas propriedades
são compartilhadas entre muitas Views.

Tamanho da View: layout_width e layout_height

 wrap_content: Adaptar ao conteúdo da própria View
 match_parent: Adaptar a View pai

Tamanho do Texto: textSize

 Usar a medida de SP (Pixel Independente de Escala)
 Outra alternativa textAppearance

Cor do Texto: background e textColor

 Aceita hexadecimal #F1F1F1
 Nome da cor android:color/black

ImageView

As propriedades mais importantes de um ImageView são a imagem a ser utilizada, e a escala e posicionamento desta
imagem dentro da View.

Endereço da Imagem: src

 Imagens android:drawable/imagem
 XMLs de efeitos

Escala da Imagem: scaleType

 centerCrop, center e centerInside

 fitCenter, fitStart, fitEnd e fitXY
 matrix
O QUE SÃO OS ANDROID LAYOUTS (VIEWGROUP)

Como vimos neste post, nós usamos várias Views para construir os layouts dos aplicativos, porém não vimos ainda
como organizar todas essas Views de modo que o nosso design comece a tomar forma.

Para conseguir organizar as Views temos que usar os ViewGroups, que basicamente são uma estrutura que usamos
para posicionar as Views da forma que precisarmos. A relação entre o ViewGroup e as Views é a mesma que de Pai
para Filhas.

Veja abaixo um exemplo de ViewGroups. A parte em laranja representa um Android Layout Pai, enquanto as imagens
e parte azuis representam as Views Filhas.

Esse conceito de Pais e Filhas influencia diretamente no design do seu aplicativo, pois são os VIewGroups que
definem e controlam como as Views serão posicionadas de acordo com o dispositivo que está exibindo o aplicativo.

Assim como as Views, os ViewGroups também podem ser customizados alterando cor, tamanho, posicionamento
interno e espaços entre si.

Cada Android Layout tem suas particularidades e funcionam de uma forma diferente e é isso que vamos ver nos
próximos tópicos.
LINEARLAYOUT: HORIZONTAL E VERTICAL

Legal, então agora nós sabemos sobre como os ViewGroups podem conter várias Views. Cada ViewGroup Pai tem
regras específicas sobre como ele irá posicionar as Views Filhas dentro dele.

Agora, vamos ver como o LinearLayout funciona. Este ViewGroup pode posicionar as Views em uma única
coluna vertical ou horizontal.

Para definirmos qual o tipo de orientação que queremos posicionar as nossas Views dentro do LinearLayout, nós
usamos o atributo orientation. Esse atributo aceita dois valores, vertical e horizontal.

Veja um exemplo de um LinearLayout posicionando as Views de forma vertical.

1. <LinearLayout
2. xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content">
6.
7. <TextView
8. android:text="Ola Androideiro!"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:textSize="24sp" />
12.
13. <TextView
14. android:text="Bora criar apps"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
 17. android:textSize="24sp" />
18.
19. </LinearLayout>

Repare como utilizamos o atributo android:orientation passando o valor vertical para posicionar as Views uma
embaixo da outra.

Outro atributo importante do LinearLayout é o android:layout_weight, ele é responsavél por definir o peso que cada
View tem referente a distribuição dentro do LinearLayout.

Veja como fica o posicionamento das nossas Views sem utilizar o layout_weight.

Repare que as Views não ocupam totalmente o espaço disponível existente no layout, deixando o design da nossa
interface muito mal feito.

Precisamos utilizar o atributo android:layout_weight para distribuir igualmente as Views em toda a tela e assumir
mais do espaço disponível.

A utilização desse atributo depende de como vocoê esta utilizando o LinearLayout, para um layout vertical,
precisamos definir a altura igual a zero e um peso para cada uma das Views.

Caso esteja usando um layout horizontal, precisamos definir a largura igual a zero e um peso para cada uma das
Views.

Atribuindo um valor de peso para uma View é como atribuir um valor de importância. Quanto maior for o valor do peso,
mais espaço aquela View vai ocupar se houver espaço disponível no LinearLayout Pai.

Veja um XML de layout exemplo onde o ImageView tem maior peso (importância) do que os TextViews.
 1. <LinearLayout
2. xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent">
6.
7. <ImageView
8. android:src="@drawable/ocean"
9. android:layout_width="wrap_content"
10. android:layout_height="0dp"
11. android:layout_weight="1"
12. android:scaleType="centerCrop" />
13.
14. <TextView
15. android:text="Oi Androideiro!"
16. android:layout_width="match_parent"
17. android:layout_height="0dp"
18. android:layout_weight="0"
19. android:textColor="@android:color/white"
20. android:textSize="54sp"
21. android:background="#009688" />
22.
23. <TextView
24. android:text="Bora criar apps"
25. android:layout_width="match_parent"
26. android:layout_height="0dp"
27. android:layout_weight="0"
28. android:textColor="@android:color/white"
29. android:textSize="34sp"
30. android:background="#009688" />
31.
32. </LinearLayout>

Dessa forma, não importa o tamanho, resolução ou posição (retrato/paisagem) da tela do dispositivo, as Views sempre
ficarão posicionadas de acordo com a proporção que demos as elas utilizando o atributo android:layout_weight.

Em caso de dúvidas, você pode acessar a documentação dos atributos do LinearLayout.

RELATIVELAYOUT: POSICIONAMENTO RELATIVO

Até agora nós aprendemos que LinearLayout pode ter uma orientação vertical ou uma orientação horizontal. Também
aprendemos que as Views podem ter peso para aproveitar melhor o espaço no layout pai.

Agora nós vamos aprender sobre o RelativeLayout. Isso irá ajudar você a construir layouts ainda mais flexíveis.
Com o RelativeLayout, você pode posicionar as Views Filhas em relação ao Pai, como por exemplo posicionar
a View no topo ou no fim do layout. A outra opção, é posicionar as Views em relação a outras Views dentro do
mesmo RelativeLayout.

Em relação ao Layout Pai

Vamos ver primeiro como posicionar as Views Filhas em relação ao RelativeLayout Pai.

As Views Filhas dentro do RelativeLayout Pai podem ser posicionadas as bordas esquerda do Pai, superior, direita
ou inferior.

No exemplo anterior, para a ImageView, utilizamos o atributo android: layout_alignParentTop. Este atributo
determina se a View Filha estará alinhada com a borda superior do RelativeLayout Pai. Assim, os possíveis valores
são true ou false.

Se for true, então o ImageView deve ser alinhado à borda superior do RelaviteLayout Pai.

A mesma coisa se aplica a View Button, se utilizarmos o atributo android:layout_alignParentBottom, a View

será alinhada à borda inferior do RelativeLayout Pai.

Há atributos para todas as outras bordas:

 android:layout_alignParentTop=”true/false”
 android:layout_alignParentBottom=”true/false”
 android:layout_alignParentLeft=”true/false”
 android:layout_alignParentRight=”true/false”
 android:layout_centerHorizontal=”true/false”
 android:layout_centerVertical=”true/false”

Você pode misturar, combinar e usar múltiplos destes atributos juntos.

Em relação a outras Views

Ao posicionar as Views Filhas em relação a outras Views, você pode adicionar restrições a sua posição. Por exemplo,
um TextView deve estar acima de outra TextView, ou um ImageView deve ser a a esquerda de uma outra TextView.

Analisando a imagem anterior, vemos que temos várias Views posicionadas referente ao RelativeLayout Pai e outras
em relação a outras Views.

Por exemplo, nós temos o TextView (Cupcake) alinhado na borda superior do layout e o TextView (Nougat) alinhado
exatamente abaixo da View Cupcake.

Quando alinhamos uma View baseada na outra, nós usamos os IDs delas para dizer ao RelativeLayout qual View é
a referência da que você deseja posicionar.

Veja como ficaria o XML de layout do exemplo acima.

1. <RelativeLayout
2. xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent">
5.
6. <TextView
7. android:id="@+id/froyo_text_view"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:layout_alignParentBottom="true"
11. android:layout_alignParentLeft="true"
12. android:textSize="24sp"
13. android:text="Froyo" />
14.
15. <TextView
16. android:id="@+id/donut_text_view"
17. android:layout_width="wrap_content"
18. android:layout_height="wrap_content"
19. android:layout_alignParentBottom="true"
20. android:layout_above="@id/froyo_text_view"
21. android:textSize="24sp"
22. android:text="Donut" />
23.
24. <TextView
25. android:id="@+id/v1_text_view"
26. android:layout_width="wrap_content"
27. android:layout_height="wrap_content"
28. android:textSize="24sp"
29. android:text="V" />
30.
31. <TextView
32. android:id="@+id/kitkat_text_view"
33. android:layout_width="wrap_content"
34. android:layout_height="wrap_content"
35. android:layout_alignParentBottom="true"
36. android:layout_alignParentRight="true"
37. android:textSize="24sp"
38. android:text="Kitkat" />
39.
40. <TextView
41. android:id="@+id/eclair_text_view"
42. android:layout_width="wrap_content"
43. android:layout_height="wrap_content"
44. android:layout_alignParentRight="true"
45. android:layout_above="@id/kitkat_text_view"
46. android:textSize="24sp"
47. android:text="Eclair" />
48.
49. <TextView
50. android:id="@+id/cupcake_text_view"
51. android:layout_width="wrap_content"
52. android:layout_height="wrap_content"
53. android:layout_alignParentTop="true"
54. android:layout_centerHorizontal="true"
55. android:textSize="24sp"
56. android:text="Cupcake" />
57.
58. <TextView
59. android:id="@+id/nougat_text_view"
60. android:layout_width="wrap_content"
61. android:layout_height="wrap_content"
62. android:layout_centerHorizontal="true"
63. android:layout_below="@id/cupcake_text_view"
64. android:textSize="24sp"
65. android:text="Nougat" />
66.
67. <TextView
68. android:id="@+id/v2_text_view"
69. android:layout_width="wrap_content"
70. android:layout_height="wrap_content"
 71. android:layout_alignParentTop="true"
72. android:layout_alignParentRight="true"
73. android:textSize="24sp"
74. android:text="V" />
75.
76. </RelativeLayout>

Veja os principais atributos para posicionamento em relação as Views.

 android:layout_toLeftOf=”@id/id_da_view”
 android:layout_toRightOf=”@id/id_da_view”
 android:layout_above=”@id/id_da_view”
 android:layout_below=”@id/id_da_view”
Você não precisa tem memorizar todos os atributos. Basta acessar a documentação dos atributos do
RelativeLayout para pesquisar sobre o que cada atributo faz.

GRIDLAYOUT: ORGANIZAÇÃO EM GRADE

O objectivo do GridLayout é permitir posicionar as Views em uma disposição de grade. Basicamente consiste em um
número de linhas de horizontais e verticais que servem para dividir a visualização do layout em forma de “grade”,
com cada linha e coluna formando uma célula que pode, por sua vez, conter uma ou mais Views.

As linhas e colunas são definidas utilizando os atributos android:columnCount e android:rowCount. Na imagem

abaixo você pode ver como fica a configuração de android:columnCount=”3″ e android:rowCount=”5″.

Cada linha da grade é referenciada por índices, que são numeradas a partir de 0 contando de baixo para cima.
As células (linha/coluna) também tem numeração e começam em 0 a partir do da célula no canto superior esquerdo
da grade.
É possível definir em qual linha e coluna que cada View vai ficar utilizando os
atributos android:layout_column e android:layout_row, onde podemos dizer ao GridLayout a posição exata de
cada componente dentro da grade.

Posicionamento
O posicionamento de uma View dentro de uma célula pode ser definida por meio da utilização a configuração do
atibuto android:layout_gravity. O gravity de uma View pode, por exemplo, ser configurado de tal modo que
a View fique centralizada (center), preencha toda a célula (fill) ou fique posicionada em um canto específico da célula
(left/right/top/bottom).

Veja um exemplo do XML do layout.

1. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="match_parent"
3. android:layout_height="match_parent"
4. android:columnCount="2"
5. android:rowCount="2"
6. android:orientation="vertical">
7.
8. <TextView
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_gravity="fill"
12. android:background="#ccddff"
13. android:padding="20dp"
14. android:text="Item 01"
15. android:textColor="@android:color/black"
16. android:textSize="36sp" />
17.
18. <TextView
19. android:layout_width="wrap_content"
20. android:layout_height="wrap_content"
21. android:layout_gravity="fill"
22. android:background="#ccddff"
23. android:padding="20dp"
24. android:text="Item 02"
25. android:textColor="@android:color/black"
26. android:textSize="36sp" />
27.
28. <TextView
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:layout_gravity="fill"
32. android:background="#ccddff"
33. android:padding="20dp"
34. android:text="Item 03"
35. android:textColor="@android:color/black"
36. android:textSize="36sp" />
37.
38. <TextView
39. android:layout_width="wrap_content"
40. android:layout_height="wrap_content"
 41. android:layout_gravity="fill"
42. android:background="#ccddff"
43. android:padding="20dp"
44. android:text="Item 04"
45. android:textColor="@android:color/black"
46. android:textSize="36sp" />
47.
48. </GridLayout>

RowSpan e ColumnSpan

Além disso, uma View Filha também pode ser configurada para ocupar várias linhas e colunas do GridLayout
Pai através do uso dos atributos android:layout_rowSpan e android:layout_columnSpan.

Dessa forma conseguimos criar layouts mais bonitos que não parecem tanto com uma simples grade ou galeria. Veja
exemplo abaixo.

1. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="match_parent"
3. android:layout_height="match_parent"
4. android:columnCount="4"
5. android:rowCount="2"
6. android:orientation="vertical">
7.
8. <Button
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_gravity="center"
12. android:layout_columnSpan="2"
13. android:text="Botão 01"/>
14.
15. <Button
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. android:text="Botão 02"/>
 19.
20. <Button
21. android:layout_width="wrap_content"
22. android:layout_height="wrap_content"
23. android:text="Botão 03"/>
24.
25. <Button
26. android:layout_width="wrap_content"
27. android:layout_height="wrap_content"
28. android:text="Botão 04"/>
29.
30. <Button
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. andrid:text="Botão 05"/>
34.
35. <Button
36. android:layout_width="wrap_content"
37. android:layout_height="wrap_content"
38. android:text="Botão 06"/>
39.
40. <Button
41. android:layout_width="wrap_content"
42. android:layout_height="wrap_content"
43. android:text="Botão 07"/>
44. </GridLayout>

O GridLayout permite organizar as Views em um layout de grade onde um ou mais Views ficam dentro de células de
da grade. Cada View pode ser configurada para ocupar várias células tanto horizontalmente e verticalmente. A posição
e o comportamento da View dentro de uma célula é controlado através da definição das configurações de gravity.

É possível também fazer com que as Views ocupem mais colunas ou linhas utilizando o rowSpan e columnSpan.

DEFININDO O TAMANHO COM WIDTH E HEIGHT

Vamos ver agora sobre o tamanho das Views dentro do Android Layout. Sempre utilziamos os
atributos android:layout_width e android:layout_height para definir largura e altura respectivamente.

Nó temos 03 opções de configuração para definir a altura e largura das Views, podemos usar um valor fixo com a
medida em DP.

Outra opção é fazer o tamanho da Views se adequar ao conteúdo utilizando wrap_content ou fazer a View expandir
ao máximo ocupando todo espaço disponivél no layout pai utilizando match_parent.

Veja alguns exemplos de como definir o tamanho das Views em uma disposição linear pode afetar a interface do
usuário final.
No primeiro exemplo, cada View tem uma largura fixa de 150 DP. Se o conteúdo dentro de cada View é maior do
que 150 DP então você corre risco de ter corte do conteúdo.

Depois, definimos a View para ter uma largura de wrap_content. Todo o conteúdo conteúdo é mostrado, mas a largura
de cada View varia muito com base no que está dentro delas.

Por último, vamos definir a largura de cada View como match_parent, para preencher o espaço disponível do layout
pai. Agora você vê que a largura de cada View é tão grande quanto o layout pai.

Esses mesmos valores podem também ser aplicados para a altura das Views.

ESPAÇOS COM PADDING E MARGIN

Nós vimos vários tipos de layouts e cada um com sua caracteristica para posicionar as Views dentro deles. Mas as
vezes apenas os atributos do layout não são o suficiente para conseguirmos fazer alguns ajustes finos em nossa
interface.

Chegou a hora de utilizarmos mais dois atributos e acrescentar um pouco de espaço entre
as Views e ViewGroups. Esses são android:padding e android:layout_margin.

Ambos atributos recebem valores inteiros utilizando a medida de DP.

Padding

O Padding é o espaço dentro da View/ViewGroup, entre a borda e o conteúdo. Podemos adicionar esse espaço na
parte superior, inferior, nos lados direito e esquerdo. Veja abaixo os possíveis atributos para o Padding.
 android:padding=”tamanho em dp”
 android:paddingLeft=”tamanho em dp”
 android:paddingRight=”tamanho em dp”
 android:paddingTop=”tamanho em dp”
 android:paddingBottom=”tamanho em dp”

Margin

A Margin são basicamente as margens das Views/ViewGroups, entre a parte de fora e os outros elementos próximos
a View. Podemos adicionar margens na parte superior, inferior, direita e esquerda. Veja abaixo os atributos.

 android:layout_margin=”tamanho em dp”
 android:layout_marginLeft=”tamanho em dp”
 android:layout_marginRight=”tamanho em dp”
 android:layout_marginTop=”tamanho em dp”
 android:layout_marginBottom=”tamanho em dp”