Tutorial Android Customizando Componentes

1

Aviso sobre este Tutorial
Antes de iniciar a leitura deste material, veja esses avisos importantes:
Esse material NÃO PODERÁ SER DISTRIBUÍDO, em hipótese alguma, em
outros sites da Internet ou através outros processos/meios .
Essa material , em hipótese alguma, NÃO PODE SER COMERCIALIZADO
tanto pela Internet ou de forma impressa.
Se por acaso você ver este material sendo distribuído em outro site ou sendo
comercializado (sem ser pelo site oficial da apostila), por favor, entre em
contato com o autor (ver e-mail na primeira página).
2

Sobre o Autor do Tutorial
Luciano Alves da Silva é Bacharelado em Ciência da Computação pela
UNISUAM (Rio de Janeiro – RJ) e Pós-Graduado em Docência do Ensino
Superior pelo Instituto A Vez do Mestre (Universidade Cândido Mendes –
UCAM, no Rio de Janeiro). Possui conhecimento e domínio das linguagens de
programação Pascal, Java, C/C++, C#, Visual Basic, Delphi, PHP e HTML. Já
criou Ambientes de Desenvolvimento Integrado (conhecidos como IDE) como o
MakeWare (que trabalha com as linguagens Pascal, C++ e Java) e o AlgoWare
(interpretador de algoritmos).
É autor também dos seguintes livros, pela editora AGBOOK
Aprenda Passo a Passo a Programar em Android – Guia Essencial
para Desenvolvedores
Desenvolvendo Jogos com a Plataforma XNA – Guia para
Desenvolvedores.
Desenvolvendo Jogos com a Ferramenta RPG Maker VX– Guia do
Usuário.
3

Apresentação
Este material mostra passo a passo como customizar um componente, ou seja,
aplicar um novo estilo visual ao nosso componente .
Caso você, que esteja lendo este tutorial, seja iniciante em programação com
Android, recomendo antes adquirir no site oficial a “Apostila de Android
Programação Básica 6ª Edição” (em meu site www.apostilaandroid.net), para
melhor compreensão e entendimento dos comandos e instruções utilizadas
para o desenvolvimento da aplicação.
4

Tutorial Customizando um
componente (Aplicando Estilos)
A
s aplicações que desenvolvemos para a plataforma Android são
formadas pelos seus componentes (também conhecidos como
“widgets”). Cada componente possui seu estilo e visual padrão. Hoje em
dia há uma grande necessidade, pela a maioria dos programadores, em
customizar os componentes de uma aplicação para dar aquele visual “estiloso”
e “chamativo”. Neste tutorial iremos aprender como customizar os
componentes de uma aplicação Android.
O arquivo styles.xml
O “styles.xml” é um arquivo do Android responsável pelo tratamento de
aplicação de estilos à componentes de um programa. Esse arquivo fica
sempre presente dentro do diretório “values” (que fica dentro da pasta “res” de
um projeto em Android). Dentro do arquivo “styles.xml” normalmente temos a
seguinte estrutura:
5

É dentro desse arquivo que definimos nossos estilos (através de estruturas
XML) que iremos aplicar a um ou a um grupo de componentes que desejamos
personalizar.
Customizando componentes
Para o desenvolvimento do nosso sistema estarei utilizando a ferramenta
Android Developer Tools (ou simplesmente ADT). Para começarmos o nosso
aprendizado vamos criar um novo projeto dentro do ADT , de acordo com as
informações a seguir :
Application Name: AplicandoEstilos
Project Name: AplicandoEstilos
Package Name : com.example.aplicandoestilos
Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich)
Caixa de diálogo – New Android Application
6

Feito isso pressione a tecla “Next” para confirmamos as informações. Agora
avance as telas (simplesmente pressionando “Next” nas próximas telas) até
chegar na seguinte caixa de diálogo :
Caixa de diálogo – New Android Application
Agora vamos digitar as seguintes informações nos campos abaixo :
Activity Name: AplicacaoActivity
Layout Name: activity_textview_personalizado
Depois disso é só clicarmos em “Finish” para gerarmos um novo projeto.
Depois de criarmos o nosso projeto vamos alterar a estrutura de Layout da
nossa tela indo na seção “Outline” (situado no lado direito da tela) e no item
(estrutura) RelativeLayout vamos clicar com botão direito do mouse e em
seguida vamos selecionar a opção “Change Layout”, conforme você confere
em seguida :
7

Alterando a estrutura de layout
Na caixa de diálogo que será aberta, na campo “New Layout Type” vamos
escolher a opção “LinearLayout (Vertical)”, conforme você confere em seguida :
Caixa de diálogo – Change Layout
Depois disso clique em “Finish” para alterarmos a estrutura. Vejamos o
resultado:
8

Estrutura da tela alterada
Customizando uma TextView
A partir de agora iremos começar “customizando” um componente em
particular (neste caso , o componente TextView).
O componente TextView é aquele componente que funciona como uma Label
(também conhecido como “rótulo”) onde podemos exibir uma informação.
Iremos agora aprender a customizá-lo de acordo com a nossa necessidade.
Quando criamos um projeto, por padrão, temos um componente do tipo
TextView com a frase “Hello World”. Vamos alterar o texto desse componente
, com o seguinte conteúdo: “TextView de estilo padrão”. O resultado você
confere a seguir:
9

Conteúdo alterado
Agora vamos abrir o arquivo “styles.xml” para dentro de sua estrutura XML
digitarmos o seguinte código destacado em azul:
#ffffff
25sp
#00bff3
Bom , agora irei explicar passo a passo a estrutura XML adicionada acima.
Cada estilo que adicionamos possui um nome, como podemos conferir na linha
abaixo:
10

Pelo nome que atribuímos ao estilo, indicamos que ele irá pertencer a um
componente do tipo TextView (embora esse estilo possa pertencer a qualquer
tipo de componente que seja, desde que as propriedades especificadas
existam no(s) componente(s) que desejamos personalizar).
Dentro da estrutura temos os seguintes atributos :
#ffffff
25sp
#00bff3
Cada atributo acima está associado a uma determinada propriedade do
componente que queremos alterar. Dentro da primeira tag definimos um
argumento “name” que possui o conteúdo “android:textColor”. Um componente
TextView possui um atributo XML do tipo android:textColor onde através dele
modificamos a cor de texto, e essa tag possui o valor “#ffffff” que indica
que a cor do texto será totalmente branco.
Na segunda tag definimos um parâmetro “name” cujo conteúdo é
“android:textSize” , que indica que iremos modificar o tamanho do nosso texto.
O valor presente dentro dessa segunda tag é “25sp”, que indica o tamanho do
nosso texto.
Na terceira tag definimos um parâmetro “name” cujo conteúdo é
“android:background” , que indica que iremos modificar o cor de fundo do
nosso texto. O valor presente dentro dessa segunda tag é “#00bff3”, que indica
a cor de fundo de nosso texto (que é praticamente um azul claro).
Depois de alterar o arquivo “styles.xml” conforme foi solicitado acima, salve as
modificações.
Agora vamos abrir o arquivo “activity_textview_personalizado.xml” e dentro da
tela da nossa aplicação vamos arrastar um componente do tipo TextView e em
seguida altere as seguintes propriedades:
11

TextView
Propriedade
Valor
Text Texto Personalizado 1
Style @style/MyTextViewStyle1
Eis o resultado:
TextView Customizada
Ficou muito legal não é mesmo ? Vamos agora novamente dentro do arquivo
“styles.xml” para adicionarmos o seguinte código destacado em azul :
:
#fff200
30sp
#f7941d
10dp
10dp
#ffffff
20sp
#fb423e
300dp
center
12

Agora vamos voltar para o arquivo “activity_textview_personalizado.xml” e
dentro da tela da nossa aplicação vamos arrastar os seguintes componentes :
TextView
Propriedade
Valor
Text Texto Personalizado 2
Style @style/MyTextViewStyle2
TextView
Propriedade
Valor
Text Texto Personalizado 3
Style @style/MyTextViewStyle3
Eis o resultado:
Componentes customizados
Executando a nossa aplicação teremos o seguinte resultado:
13

Aplicação com componentes personalizados
Nossa pequena demonstração que criamos ficou com uma cara mais
personalizada não é mesmo ??? Isso ainda é o inicio. Iremos aprender a
customizar mais componentes para enriquecemos a aparência de nossas
aplicações Android daqui para frente.
Customizando uma EditText
Agora iremos aprender passo a passo a customizar um componente do tipo
EditText. Para isso primeiramente, vamos criar um arquivo XML dentro da
pasta “layout” chamado “edittext_personalizado.xml”.
Depois de criar o arquivo XML vamos alterar as seguintes propriedades da
estrutura LinearLayout
14

LinearLayout
Propriedade
Background
Valor
#ffe4c4
Se nós observarmos a tela de nossa aplicação, observe que ela ficou com uma
cor de fundo completamente diferente.
Agora vamos adicionar os seguintes componentes na sequencia:
TextView (Large Text)
Propriedade
Text
Valor
Digite seu nome:
EditText
Propriedade
Id
Valor
ednome
TextView (Large Text)
Propriedade
Text
Valor
Digite seu telefone:
EditText
Propriedade
Id
Valor
edtelefone
TextView (Large Text)
Propriedade
Text
Valor
Digite seu email:
15

EditText
Propriedade
Id
Valor
edemail
Eis o resultado:
Componentes inseridos
Agora vamos criar um estilo “personalizado” para o nosso componente
EditText, porém, para este exemplo, NÃO VAMOS USAR o arquivo
“styles.xml”, iremos criar um arquivo XML próprio para o nosso componente.
Vamos criar agora nosso primeiro estilo “personalizado” (em XML) para o
nosso componente EditText, para isso, vamos clicar com o botão direito do
mouse sobre o diretório “res” do nosso e em seguida selecione a opção “New” /
“Android XML File”. Feito isso será aberta a seguinte caixa de diálogo:
16

Caixa de diálogo – Android XML File
No campo “Resource Type” vamos escolher a opção “Drawable”, e em seguida
na lista “Root Elements”, vamos escolher a opção “Shape” (Forma). Feito isso,
no campo “File” vamos digitar o nome do nosso arquivo que será
“mycustomedittext1” (não precisa colocar a extensão “.xml”, isso já será feito
automaticamente). Feito isso basta clicar em “Finish” para que o arquivo seja
gerado. Vejamos o resultado:
17

Arquivo gerado com sucesso
Se observarmos acima, foi criado um diretório “drawable” para o nosso arquivo
de estilo que geramos.
Agora dentro do arquivo gerado, vamos escrever o seguinte código destacado
em azul:
18

Vou explicar agora o objeto de cada tag da estrutura acima.
A tag , que é a tag principal, indica que o que iremos criar é uma
forma. A nossa forma será um retângulo, definido através do parâmetro
“android:shape”, conforme podemos conferir no abaixo:
A tag que vem em seguida é , ela é responsável por definir a cor de
fundo do nosso componente EditText, que por padrão será “amarelo”. Veja o
código:
Logo em seguida temos a tag , que é responsável por definir o
“contorno” da nossa forma. Nós utilizamos essa tag para deixar os contornos
do nosso componente mais “arredondados”, através do parâmetro
“android:radius”. Veja o código abaixo:
Em seguida temos a tag que utilizamos para definir as bordas do
nosso componente. Aqui nessa tag definimos a cor da borda e sua largura.
Veja o código abaixo:
E por ultimo temos a tag (muito conhecida), que utilizamos para
definirmos os espaçamentos de forma geral. Eis o código da tag:
Agora vamos voltar para o arquivo “editext_personalizada.xml” para em
seguida alterarmos as seguintes propriedades dos componentes abaixo:
19

EditText (ednome)
Propriedade
Background
Valor
@drawable/mycustomedittext1
EditText (edtelefone)
Propriedade
Background
Valor
@drawable/mycustomedittext1
EditText (edemail)
Propriedade
Background
Valor
@drawable/mycustomedittext1
Eis o resultado:
Componentes alterados
Executando a nossa aplicação teremos o seguinte resultado:
20

Criando fundo gradiente
Aplicação customizada em execução
Até agora aprendemos a criar um fundo de cor única para o nosso componente
EditText. Neste tópico iremos aprender como criar um fundo no estilo
gradiente para o nosso componente.
Para começarmos, vamos clicar com o botão direto do mouse sobre a pasta
“res” e em seguida selecione a opção “New” / “Android XML File”.
Na caixa de diálogo que aparece, selecione no campo “Resource Type” a
opção “Drawable”. E em seguida na lista “Root Elements” vamos escolher a
opção “Shape”. Feito isso, no campo “File” vamos digitar o nome do nosso
arquivo que será “mycustomedittext2”. Feito isso basta clicar em “Finish” para
que o arquivo seja gerado.
Depois de o arquivo ser gerado, digite o seguinte código :
21

Se observamos o código acima, estamos usando agora um tag chamada
, que é responsável por definir uma cor de gradiente para o nosso
componente. Nessa tag informações os seguintes parâmetros:
android:startColor: Aqui definimos a cor inicial do nosso componente,
que no exemplo acima é uma cor amarela.
android:endColor: Aqui definimos a cor final do nosso componente, que
no exemplo acima é uma cor laranja.
android:angle: Aqui definimos o ângulo de ocorrência do gradiente, que
neste exemplo usamos o valor 270 (isso indica que a variação de cor
começa de cima para baixo).
Agora vamos voltar para o arquivo “edittext_personalizada.xml” para alterarmos
as propriedades dos seguintes componentes:
EditText (ednome)
Propriedade
Background
Valor
@drawable/mycustomedittext2
22

EditText (edtelefone)
Propriedade
Background
Valor
@drawable/mycustomedittext2
EditText (edemail)
Propriedade
Background
Valor
@drawable/mycustomedittext2
Eis o resultado:
Componentes alterados
Vejamos o resultado da execução na figura seguinte:
23

Aplicação customizada em execução
Modificando cor de acordo com comportamento (em foco, sem foco e
pressionado)
Todos os dois exemplos de customização do componente EditText possuem
algo em comum : eles sempre mantém os componentes com cores fixas,
independente do comportamento que ocorrem neles.
É muito comum trabalharmos com cores diferentes em componente quando ele
sofre algum tipo de comportamento (como por exemplo: quando ele está em
foco, quando ele perde o foco e quando ele está pressionado).
Aqui neste exemplo vamos aprender a exibir cores diferentes para um
determinado comportamento do componente.
Cada formatação para o comportamento do componente vai estar em um
arquivo em separado (ou seja, iremos tratar 3 comportamentos, logo, teremos
três arquivos XML de formatação para cada comportamento).
24

Vamos começar criando o primeiro arquivo de formação indo no diretório “res”,
clicando com o botão direito do mouse sobre ele para logo mais selecionar a
opção “New” / “Android XML File”.
Na caixa de diálogo que aparece, selecione no campo “Resource Type” a
opção “Drawable”. E em seguida na lista “Root Elements” vamos escolher a
opção “Shape”. Feito isso, no campo “File” vamos digitar o nome do nosso
arquivo que será “mycustomedittext3_normal”. Feito isso basta clicar em
“Finish” para que o arquivo seja gerado.
Agora vamos digitar o seguinte código abaixo:
Repetindo o mesmo processo vamos criar um arquivo chamado
“mycustomedittext3_focused” com o seguinte código abaixo:
25

Agora vamos criar um arquivo chamado “mycustomedittext3_pressed” com o
seguinte código abaixo:
Agora vamos no diretório “res”, clicando com o botão direito do mouse sobre
ele para logo mais selecionar a opção “New” / “Android XML File”.
Na caixa de diálogo que aparece, selecione no campo “Resource Type” a
opção “Drawable”. E em seguida na lista “Root Elements”, agora VAI SER
DIFERENTE, vamos escolher a opção “Seletor”. Feito isso, no campo “File”
vamos digitar o nome do nosso arquivo que será “mycustomedittext3”. Feito
isso basta clicar em “Finish” para que o arquivo seja gerado.
Depois disso vamos digitar o seguinte código abaixo:
26

Irei explicar agora a estrutura que criamos agora.
Observe que agora estamos trabalhando com uma estrutura chamada
“selector” (através da tag ), que é responsável por aplicar
formatações de acordo com um comportamento do componente. Dentro da
estrutura “selector” existem três tags , onde cada uma irá executar
mediante um comportamento do componente.
A primeira tag irá aplicar a formatação do componente caso o mesmo
possua foco, através do parâmetro “android:state_focused=true”. Caso o foco
esteja presente no componente , a aplicação da formatação é executada, por
meio do parâmetro
“android:drawable=@drawable/mycustomedittext3_focused”. Veja o código :
A segunda tag irá aplicar a formatação do componente caso o mesmo
for “tocado” (pressionado), através do parâmetro “android:state_pressed=true”.
Caso o componente for tocado, a aplicação da formatação é executada, por
meio do parâmetro
“android:drawable=@drawable/mycustomedittext3_pressed”. Veja o código :
A terceira tag irá aplicar a formatação normal do componente , por meio
do parâmetro “android:drawable=@drawable/mycustomedittext3_normal”. Veja
o código :
OBS: A tag referente à formatação normal do componente sempre deve
ser a última e ser adicionada.
Voltando para o arquivo “editext_personalizada.xml” vamos realizar as
seguintes alterações nos componentes abaixo:
27

EditText (ednome)
Propriedade
Background
Valor
@drawable/mycustomedittext3
EditText (edtelefone)
Propriedade
Background
Valor
@drawable/mycustomedittext3
EditText (edemail)
Propriedade
Background
Valor
@drawable/mycustomedittext3
Eis o resultado:
Componentes alterados
Executando a aplicação , teremos o seguinte resultado abaixo:
28

Aplicação customizada em execução (foco no campo e-mail)
Customizando um Button
Neste tópico iremos aprender a como “customizar” um componente do tipo
Button em nossa aplicação. Primeiramente, dentro do diretório “layout” vamos
criar um novo arquivo XML (Android XML File) chamado
“button_personalizado.xml”.
Depois disso copie todas as imagens que acompanham este material (que
estão disponíveis na mesma página de download deste material) para dentro
do diretório “drawable-mdpi”.
Agora dentro do código XML copie e cole o código da tela:
29

android:paddingTop="10dp"
android:text="Login:"
android:textAppearance="?android:attr/textAppearanceLarge"
Feito isso teremos o seguinte resultado:
31

Tela da nossa aplicação
Observe que na tela acima temos um sistema de login e senha onde temos os
botões “Entrar” e “Sair do Sistema”. Por padrão, as cores do botão são cinza,
mas, gostaria de colocá-los na cor azul. Para isso vamos criar um novo estilo
dentro do arquivo “styles.xml” chamado “botao_azul”. Dentro da estrutura XML
do arquivo “styles.xml” vamos digitar o seguinte código destacado em azul:
:
#ffffff
20sp
@drawable/botao_azul_normal
Agora vamos voltar para o arquivo “button_personalizado.xml” para em seguida
alterarmos as propriedades dos seguintes componentes:
32

Button (btentrar)
Propriedade
Style
Valor
@style/botão_azul
Button (btsair_sistema)
Propriedade
Style
Valor
@style/botão_azul
Eis o resultado:
Tela da nossa aplicação – Botões modificados
Executando a aplicação teremos o seguinte resultado:
33

Aplicação em execução
Quando clicamos no botão, se observamos, não ocorre nenhuma variação de
cor devido a mudança de comportamento (quando ele passa a ser
pressionado). Vamos fazer agora que o botão mude de cor toda vez que
pressionarmos nele. Para isso vamos dentro da pasta “res” presente em seu
projeto e em seguida selecione “New” / “Android XML File”. Vamos criar um
arquivo XML chamado “botao_azul_selector.xml” dentro da pasta “drawable
(selecionando em “Resource type” a opção “Drawable”) com uma estrutura do
tipo “selector”. Feito isso vamos digitar o código em seguida:
34

Agora dentro da estrutura “botao_azul” presente no arquivo “styles.xml”, vamos
substituir o código estacado em vermelho abaixo:
#ffffff
20sp
@drawable/botao_azul_normal
Pelo seguinte código azul:
#ffffff
20sp
@drawable/botao_azul_selector
Agora execute novamente a aplicação e experimente clicar no botão para ver
se o mesmo mudou de cor quando pressionado. Veja na figura seguinte:
35

Aplicação em execução – Botão Entrar pressionado
Customizando um CheckBox e RadioButton
Neste tópico agora iremos aprender a criar um RadioButton e um CheckBox
customizados.
Para isso vamos criar um arquivo de layout XML (dentro da pasta “layout”)
chamado “radiobutton_checkbox_personalizado.xml”. Em seguida vamos
copiar e colar o seguinte código XML dentro dele:

android:layout_height="72dp"
android:src="@drawable/logo_enquete" />

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java" />

android:layout_width="wrap_content"
android:layout_height="wrap_content" >
Eis o resultado:
39

Tela da aplicação
Se nós observarmos a tela da aplicação acima, os componentes do tipo
RadioButton e CheckBox estão em sua formatação padrão. Vamos
customizar nossos componentes de acordo com os passos abaixo.
Primeiramente vamos criar dentro do diretório “drawable” um arquivo XML
chamado “checkbox_selector.xml” com o seguinte código abaixo:
40

Irei comentar o código acima. Na tag da estrutura acima nós temos
duas estruturas do tipo “item”. A primeira estrutura representada pela tag
irá executar quando a CheckBox estiver marcada, através do
parâmetro “android:state_checked=true". Vejamos o código abaixo:
A segunda estrutura representada pela tag irá executar quando a
CheckBox estiver desmarcada, através do parâmetro
“android:state_checked=false". Vejamos o código abaixo:
Agora vamos mais um arquivo XML dentro do diretório “drawable” chamado
“radiobutton_selector.xml” com o seguinte código abaixo:
Agora dentro do arquivo “styles.xml” vamos adicionar as seguintes estruturas
destacadas em azul abaixo:
:
5dp
@drawable/checkbox_selector
5dp
@drawable/radiobutton_selector
:
41

Agora vamos alterar as seguintes propriedades dos componentes abaixo:
Todas as CheckBoxs
Propriedade
Style
Layout Height
Valor
@style/MyCheckBox
34dp
Todas as RadioButtons
Propriedade
Style
Layout Height
Valor
@style/MyRadioButtons
34dp
Eis o resultado:
Tela da aplicação – Componentes Alterados
42

Executando a nossa aplicação podemos conferir o seguinte resultado:
Aplicação em Execução
Customizando uma ListView
Agora neste tópico vamos aprender a customizar uma ListView de forma a
utilizar em uma aplicação de acordo com nossas necessidades.
Diferentemente dos componentes customizados anteriormente, aqui iremos
fazer uso , além dos arquivos XML, de programação com código Java para a
aplicação da customização do componente.
Para começarmos vamos criar um arquivo XML dentro do diretório “layout”
chamado “listview_personalizada.xml”, e dentro do arquivo vamos colocar o
seguinte código XML, como segue:
43

/>

Eis o resultado:
Tela da aplicação
Aqui iremos customizar a nossa ListView de forma que o componente, aos
invés de aceitar uma linha por item de lista, irá aceitar múltiplas linhas (que
aqui no caso 2 linhas onde na primeira será mostrada o nome, e na segunda
linha será exibida o telefone , seguido do email), incluindo um ícone.
Para isso, vamos começar definindo o layout de nossa linha que irá exibir as
informações. Para isso vamos criar dentro do diretório “layout” um arquivo XML
chamado “custom_row_listview.xml” , com o seguinte código abaixo:

android:layout_height="72dp"
android:scaleType="fitXY"
android:src="@drawable/icone_contato" />
O resultado produzido pelo código acima nos dará a seguinte formatação para
a nossa linha da ListView:
Layout personalizado da linha da ListView
46

Agora vamos criar uma classe chamada ContatoInfo dentro do diretório “src”
(presente dentro do pacote “com.example.aplicandoestilos”, com o seguinte
código abaixo:
package com.example.aplicandoestilos;
public class ContatoInfo {
private String nome;
private String telefone;
private String email;
public void setNome(String n) {
nome = n;
}
public void setTelefone(String t) {
telefone = t;
}
public void setEmail(String e) {
email = e;
}
public String getNome() {
return nome;
}
public String getTelefone() {
return telefone;
}
}
public String getEmail() {
return email;
}
Essa classe será responsável por guardar e armazenar as informações que
serão exibidas na linha da ListView “personalizada”.
Dentro do mesmo pacote, vamos criar uma classe chamada
MyCustomRowBaseAdapter com o seguinte código abaixo:
package com.example.aplicandoestilos;
import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
47

import android.widget.TextView;
public class MyCustomRowBaseAdapter extends BaseAdapter {
private static ArrayList contatoInfoArrayList;
private LayoutInflater mInflater;
public MyCustomRowBaseAdapter (Context context,
ArrayList contatoInfo) {
contatoInfoArrayList = contatoInfo;
mInflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return contatoInfoArrayList.size();
}
@Override
public Object getItem(int position) {
return contatoInfoArrayList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup
parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate
(R.layout.custom_row_listview, null);
holder = new ViewHolder();
holder.txtNome = (TextView) convertView.
findViewById(R.id.txtNome);
holder.txtTelefone = (TextView) convertView.
findViewById(R.id.txtTelefone);
holder.txtEmail = (TextView) convertView.
findViewById(R.id.txtEmail);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.txtNome.
setText(contatoInfoArrayList.get(position).getNome());
48

holder.txtTelefone.
setText(contatoInfoArrayList.get(position).getTelefone());
holder.txtEmail.
setText(contatoInfoArrayList.get(position).getEmail());
}
return convertView;
static class ViewHolder {
TextView txtNome;
TextView txtTelefone;
TextView txtEmail;
}
}
Essa classe será responsável por formatar a linha da ListView utilizando como
“layout” personalizado o arquivo XML que criamos, o
“custom_row_listview.xml”, além de guardar e exibir as informações.
Para demonstrarmos o uso do componente ListView “personalizado”, vamos
digitar o seguinte código dentro do arquivo “AplicacaoActivity.java”:
package com.example.aplicandoestilos;
import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ListView;
public class AplicacaoActivity extends Activity {
ListView lstcontatos;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.listview_personalizada);
lstcontatos = (ListView) findViewById(R.id.lstcontatos);
ArrayList contatoInfoArray = new
ArrayList();
ContatoInfo cInfo = new ContatoInfo();
cInfo.setNome("Luciano Alves");
49

cInfo.setTelefone("(21) - 1111-1111");
cInfo.setEmail("lucianopascal@yahoo.com.br");
contatoInfoArray.add(cInfo);
cInfo = new ContatoInfo();
cInfo.setNome("David Soares");
cInfo.setTelefone("(21) - 2222-2222");
cInfo.setEmail("david@live.com");
contatoInfoArray.add(cInfo);
cInfo = new ContatoInfo();
cInfo.setNome("Amanda de Lima");
cInfo.setTelefone("(21) - 3333-3333");
cInfo.setEmail("amanda@gmail.com");
contatoInfoArray.add(cInfo);
lstcontatos.setAdapter(new MyCustomRowBaseAdapter(this,
contatoInfoArray));
}
}
Irei explicar agora algumas linhas de código da classe acima. Para exibir as
informações dentro da nossa ListView “personalizada” será preciso inserir as
informações dentro do componente. Para isso foi preciso criar um ArrayList
que irá guardar as informações que estarão “estruturas” dentro da classe
ContatoInfo. Veja o código abaixo:
ArrayList contatoInfoArray = new
ArrayList();
Nas instruções seguintes carregamos o nosso ArrayList com as informações a
serem exibidas na ListView, como mostra o código a seguir:
ContatoInfo cInfo = new ContatoInfo();
cInfo.setNome("Luciano Alves");
cInfo.setTelefone("(21) - 1111-1111");
cInfo.setEmail("lucianopascal@yahoo.com.br");
contatoInfoArray.add(cInfo);
:
50

Na linha seguinte carregamos o layout “personalizado” em nossa ListView por
meio do método setAdapter ,onde passamos como argumento a instância da
classe MyCustomRowBaseAdapter que será responsável por aplicar o layout
personalizado. Veja o código abaixo:
lstcontatos.setAdapter(new MyCustomRowBaseAdapter(this,
contatoInfoArray));
Executando a nossa aplicação iremos ter o seguinte resultado:
Aplicação em execução
Até agora aprendemos a exibir as informações de forma personalizada dentro
da nossa ListView, agora iremos aprender como “obter” as informações dentro
da nossa ListView personalizada.
Para isso vamos escrever o seguinte código destacado em azul em seguida
dentro do arquivo “AplicacaoActivity.java”:
51

:
contatoInfoArray.add(cInfo);
lstcontatos.setAdapter(new MyCustomRowBaseAdapter(this,
contatoInfoArray));
lstcontatos.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView a, View v, int position,
long id) {
Object obj = lstcontatos.getItemAtPosition(position);
ContatoInfo contatoInfo = (ContatoInfo) obj;
AlertDialog.Builder dialogo = new AlertDialog.
Builder(AplicacaoActivity.this);
dialogo.setTitle("Informação");
dialogo.setMessage("Nome : " + contatoInfo.getNome() + "\n" +
"Telefone : " + contatoInfo.getTelefone() + "\n" +
"Email : " + contatoInfo.getEmail());
dialogo.setNeutralButton("OK", null);
dialogo.show();
});
}
Irei explicar o código inserido acima. Nós adicionamos o evento de click da
ListView, que ocorrerá toda vez que um item da lista for selecionado, através
do método setOnItemClickListener. Dentro da estrutura do evento existe um
método chamado onItemClick que será executado toda vez que um item for
selecionado. Dentro do método temos a seguinte linha de comando:
Object obj = lstcontatos.getItemAtPosition(position);
Que irá retornar para a variável obj a instância do item selecionado, através do
método getItemAtPosition.
Como todos nós sabemos a instância por padrão é retornada como um tipo
Object, mas, ela está estrutura como um tipo de instância da classe
ContatoInfo. Para isso precisamos aplicar a “coerção” (ou cast), que é
realizada na próxima instrução, como você confere abaixo:
ContatoInfo contatoInfo = (ContatoInfo) obj;
52

Nas próximas instruções tratamos de criar a nossa caixa de diálogo, para exibir
as informações na tela.
Experimente executar agora a nossa aplicação e confira o resultado, como
demonstra a figura seguinte:
Aplicação em execução – Item selecionado
Customizando uma ProgressBar
Neste tópico iremos aprender a “customizar” um componente do tipo
ProgressBar em uma aplicação.
Para começar, vamos criar um arquivo XML chamado
“progressbar_personalizado.xml” dentro da pasta “layout” do nosso projeto.
Feito isso, vamos copiar o seguinte código XML em seguida:
53

android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >
Eis o resultado :
Tela da aplicação
55

Agora dentro do arquivo “AplicacaoActivity.java” vamos digitar o seguinte
código:
package com.example.aplicandoestilos;
import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.os.*;
public class AplicacaoActivity extends Activity {
ProgressBar barra_progresso;
TextView txtinfo_download;
Handler handleDownload;
Runnable rDownload;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.progressbar_personalizado);
txtinfo_download = (TextView) findViewById
(R.id.txtinfo_download);
barra_progresso = (ProgressBar) findViewById
(R.id.barra_progresso);
rDownload = new Runnable() {
@Override
public void run() {
barra_progresso.incrementProgressBy(5);
if(barra_progresso.getProgress() < 100)
{
txtinfo_download.
setText(barra_progresso.getProgress() + "%");
}
handleDownload.postDelayed(rDownload,100);
}
else
{
txtinfo_download.setText("Download concluído");
}
}
};
handleDownload = new Handler();
handleDownload.postDelayed(rDownload, 100);
}
56

Aplicação em Execução
Por padrão o componente ProgressBar já possui sua formatação e estilo
próprio. Vamos formatá-la de acordo com a nossa aplicação.
Para isso, vamos criar dentro do diretório “drawable” o seguinte arquivo XML :
“mycustomprogressbar.xml”. A estrutura padrão da do arquivo XML que irá
customizar nossa ProgressBar será do tipo “layer-list” (selecionar essa opção
em “Root Element”). Depois disso, vamos digitar o seguinte código abaixo:
57

Irei explicar aqui algumas linhas de código. Dentro da estrutura
existem duas tags do tipo . A primeira tag é responsável por
alterar o fundo da nossa ProgressBar através do parâmetro
“android:id=@android:id/background”. Já a segunda tag é responsável
por alterar a cor da barra de progresso (aquela barra azul que estava
“correndo” durante a execução da aplicação anterior), através do parâmetro :
“android:id=@android:id/progress”.
Agora vamos abrir o arquivo “progressar_personalizado.xml” e em seguida
selecione o componente ProgressBar (nomeado como “barra_progresso”) e
em seguida altere a seguinte propriedade:
ProgressBar (barra_progresso)
Propriedade
Progress Drawable
Valor
@drawable/mycustomprogressbar
A propriedade “Progress Drawable” é responsável por alterar o estilo do nosso
componente ProgressBar. Feito isso, teremos o seguinte resultado:
58

Componente ProgressBar customizado
Execute agora a aplicação e confira os resultados, conforme você pode ver na
figura seguinte:
Aplicação em execução – ProgressBar customizado
59

Conclusão a respeito do Tutorial
Neste tutorial aprendemos passo a passo a customizar nossos componentes
para as nossas aplicações. Os componentes customizados nesse material
foram TextView, EditText, Button, CheckBox, RadioButton, ListView e
ProgressBar.
Espero que meu tutorial lhe tenha sido útil
Um forte abraço.
60