Android Criao da

interface em XML
Professor: Eduardo Habib
E-mail: eduardo.maia@prof.unibh.br
Introduo
Desenvolver o primeiro programa do Android que tem uma
interface com comandos
Primeira aplicao permite mudar o telefone para silencioso
com um simples toque
Simples, mas resolve um problema real.
Passo a passo
Necessrio criar a nova aplicao no Eclipse com os dados
abaixo. Aps preencher com os dados abaixo crie o projeto
com os demais valores marcados com o valor padro:


Configurao Valor
Application
Name
Modo Silencioso
Project Name Modo Silencioso
Package name topicos.exercicios.modosilencioso
Minimum
required SDK
API 10: Android 2.3.3
Target SDK API 10: Android 2.3.3
Compile With API 10: Android 2.3.3
Theme None
Criao da interface
Aps criao no Eclipse, necessrio criar interface
Aplicao ser simples
nico boto no centro da tela.
Uma imagem indicar se o telefone est em modo silencioso ou
no.
Criao da interface
Utilizao do arquivo XML
Todos os arquivos de layout esto armazenados em res/layout
Ao criar o projeto ele criou um arquivo de layout padro, conforme abaixo:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world" />

</RelativeLayout>
Criao da interface
Entendendo o arquivo activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
RelativeLayout um container para outros items

Criao da interface
Views
So blocos bsicos para os componentes de interface. O cdigo
abaixo mostra o TextView, responsvel por mostrar o texto na tela.

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world" />
Uma view ocupa um espao retangular onde os elementos so
exibidos na tela.
Ao fim de tudo, tm-se o a tag de fechamento para o RelativeLayout
</RelativeLayout >
Criao da interface
Layouts mais comumente utilizados
LinearLayout
Organiza seus filhos em uma nica linha
RelativeLayout
Posio dos seus filhos pode ser feita de forma relativa
FrameLayout
Bloqueia uma rea da tela para mostrar um nico item
Pode-se adicionar vrios filhos ao FrameLayout,
so organizados em pilha, com o mais recente exibido
primeiro no canto superior esquerdo.

TableLayout
Organiza os filhos em linhas e colunas.
Etc.
Criao da interface
Layout grfico tem limitaes
Mas mostra uma prvia do layout
Criao da interface
Eclipse permite visualizar as propriedades de determinada view
Selecione Window -> Show View -> Other.
Escolha Properties (uma aba ser exibida)
Atributos do XML:
Layout Descrio
xmlns:android=... Referencia o namespace que voc ir utilizar
para referenciar parte da SDK Android.
xmlns:tools= ... Analisa o cdigo em busca de problemas
estruturais (Otimizaes, namespace no
utilizado, desempenho, segurana, etc).
android:layout_width=match_parent Informa a view que ela deve ocupar todo o
espao horizontal possvel.
android:layout_height=match_parent Informa a view que ela deve ocupar todo o
espao vertical possvel.
tools:context=...> Declara a Activity inicial do projeto
Trabalhando com views
Views so os blocos bsicos para a construo de interfaces no
Android
Antes de uma view ser apresentada na tela, algumas configuraes
tm que ser realizadas.
No exemplo anterior os valores de layout_height e layout_width
foram preenchidos com o valor match_parent
Outro valor comum wrap_content
Informa que deve ocupar apenas o espao necessrio.
No informar valores iniciais para layout_width ou layout_height
implica em erros ao iniciar a aplicao.
Para verses inferiores ao Android 2.2, ao invs de match_parent utilizava-
se fill_parent.
fill_parent continua funcionando.
Como adicionar uma imagem
aplicao?
A primeira coisa que se adiciona em um programa a imagem
Coloque as imagens que voc ir utilizar no diretrio
res/drawable-mdpi
Note que o arquivo R.java foi regerado e contm as referncias
das imagens adicionadas.
Arquivo activity_main.xml deve ser editado para exibir as
imagens.

Como adicionar uma imagem
aplicao?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<ImageView
android:id="@+id/phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/phone_on"/>
</RelativeLayout>
Como adicionar uma imagem
aplicao?
android:id=@+id/phone_icon: Identifica o id para a view no
Android . por esse id que a imagem ser referenciada dentro
do cdigo JAVA.
(http://developer.android.com/guide/topics/ui/declaring-
layout.html)
android:layout_centerHorizontal="true e
android:layout_centerVertical="true: Informa que a imagem
est centralizada horizontalmente e verticalmente. Podem ser
substitudos por android:layout_centerInParent="true"
src=@drawable/phone_on: Configura a imagem que deve
ser exibida na tela.

Criando um cone para a
aplicao
Telas de resoluo diferentes exigem cones de tamanhos
diferentes.
A tabela abaixo resume isso:






Aps desenvolvido o cone, basta utiliz-lo.


Tamanho da tela Tamanho do cone
Low-density screen (ldpi) 36 x 36 px
Medium-density screen (mdpi) 48 x 48 px
High-density screen (hdpi) 72 x 72 px
Extra High-density (xhdpi) 96 x 96 px
Criando um cone para a
aplicao
IMPORTANTE:
necessrio pensar em resolues diferentes
Importante criar as 3 resolues diferentes do cone
Em
http://d.android.com/guide/practices/ui_guidelines/icon_design.
html so dados mais detalhes de como fazer um bom cone.
E se o cone for colocado apenas em um dos diretrios?
Em outras resolues ser exibido o cone padro.
Criao de um boto
necessrio criar um boto para mudar o telefone para o modo
silencioso.
Para adicionar um boto, adicione o cdigo abaixo aps o ImageView
<Button
android:id="@+id/mudarEstado"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Mudar para o modo silencioso"/>
Repare que o boto ser acionado pelo id mudarEstado.
Nesse momento o boto ainda no faz nada.
Wrap_content informa que o boto deve ocupar apenas o espao
necessrio.
possvel ainda mudar a cor de fundo.
Para o exemplo, deve ser adicionada a tag android:background=#ffffff
em RelativeLayout
Ff0000,por exemplo, seria vermelho
Layout final
Aps as modificaes o arquivo activity_main.xml ficou assim:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context=".MainActivity" >

<ImageView
android:id="@+id/phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/phone_on"/>

<Button
android:id="@+id/mudarEstado"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Mudar para o modo silencioso"/>
</RelativeLayout>
Referncias
Android Application Development For Dummies Donn Felker
Google Aprenda a criar aplicaes para dispositivos mveis
com o Android SDK 2 Edio - Ricardo R. Lecheta
Site Android Developers:
http://developer.android.com/index.html
Android Wireless Application Development - Shane Conder e
Lauren Darcey