domingo, 19 de junho de 2011

Incluindo Desenho em uma App no Eclipse para Android

Olá estou tentando criar uma piramide alimentar interativa no Android, para minha App, o Guia Nutricional, vou fazer um pequeno tutorial aqui para vocês acompanharem como fiz, vamos lá, primeiramente desenhei uma piramide alimentar básica no Corel Draw, e depois dividi ela em várias partes para tentar desenhar na tela do Android posicionando os ImageButton nos locais corretos, para poder acessar os toques e exibir a mensagem e também mostrar melhor as divisões.
Bom vamos lá a primeira parte foi o desenho da piramide de alimentos no Corel Draw:

Image App Guia Nutricional Android

Depois exportei as partes para o projeto e no projeto posicionei os ImageButton assim:

Imagem App Guia Nutricional no Eclipse

Depois coloque as devidas imagens em cada ImageButton correspondente, e emulei, veja:


Imagem Emulador App Guia Nutricional no Android

Bem o que falta agora é o código XML, que segue abaixo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:background="#00AFEF"
    >
<ImageButton
android:id="@+id/ImageTopo"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"

/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_gravity="center_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
<ImageButton
android:id="@+id/ImageSubEsquerda"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"

/>
<ImageButton
android:id="@+id/ImageSubDireita"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"

/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_gravity="center_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
<ImageButton
android:id="@+id/ImageSobEsquerda"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"

/>
<ImageButton
android:id="@+id/ImageSobDireita"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"

/>
</LinearLayout>

<ImageButton
android:id="@+id/ImageBase"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"

/>

</LinearLayout>




Espero que gostem do tutorial, só hoje, domingo tive tempo de cria-lo, espero escrever mais e mais, só falta tempo, e conhecimento, pois estou caminhando no desenvolvimento Android, e trabalhando muito no Guia Nutricional, que brevemente deve ter mais uma atualização, que além da piramide alimentar terá mais conteúdos,
obrigado a todos, Thiago.

0 comentários:

Postar um comentário