Documentação dos componetes principais de

layout em um projeto Android

SUMÁRIO

1. Componentes Principais ............................................................................................................... 3

2. LinearLayout ................................................................................................................................. 4

3. TextView ....................................................................................................................................... 4

4. Button ........................................................................................................................................... 5

5. Toast .............................................................................................................................................. 6

6. AutoComplete ............................................................................................................................... 8

7. CheckBox ..................................................................................................................................... 9

8. Toggle Button ............................................................................................................................. 10

9. Radio Button ............................................................................................................................... 10

10. Referências .............................................................................................................................. 12

1. Componentes Principais

Existem diversos componetes de layout para o desenvolvimeto android, dentre os quais

podemos destacar:

LinearLayout;

TextView;

Button;

Toast;

AutoComplete;

ToggleButton;

RadioButton;

CheckBox;

Nesse sentido iremos especificar cada um dos itens citados acima.

Abaixo algumas propriedades dos componentes android:

android:id: É o identificador do componente, que usaremos para chamá-lo de outro lugar.

android:layout_width: É onde você define como será a largura. Para preencher a tela inteira

você deverá usar fill_parent, caso deseja que ele se adapte ao tamanho do conteúdo, utilize

wrap_content.

android:layout_height: Similar ao android:layout_width, porém, você vai ajustar a altura do

componente, seguindo o mesmo conceito.

android:text: É a propriedade que corresponde ao texto que deverá ser exibido no

componente.

android:src: É usada para localizar a imagem que irá ser carregada no botão.

style: Local onde você define qual será o estilo do botão, no nosso caso, definimos que seria

como uma estrela.

android:orientation: Onde definimos no RadioGroup, como será distribuídos os

RadioButtons, verticalmente ou horizontalmente.

android:layout_gravity: Define a posição em que o layout será exibido, são elas: top,

bottom, left, right, center-vertical, fill-vertical, center-horizontal, fill-horizontal, center,

fill.

2. LinearLayout

Atualmente existem duas variações do LinearLayout, que são:

Horizontal: Todos os widgets adicionados dentro desse layout são colocados um do lado do

outro.

Vertical: Todos os widgets adicionados dentro desse layout são colocados um abaixo do outro.

Dentro de um LinearLayout podemos acrescentar vários widgets, como:

o Button;

o TextView;

o CheckBox;

Assim como também pode conter outro LinearLayout.

Exemplo básico de um LinearLayout:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

</LinearLayout>

fill_parent: A largura da view será igual a largura disponível no pai.

wrap_content: A largura será igual a largura do conteúdo da view. Na API nível 8, foi

rebatizada para match_parent.

3. TextView

Exibe o texto para o usuário e, opcionalmente, permite a ele editá-lo. A TextView é um editor

de texto completo, no entanto a classe básica está configurado para não permitir a edição e sim a

vizualização. O componente para a edição é EditText.

TextView no XML:

<TextView

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/textView"

android:layout_width="fill_parent"

android:layout_height="54dp"

android:text="Olá" />

TextView no emulador:

4. Button

Representa um botão que pode ser clicado pelo usuário para executar uma ação.

Exemplo de um Button na XML:

<Button

android:id="@+id/btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Clique" />

Exemplo de um Button sendo executado no emulador:

5. Toast

Um objeto Toast (do pacote android.widget) nos oferece uma forma de exibir uma pequena e

rápida mensagem aos usuários das aplicações Android. A mensagem exibida aparecerá como uma

view flutuante sobre a tela atual da aplicação e não receberá foco. O objetivo é alertar o usuário sobre

o sucesso ou fracasso de alguma atividade, aguardar alguns segundos e fazer a mensagem

desaparecer. Não aceita qualquer tipo de interação com o usuário, como um botão para ser clicado, e

seu tamanho é definido pela quantidade de espaço necessário para a mensagem.

Exemplo de um Toast, breve mensagem quando botão é clicado:

Activity;

package com.cunha.ifc;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.Toast;

public class ToastActivity extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Button button = (Button) findViewById(R.id.btn);

button.setOnClickListener(new View.OnClickListener(){

public void onClick(View v) {

Toast.makeText(ToastActivity.this,

"Bem-vindo à minha aplicação Android",

Toast.LENGTH_SHORT).show();

}

});

}

}

Arquivo XML:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/textView"

android:layout_width="fill_parent"

android:layout_height="54dp"

android:text="@string/hello" />

<Button

android:id="@+id/btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Clique" />

</LinearLayout>

Botão quando clicado:

6. AutoComplete

Uma visão de texto editável que mostra sugestões de conclusão automaticamente enquanto o

usuário está digitando. A lista de sugestões é exibida em um menu drop-down a partir do qual o

usuário pode escolher um item para substituir o conteúdo da caixa de edição que está digitando.

A lista de sugestões é obtido a partir de um adaptador de dados e aparece apenas depois de um

determinado número de caracteres definidos por “the threshold”.

O trecho de código a seguir mostra como criar uma exibição de texto que sugere vários nomes

de países, enquanto o usuário está digitando:

public class CountriesActivity extends Activity {

protected void onCreate(Bundle icicle) {

super.onCreate(icicle);

setContentView(R.layout.paises);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_dropdown_item_1line, PAISES);

AutoCompleteTextView textView = (AutoCompleteTextView)

findViewById(R.id.countries_list);

textView.setAdapter(adapter);

}

private static final String[] PAISES = new String[] {

"Brasil", "França", "Italia", "Alemanha", "Inglaterra"

};

}

7. CheckBox

Um CheckBox é um campo de seleção que pode ser tanto marcada como desmarcada.

CheckBox no XML:

<CheckBox2 android:id="@+id/checkBox1"

android:layout_width="230dp"

android:layout_height="wrap_content"

android:text="Primeira Opção" />

<CheckBox

android:id="@+id/checkBox2"

android:layout_width="230dp"

android:layout_height="wrap_content"

android:text="Segunda Opção" />

<CheckBox

android:id="@+id/checkBox3"

android:layout_width="230dp"2

android:layout_height="wrap_content"

android:text="Terceira Opção" />

8. Toggle Button

Exibe um botão com um indicador de luz, com estados de marcado e desmarcado, sendo o

texto ON ou OFF. Alguns atributos do ToggleButton no XML:

1. android: textOff: Texto que aparece no botão quando ele não estiver marcado (OFF).

2. android: textOn: Texto que aparece no botão quando ele estiver marcado (ON);

<ToggleButton

android:id="@+id/toggleButton1"

android:layout_width="118dp"

android:layout_height="wrap_content"

android:text="ToggleButton" />

9. Radio Button

É um botão de opção semelhante ao CheckBox, mas com a diferença de poder selecionar

somente uma dessas opções, enquanto em um CheckBox pode-se marcar mais de uma opção.

RadioButton no XML:

<RadioButton

android:id="@+id/radioButton1"

android:layout_width="230dp"

android:layout_height="wrap_content"

android:text="Primeira Opção" />

<RadioButton

android:id="@+id/radioButton2"

android:layout_width="230dp"

android:layout_height="wrap_content"

android:text="Segunda Opção" />

<RadioButton

android:id="@+id/radioButton3"

android:layout_width="230dp"

android:layout_height="wrap_content"

android:text="Terceira Opção" />

10. Referências

http://developer.android.com/resources/tutorials/views/hello-linearlayout.html

http://developer.android.com/reference/android/widget/ToggleButton.html

http://developer.android.com/reference/android/widget/CheckBox.html

http://devmobilebrasil.com.br/android/checkbox-android/

http://devmobilebrasil.com.br/android/toggle-button-no-android/

http://devmobilebrasil.com.br/android/trabalhando-com-a-radiobutton-no-android/

http://developer.android.com/reference/android/widget/TextView.html

http://developer.android.com/reference/android/widget/Button.html

http://developer.android.com/reference/android/widget/Toast.html

http://developer.android.com/reference/android/widget/AutoCompleteTextView.html

http://developer.android.com/resources/tutorials/views/hello-formstuff.html