sexta-feira, 12 de outubro de 2012

Como navegar entre telas


Olá a todos.

Até este tópico, aprendemos como instalar o Android, criar um projeto e até mesmo criar layouts bem completos. Qual o próximo passo? Até agora, em todos os exemplos vistos, foi utilizada no máximo uma tela por exemplo. O próximo passo a ser dado é aprender a navegar entre mais de uma tela em uma mesma aplicação.

Em Android, cada tela é uma classe Java que estende da classe Activity. Para navegarmos entre mais de uma Activity, devemos utilizar a classe Intent. A melhor tradução para esta palavra é "intenção". Se estamos em uma Activity e queremos ir para outra, temos que chamar uma Intent (ou seja, temos a "intenção" de mudar de uma tela para outra).

Para entender o conceito de Intent, criaremos 3 exemplos bem simples em que basicamente trafegaremos entre várias telas de uma mesma aplicação. No 1º exemplo, criaremos uma transição simples de uma tela para outra. No 2º exemplo, criaremos uma transição de uma tela para outra em que a tela de origem enviará uma variável para a tela de destino. No 3º exemplo, criaremos uma transição de uma tela para outra em que a tela de destino retornará um valor para a tela de origem. Este tópico do blog se dividirá entre esses 3 exemplos.

Transição simples de uma tela de origem para uma tela de destino
Em Android, quando criamos um projeto no Eclipse, é gerado o arquivo AndroidManifest.xml, que é um arquivo de configuração onde relatamos várias informações, como quais telas existem na aplicação, qual é a API mínima e a API máxima do Android que a aplicação poderá rodar, dentre outras. Logo, o primeiro passo a ser dado na criação do nosso exemplo é informar ao AndroidManifest.xml as telas que usaremos em nossa aplicação. Vamos supor que teremos 3 telas em nossa aplicação: Tela1Activity.java, Tela2Activity.java e Tela3Activity.java (é aconselhável, em Android, o nome de uma Activity possuir o posfixo "Activity"). Então, precisamos declará-las no arquivo AndroidManifest.xml, tal qual mostrado abaixo:



Agora que já temos as Activity's declaradas no AndroidManifest.xml, o próximo passo será criar o layout de cada uma dessas telas. De início, criaremos algo bem simples, como uma TextView sendo mostrada no centro da tela. Algo como isso:



Para cada tela, o parâmetro android:text="@string/tela1_title" será adaptado para os devidos nomes (para a Tela2 por exemplo, o parâmetro será android:text="@string/tela2_title", e com a Tela3, analogamente).

Em seguida, precisamos criar as Activity's dessas telas (as classes Java estendendo da classe Activity). Elas basicamente seguirão o modelo mostrado abaixo:



Agora que criamos todas as nossas telas, seus layout's, e as declaramos no AndroidManifest.xml, poderemos enfim lidar com as Intent's, que nos permitirão navegar dentre essas 3 telas.

Para navegarmos entre as telas, precisamos criar um dispositivo de entrada ao usuário, para que ele escolha quando essa transição entre as telas ocorrerá. O melhor dispositivo para esse caso é criar um Button que, quando clicado, mude a tela corrente da aplicação. Para isso, criaremos um Button na Tela1Activity.java e outro Button na tela Tela2Activity.java. A idéia é que a transição ocorra da Tela1 para a Tela2, e da Tela2 para a Tela3.

Modificando o layout da Tela1, teremos o seguinte conteúdo em seu arquivo XML:



E seu layout ficará como mostrado abaixo:



Agora, precisamos mapear o id do Button na nossa Activity (tal qual ensinado no tópico anterior). Modificando a estrutura do código-fonte da tela Tela1Activity.java, teremos o seguinte conteúdo:


Agora, nos restar implementar a chamada à Tela2. Para chamarmos outra tela em Android, precisamos usar uma Intent. A sintaxe de uma chamada à uma classe Intent é mostrada abaixo:


O construtor da classe Intent é: Intent intent = new Intent(packageContext, cls). O argumento "packageContext" é o contexto da Activity atual. O argumento "cls" é a classe da Activity para a qual a Activity atual deseja ir. Na imagem acima, os valores desses argumentos são, respectivamente, "Tela1Activity.this" e "Tela2Activity.class". Ou seja, temos a "intenção" de migrar da Tela1 para a Tela2.

O código-fonte completo da Tela1Activity.java é mostrado abaixo:


Agora, basta adaptarmos esse código-fonte para a Tela2Activity.java, para termos implementada a transição entre a Tela2 e a Tela3. E pronto! Teremos implementada uma aplicação com diversas telas, e com a transição entre elas.

Seguindo este tópico, iremos ver como implementar uma transição entre duas telas em que a tela de origem enviará dados para a tela de destino.

Transição de uma tela de origem para uma tela de destino com envio de informações entre elas
Na transição acima, utilizamos o método startActivity() para realizar a transição entre telas. Porém, foi uma transição simples, sem envio de informações. Desta vez, enviaremos informações de uma tela para a outra. Para realizar este tipo de tarefa, ainda utilizaremos o método startActivity(). Porém, modificaremos um pouco sua estrutura, tal qual mostrado abaixo:


A imagem acima é o conteúdo atualizado do evento onClick(). O que mudou aqui é que incluímos um Bundle na Intent que chama a próxima tela. Em Android, Bundle é a classe que armazena o que será enviado de uma tela para outra. Esta classe possui vários métodos. Na imagem acima, podemos notar o método putString(). Este método recebe a "chave" da string que passaremos para a próxima tela e o seu valor. A chave é um valor (sempre em String) que utilizaremos para obter, na tela de destino, os dados passados de uma tela para a outra.

Agora que transmitimos dados da tela de origem para a tela de destino, precisamos captar esses dados na tela de destino (neste caso, na Tela2Activity.java). Isto é feito através do método getIntent().getExtras(), que retorna um Bundle. Abaixo é mostrado o código-fonte de um método customizado que realiza essa leitura.


Algumas observações precisam ser feitas a respeito da imagem acima:

  • Temos que verificar se os extras são nulos ou não. Isso é vital, pois podemos chamar uma tela a partir de diferentes telas. Por exemplo, tanto a Tela1 como a Tela2 podem chamar a Tela3. E se a Tela1 enviar dados para a Tela3, os extras da imagem acima não serão nulos. Mas se a Tela2 não enviar dados para a Tela3, os extras da imagem acima serão nulos.
  • mTextView é um atributo da Tela2Activity.java, que nada mais é do que a TextView desta tela. Como estamos recebendo dados da tela anterior, para verificarmos se estes dados chegaram da Tela1 para a Tela2, atualizaremos esta TextView.

O código-fonte completo desta tela é mostrado abaixo:



E pronto! Já sabemos como transmitir dados de uma tela para outra. Seguindo este tópico, iremos ver como implementar uma transição entre duas telas em que a tela de destino retornará um valor para a tela de origem.

Transição de uma tela de origem para uma tela de destino, com envio de uma informações da tela de destino para a tela de origem
Nas transições acima, utilizamos o método startActivity(). Desta vez, utilizaremos outro método: startActivityForResult(). Com este método, a Activity de destino consegue retornar informações à Activity de origem. Isso é bem útil em alguns casos.

Por exemplo, suponha que temos uma Tela1, que pode chamar tanto uma Tela2 como uma Tela3  Neste caso, se a Tela1 for uma tela de cadastro de clientes, a Tela2 for uma tela de deleção de clientes, e a TelaC for uma tela de matrícula de clientes, ao abrirmos as telas 2 ou 3 e realizarmos alguma operação, seremos redirecionados à Tela1. Mas nesta tela, precisamos saber se a deleção/matrícula foi feita com sucesso ou não. Neste caso, precisamos enviar alguma informação de retorno à Tela1, a partir do término de execução das telas 2 e 3. Isso é feito com o método startActivityForResult().

Abaixo será mostrado um exemplo mais básico desta funcionalidade. A idéia básica é que uma Activity seja chamada na Tela1, e que a Activity filha chamada retorne uma informação à Tela1. A Tela1 poderá chamar tanto a Tela2 como a Tela3. Esta informação será captada pela Tela1 através do evento: protected void onActivityResult(int codigo, int resultado, Intent intent). Vamos ao nosso exemplo.

Abaixo é mostrado os layout XML das nossas telas.






E o código-fonte da Tela1Activity.java:


E agora, o código-fonte da Tela2Activity.java. A Tela3 será análoga à esta tela.



Agora, vamos executar este exemplo, para fixar bem tudo que foi falado acima. Clicando no botão "Ir para Tela 2", eis o que acontece:



Agora estamos na Tela2. Clicando no botão "Voltar à tela anterior", eis o que acontece:



Basicamente, o que aconteceu foi que a Tela1 recebeu retornou de sua Activity filha. Desta forma, conseguimos identificar qual das telas foi chamada pela Tela1.

E pronto! Já sabemos como transmitir dados de uma tela para outra de todas as maneiras possíveis. Mas antes de fecharmos este tópico, iremos falar de uma propriedade de layout muito útil em Android.

Quando um botão é clicado, o ideal seria o usuário ter um feedback do que aconteceu. Ou seja, quando o botão for clicado, ficar de uma cor. Quando for solto, ficar de outra. Desta forma, o usuário saberá se o evento de clique do botão foi acionado ou não. Vamos implementar isso em nosso exemplo.

Inicialmente, iremos implementar o arquivo XML que "anima" o botão. Vamos chamá-lo de "comportamento_botao.xml". Seu código-fonte será o seguinte:



Ou seja, quando o botão for clicado, um drawable será chamado. Quando ele não for clicado, outro drawable será chamado. Agora, precisamos entender o conteúdo dos eventos citados no arquivo acima (comportamento_pressionado.xml e comportamento_normal.xml). Abaixo é mostrado o código-fonte dos respectivos arquivos citados ao lado:





Esses arquivos possui alguns parâmetros:

  • gradient  Este parâmetro escolhe a cor que o botão terá. Ele pode ter 3 cores diferentes, germinadas. No caso do nosso exemplo, teremos um gradiente de cores idênticas (as mesmas para cada opção de gradiente) em cada drawable.
  • corners  Este parâmetro cria contornos suaves no botão. No nosso caso, teremos os cantos do botão levemente arredondados em um tamanho de 3dp.
  • stroke  Parâmetro que traça uma borda em nosso botão. Aqui, teremos uma borda preta de 1px de tamanho.

OBS.: Existem outros parâmetros além dos 3 acima. Mas eles não serão vistos neste momento.

Agora, precisamos ativar essa animação nos botões de nosso exemplo. Para fazer isto, basta incluir o parâmetro android:background="@drawable/comportamento_botao" em cada um dos botões de nosso aplicativo. Fazendo isso, teremos botões muito mais elegantes, e bem intuitivos ao usuário.

-----

E aqui terminamos mais um tópico do blog.

Caso alguém tenha uma dúvida, crítica ou sugestão, sinta-se à vontade.

quinta-feira, 11 de outubro de 2012

Interagindo com o Layout


Olá a todos.

Agora que já sabemos instalar o Android em nossas máquinas, criar uma simples aplicação e fazer layouts básicos, aprenderemos a criar layout's que interagem com o usuário. Esta interação basicamente é feita através do parâmetro android:id. Através desse parâmetro, criamos um identificador de um componente gráfico do XML, que poderá ser mapeado diretamente nas classes Java que contém os códigos-fontes da nossa aplicação.

Para usar como exemplo desta interação, foi criado um layout de teste, cujo código XML é mostrado abaixo.



E seu layout é mostrado abaixo.



Neste layout temos um EditText, um TextView e um Button. Utilizaremos todos esses componentes no nosso exemplo.

O que faremos será basicamente obter um texto digitado pelo usuário, através do EditText, e verificar se o conteúdo do EditText é nulo ou não. Se for nulo, uma mensagem será mostrada na tela, alertando o usuário. Se não for, o conteúdo do TextView será atualizado com o valor que o usuário digitou.

Para obtermos o texto digitado pelo usuário, precisamos mapear na classe Java o id de cada componente (contido no XML). Em Android, esse mapeamento é feito através do método Context.findViewById(int id), que recebe um id do XML e retorna um objeto, que nada mais é do que o componente do XML mapeado na classe Java. Como toda Activity herda da classe Context, não precisaremos invocar o contexto como prefixo do método findViewById().

Abaixo é demonstrado como mapeamos, na Activity (tela) MainActivity.java, o EditText do nosso XML:



Como o método findViewById() retorna um objeto, precisamos fazer a conversão dele para seu componente correspondente. Neste caso, EditText. Utilizando este método, poderemos mapear os demais componentes. Para manter o nosso código-fonte organizado e didático, agruparemos esses componentes de layout em um mesmo método, chamado do evento onCreate(), tal qual mostrado abaixo.



Para manter o código ainda mais didático, foram definidos Atributos em nossa tela. Atributos são variáveis que serão vistas em todo o escopo de nossa tela. Em outras palavras, são as "variáveis globais" de nossa tela. Em Android existe um padrão para indicar variáveis que são atributos, que é utilizar como prefixo da variável a letra "m". Repare que os atributos de nossa tela possuem tal prefixo.

Através do método mapeiaComponentes(), mapeamos os componentes gráficos da nossa tela. Agora, o próximo passo na especificação do nosso exemplo é verificar o conteúdo do EditText. Porém, tal verificação deve ser feita apenas quando o botão for clicado.

Em Android, quando um botão é clicado, o evento onClick() é chamado. Porém, este método precisa ser implementado. Existem duas maneiras de se implementar este método:


  • Implementando o método OnClickListener no cabeçalho da classe, tal qual mostrado abaixo:


  • Implementando o método diretamente após o botão ter sido mapeado do XML para a Activity, tal qual mostrado abaixo:

Em ambos os casos, o que for executado após o botão ser clicado deverá estar dentro do método public void onClick(View v). Então, colocaremos a verificação do conteúdo do EditText (se é nulo ou não) dentro deste evento. O código atualizado de nossa Activity ficaria assim:



A mensagem à ser mostrada na tela é invocada pelo componente Toast. Este componente mostra na tela, por um breve período (Toast.LENGTH_SHORT ou Toast.LENGTH_LONG) uma mensagem. Repare que o texto do TextView foi modificado através do método mTextView.setText(content). Esse é um dos vários métodos que um TextView possui. A maioria deles é apenas uma imagem de algum parâmetro deste componente no XML. Por exemplo, no XML temos android:text="Texto", e na Activity temos textView.setText("Texto"). No XML temos android:visibility="gone", e na Activity temos textView.setVisibility(View.GONE). E assim por diante.

Agora, iremos criar um exemplo um pouco mais complexo, que envolve uma prática bem comum em Android: mostrar ou esconder componentes da tela, dependendo do valor de um determinado parâmetro.

Para isso, será criado mais um componente em nosso layout: um TextView que só será mostrado quando o botão for clicado. Se o botão não for clicado, esse TextView permancerá oculto.

O XML gerado é mostrado abaixo:


E o layout gerado:



No XML acima, a TextView está desbloqueada apenas para demonstrar como o layout ficará no fim da execução do aplicativo. Mas para que nosso aplicativo funcione de acordo com a idéia proposta (desbloquear um componente da tela), devemos incluir o parâmetro android:visibility="gone" no LinearLayout que contém a TextView.

Agora precisamos criar esse comportamento de desbloqueio do componente em nossa Activity. Modificando seu código-fonte, teremos o seguinte:


Agora já podemos executar nosso aplicativo. Para isso, basta clicarmos em nosso projeto, com o botão direito do mouse:



E então, clicar em "Run As" e depois em "Android Application". Assim, um emulador será aberto.

OBS.: Para que você possa escolher qual emulador exato será aberto, devemos modificar a opção de execução do aplicativo. Isso pode ser feito através da opção "Run Configurations...", como mostrado abaixo.



Uma vez dentro dessa opção, precisamos clicar na aba "Target", e depois na opção "Manual".



Agora podemos executar nosso aplicativo e escolher um emulador específico. Basta escolhermos as opções "Run As" e depois em "Android Application". Agora, teremos a seguinte tela sendo mostrada:



Após escolhermos um emulador, nosso aplicativo começará a ser carregado no emulador. Após algum tempo, finalmente nosso aplicativo terá sido carregado no emulador, e teremos a seguinte situação:



Agora podemos testar a funcionalidade que implementamos. Para isso, clicaremos no botão sem ter digitado nada. Ao fazer isso, uma mensagem de alerta aparecerá na tela:



Temos que digitar algo no EditText, senão essa mensagem aparecerá. Tendo digitado um texto, clicaremos no botão. Eis o que aconteceu:



Basicamente o que aconteceu foi que quando o botão foi clicado, a propriedade Visibility do TextView foi mudada de GONE para VISIBLE. Essa é uma prática muito útil na criação de layouts. Por exemplo: em um cadastro de clientes, habilitar os campos Estado e Cidade apenas após o campo País for inicializado.

-----

Assim, chegamos ao fim de mais um tópico.

Caso alguém tenha uma dúvida, crítica ou sugestão, sinta-se à vontade.

segunda-feira, 8 de outubro de 2012

Layouts


Olá a todos.

Agora que já sabemos como se instala o Android em sua máquina, e como se cria uma aplicação simples, iremos aprender a criar layouts em Android. Em Android, layouts são criados através de arquivos XML, com uma estrutura de linguagem bem rígida e padronizada, mas também bem simples e didática, graças à excelente estrutura criada pelo Google.

Existem diversos tipos de layout em Android: FrameLayout, LinearLayout, TableLayout, dentre outros. Neste tópico, iremos abordar basicamente os 3 layouts citados neste parágrafo.

FrameLayout
O FrameLayout é o layout mais básico que existe no Android. Neste layout, podemos ter apenas uma estrutura de layout armazenada. Porém, tal estrutura pode ser outro layout. Este layout é bastante usado em layouts genéricos, como abas e telas cujo layout muda ao longo de sua execução. Usaremos esse layout como base para ensinar diversos conceitos básicos de layout em Android.

Por exemplo, em Android existem diversos tipos de componentes gráficos:

  • TextView  Mostra um texto na tela. É com certeza o componente gráfico mais usado em Android.
  • ImageView  Mostra uma imagem ou simplesmente uma janela na tela. Toda vez que você for mostrar uma imagem ou mostrar ao usuário uma janela colorida, por exemplo, esse componente será usado.
  • EditText  Os componentes acima apenas mostram informações na tela. Já o EditText obtém um texto digitado pelo usuário, que poderá ser usado para interagir com a aplicação Android.
  • Button  Este componente é um dos mais comuns em qualquer sistema de layout. Neste componente, uma ação é executada após um clique ser dado nele.
  • CheckBox  Um componente que basicamente possui dois valores: verdadeiro ou falso. Muito usado para representar configurações do sistema.
  • RadioGroup  Componente bem útil para mostrar diversas opções relacionadas na tela, onde apenas uma das opções deve ser clicada. Muito usado em perguntas de múltipla escolha.

E existem diversos parâmetros para cada componente gráfico em um layout em Android. Para entender bem como são esses parâmetros, é demonstrado abaixo o uso de alguns desses componentes em um FrameLayout. Abaixo é mostrado o código-fonte do XML que cria o layout.


E o layout gerado.



No código-fonte acima, temos alguns parâmetros, que são explicados abaixo:

  • android:layout_width="match_parent"  Na criação de layouts em Android, sempre chamamos um parâmetro usando o prefixo "android:". Neste caso, o posfixo do parâmetro é "layout_width". Este parâmetro define o tamanho da largura da tela que estamos criando. Este tamanho pode ser um tamanho fixo (em pixels, density pixels, ou outras unidades de formatação) ou em tamanhos expansíveis. Neste caso, ele está com um tamanho expansível. Existem 3 tamanhos expansíveis em Android:
    • fill_parent  Com esta opção, o tamanho do parâmetro será máximo (ou seja, o tamanho da tela corrente). Por exemplo, se a tela do celular ou tablet em que estamos mexendo é 800 x 600 pixels, se tiver em um FrameLayout o parâmetro android:layout_width="fill_parent", o tamanho da largura do layout da tela que estamos criando será de 600 pixels. A partir da API 8 (Froyo, Android 2.2) esta opção foi descontinuada, sendo seu funcionamento obtido através da opção "match_parent".
    • wrap_content  Com esta opção, o tamanho do parâmetro será mínimo, tendo como base os componentes-filhos do layout atual. Por exemplo, se definimos a largura do layout atual, com o parâmetro layout_width, da seguinte forma: android:layout_width="wrap_content", estamos sinalizando que o tamanho da largura da tela será o tamanho do componente-filho deste layout. No caso do XML que estamos analisando, seu componente-filho é um TextView. Se, por exemplo, esse TextView possui um tamanho de 20 x 20 (altura x largura) pixels, então o tamanho do layout será o mesmo. É isso que o wrap_content faz. Se tivéssemos fill_parent em seu lugar, o tamanho do layout não seria 20 x 20 pixels, mas sim os 800 x 600 pixels, equivalentes ao tamanho da tela do celular.
    • match_parent  Mantém o tamanho herdado pelo componente-pai. Caso não haja um componente-pai, o tamanho será máximo (ou seja, o tamanho da tela). Neste XML, temos um TextView e seu componente-pai, que é um FrameLayout. Se colocarmos no TextView o parâmetro android:layout_width="match_parent", a largura da tela atual será a mesma largura do FrameLayout.
  • android:layout_height="match_parent"  Este parâmetro define a altura da tela que estamos criando.
  • android:gravity="center_horizontal"  Este parâmetro define o alinhamento que os componentes deste layout terão. Neste caso, o alinhamento será central e horizontal.
  • android:text="Exemplo"  Este parâmetro define o texto do componente atual.

Bom, muitos conceitos foram explicados acima. Para entendê-los melhor, não há outro jeito senão pegando as opções que cada parâmetro dá e ir modificando e testando. Por exemplo, abaixo temos o mesmo XML acima, mas desta vez com o parâmetro android:gravity do componente TextView mudado de "center_horizontal" para "center_vertical".



E abaixo, temos o mesmo XML acima, mas desta vez com o parâmetro android:gravity do componente TextView mudado de "center_horizontal" para "center".



Vamos seguir modificando as opções dos componentes, pois somente assim entenderemos melhor o funcionamento de cada parâmetro. Abaixo temos o layout resultante quando modificamos os parâmetros android:layout_widthandroid:layout_height de "match_parent" para "wrap_content".


Com isso, o tamanho do FrameLayout se tornou o mesmo tamanho do TextView. Difícil de entender? Então vamos dar cores ao TextView:



O resultado disso é visto abaixo.



Agora ficou fácil entender que o tamanho do FrameLayout se tornou o mesmo tamanho do TextView. Agora, se modificarmos os parâmetros android:layout_widthandroid:layout_height do FrameLayout de "wrap_content" para "match_parent" (que é o valor original, exposto na 1ª imagem deste tópico), temos o seguinte resultado.



Ou seja, no exemplo anterior, o tamanho do FrameLayout tinha se tornado o mesmo tamanho do TextView, através do uso do "wrap_content". Agora, o tamanho do FrameLayout se tornou o tamanho da tela do celular, através do uso do "match_parent". O entendimento desses conceitos de tamanho expansível de tela é VITAL no desenvolvimento de qualquer layout em Android. É de suma importância dominar esses conceitos, senão a criação de layout em Android se tornará bem mais complicada.

Seguindo na explicação do FrameLayout, é mostrado abaixo o XML acima com algumas opções a mais, a fim de deixar mais elegante o texto exibido.



O resultado deste novo XML é mostrado abaixo:


Neste novo XML, mudamos a cor de fundo do FrameLayout de preto (cor padrão) para azul, através do parâmetro android:background com o valor "#2244AA", que é um azul suave. Mas por que a maior parte da tela se encontra na cor branca? Porque essa é a cor do TextView (através da opção android:background="#FFFFFF"). Como os parâmetros de tamanho de tela do FrameLayout e do TextView são "match_parent", o tamanho da tela é o tamanho do TextView. No entanto, temos um parâmetro novo no FrameLayoutandroid:padding="5dp". O que é esse parâmetro? Com esse parâmetro, é criada uma margem interna entre o FrameLayout e o TextView, de 5 dp de tamanho. O conceito de "dp" pode ser entendido aqui.

Assim, como a cor do FrameLayout é azul, e o do TextView é branco, temos um contraste na tela, que dá a impressão de que uma borda foi criada.

Seguindo a explicação, temos as opções android:textSize (tamanho do texto), android:textStyle (estilo de texto, que nesse caso é negrito), e android:textColor (cor do texto, que nesse caso é vermelho).

Agora iremos falar dos outros tipos de layout.

LinearLayout
No FrameLayout temos apenas um componente-filho. Já no LinearLayout, podemos ter vários. Este layout é indicado para casos como vários estruturas na tela, de forma linear. Neste layout temos um parâmetro que não existia no FrameLayout, android:orientation. Ele possui as opções "vertical" e "horizontal". Para demonstrar o funcionamento desse parâmetro, utilizaremos outro XML, mostrado abaixo.


Agora temos mais de um componente na tela. O resultado do XML acima é mostrado abaixo.



Ou seja, temos 2 TextView's uma embaixo da outra, na orientação vertical. Como ambos os TextView estão com os parâmetros android:layout_width="match_parent"android:layout_height="wrap_content", temos a largura com tamanho máximo, e a altura com tamanho mínimo (o tamanho do TextView). Abaixo temos a inversão desses valores, quando a orientação do LinearLayout for horizontal.


Eis o resultado desse novo XML:



Como os TextView's ficaram muito próximos, podemos dar um espaçamento entre eles. Isso é mostrado no XML abaixo:


Eis o resultado:


O que foi acrescentado agora foi o parâmetro android:layout_margin="5dp". Ele criou uma margem externa (não confunda com padding, que é uma margem interna) entre os 2 TextView's. Mas ainda assim, os textos estão muito "colados" no TextView. Então, agora, usaremos o padding para dar um espaçamento interno em seus textos.


Eis o resultado:


Para finalizar esta explicação básica sobre LinearLayout's, iremos falar do parâmetro layout_weight, uma verdadeira "mão-na-roda" em Android. Abaixo temos um novo XML.


Nele, incluímos um novo TextView, e modificamos a orientação do LinearLayout de horizontal e vertical. Porém, incluímos o parâmetro android:layout_weight="1". Esse parâmetro dá prioridade ao tamanho do TextView em que ele está setado (neste caso, no 1º TextView). Em outras palavras, ele potencializa o tamanho da largura/altura deste componente, sobrescrevendo a efetividade (tornando útil o funcionamento) dos parâmetros android:layout_widthandroid:layout_height. Assim, ele "extende" o tamanho deste TextView até onde a tamanho de tela deixar. O resultado disso pode ser visto abaixo:


E agora, o resultado quando setamos android:layout_weight="1" também no 2º TextView.


E também no 3º.


Ou seja, o parâmetro layout_weight dá "peso" pra cada componente. Como, na imagem anterior, todos estão com o mesmo peso, eles ocupam o mesmo lugar na tela. Porém, este parâmetro sobrescreve o funcionamento dos parâmetros android:layout_widthandroid:layout_height. Para finalizar a explicação sobre o layout_weight, o que acontece quando setamos todos os TextView como android:layout_weight="1", mas o 1º TextView como android:layout_weight="2"?


Ou seja, ele balanceou o peso dos componentes de acordo com o valor dos parâmetros android:layout_weight em cada TextView.

Agora, iremos aprender um pouco sobre o TableLayout.

TableLayout
Este layout comumente é usado quando precisamos listar vários componentes em uma mesma linha, ao longo de uma mesma tela. Por exemplo, criar um layout com 18 TextView's divididas 3 a 3, ao longo de 6 linhas. Para criarmos um layout assim, poderíamos usar 6 LinearLayout's, mas isso gastaria muito código-fonte no XML, além de muita memória no Android. A solução para este caso seria utilizar um TableLayout.

Para sinalizar que determinados componentes do TableLayout sejam usados em uma mesma linha, é usado o componente TableRow. Abaixo há um exemplo de seu funcionamento:


E o resultado deste XML:


Pelo exemplo acima, pode-se deduzir o efeito que um TableLayout possui. Se não fosse utilizado o componente TableRow, o TableLayout basicamente se tornaria um LinearLayout.

Para entender melhor o funcionamento do TableLayout, exercitaremos um exercício. Criaremos um layout com 6 linhas, cada uma contendo 3 TextView's de tamanho igual. O resultado terá de ser o layout abaixo.


Bom, já deu pra perceber que o código-fonte do XML gerado será enorme (passando de 250 linhas para ambos os casos), pois teremos que replicar bastante código para criar esses 18 TextView's. Uma dica para evitar esse re-trabalho de digitação é criar um style para o nosso TextView. Para criar um style, devemos criar um arquivo de XML na pasta res/values, chamado styles.xml. Neste arquivo, criaremos a forma genérica dos nossos TextView's. Abaixo é mostrado como ficaria a sintaxe desse arquivo.


Agora precisamos colocar esse novo estilo em nosso XML. Assim, teríamos como resultado um arquivo XML de layout de apenas 110 linhas, mais da metade do tamanho de linhas do XML sem o uso de styles.


-----

Com esses 3 tipos de layout podemos criar uma quantidade imensa de layout's em Android. Existem ainda outros tipos de layout (e outros componentes visuais), de cunho mais específico, que com o tempo veremos aqui no blog.

Caso alguém tenha uma dúvida, crítica ou sugestão, sinta-se à vontade.