Você está na página 1de 4

Objetivo: Com este Laboratrio, voc ir aprender a personalizar a aplicao Ol Mundo colocando uma imagem nela.

Voc ir treinar conceitos bsicos do Android, como utilizar o editor visual de Layout (com pr visualizao) e edio direta de arquivos XML, aprender a colocar recursos externos e utiliz-los dentro da aplicao (uma imagem) e aprender tambm a utilizar o componente ImageView Passo a Passo: 1) Abra o Eclipse IDE 2) Abra o projeto ProjetoOlaMundo, criado no laboratrio 4 3) Para exibir uma imagem no sistema, ser necessrio coloc-la no diretrio de recursos drawable. Todos os recursos que estiverem neste diretrio, podero ser acessados atravs da classe R 4) Entre em um diretrio no seu computador que contenha uma imagem de sua preferncia e arraste esta imagem para o diretrio bin/res/drawable-hdpi, dentro do projeto no Eclipse e clique na opo Copy Files do Eclipse, quando esta surgir

5) Neste caso, a imagem android_home.jpg

adicionada

chama-se

6) Como estes recursos sero mapeados como um atributo Java, no possvel arrastar imagens com nomenclatura incompatvel com as declaraes de atributos da linguagem Java. 7) A partir deste momento, uma referncia a esta imagem j estar criada na classe R e j estar disponvel para que nossa aplicao a acesse (atravs da expresso Java R.drawable.android_home) ou pelo layout XML, atravs da expresso @drawable/android_home

8)

A inteno exibir a imagem que selecionamos na nossa aplicao, ento, faa o seguinte:

Mini curso Android Rodrigo Lopes Ferreira (rodrigo.lopes.ferreira@hotmail.com). Pgina 1 de 4

9) No Eclipse, abra o diretrio layout (no Package Explorer, do lado esquerdo da tela) e d um duplo clique sobre o arquivo main.xml 10) O Elipse ir abrir um editor visual de layout e um conjunto de componentes possveis do Android

11) Aqui podemos ter uma visualizao prvia de como a aplicao ficar quando for instalada no emulador (ou no dispositivo mvel real) 12) Na categoria Images & Media, localize o componente ImageView e arraste-o e solte para debaixo do texto Hello World, Principal! 13) Surgir a janela Resource Chooser para que voc selecione qual imagem deseja; esta janela ir exibir os recursos possveis. Selecione a sua imagem e clique em OK 14) Neste momento voc j ter uma visualizao de como a imagem ficar no dispositivo

Mini curso Android Rodrigo Lopes Ferreira (rodrigo.lopes.ferreira@hotmail.com). Pgina 2 de 4

15) Para ver como fica o arquivo layout.xml, sem ser pelo layout grfico, clique na parte inferior da tela, na opo main.xml

16) A propriedade que define qual recurso o <ImageView> ir exibir a android:src=@drawable/android_home

Dica: Quando colocar o caractere @ no editor do Eclipse, segure as teclas CTRL + Espao simultaneamente e ele ir exibir automaticamente uma lista de sugestes pra voc. Isto facilita e agiliza muito o trabalho.

Mini curso Android Rodrigo Lopes Ferreira (rodrigo.lopes.ferreira@hotmail.com). Pgina 3 de 4

17) Execute a aplicao no emulador, clicando com o boto direito sobre o projeto e em Run As Android Application

18) Parabns! Se tudo deu certo voc j construiu sua primeira aplicao Android

personalizando seus componentes e tambm j utilizou o editor de Layout tanto visual (visualizao prvia) quanto por edio de XML. Voc deve agora explorar mais estes recursos e testar mais componentes! Mos obra!

Mini curso Android Rodrigo Lopes Ferreira (rodrigo.lopes.ferreira@hotmail.com). Pgina 4 de 4