Está en la página 1de 16

GUI en aplicaciones Android

DESARROLLO DE
APLICACIONES MOVILES
EN ANDROID

Crear proyecto Android


y su Interfaz Grfica de usuario

Ing. Juan Vera Castillo

Pgina 1

GUI en aplicaciones Android

CREAR PROYECTO ANDROID Y SU INTERFAZ


Ya hemos visto como crear una interface de usuario con las herramientas
visuales que brinda Android. Ahora crearemos una interface mediante la
escritura de cdigo dentro de la clase Activity.
Crear el proyecto proyCodigo :

Escriba como nombre


de paquete :
auto.paq.codigo

Ing. Juan Vera Castillo

Pgina 2

GUI en aplicaciones Android


y como nombre de
Activity
CodigoActivity
Luego clic en el botn
Finish

Asi ya tenemos el proyecto creado, abra las carpetas del proyecto como se
muestra y haga visible la clase Codigoactivity :

Ejecute el proyecto y vea el efecto del mtodo


setContentView(R.layout.main) :

Ing. Juan Vera Castillo

Pgina 3

GUI en aplicaciones Android


El mensaje que se observa se debe a que en el main.xml, existe un TextView,
el cual presenta en su tercer atributo(android:text), una variable de nombre
hello :

Esta variable hello, est definida en el archivo strings.xml. Abra este archivo,
tal como se muestra y seleccione hello(String), entonces observar lo
siguiente:

Que es el texto
que aparece en la
ejecucin:

Ing. Juan Vera Castillo

Pgina 4

GUI en aplicaciones Android


En este punto, para crear interface grafica solo por cdigo, procederemos de la
siguiente manera:
Abra
el
Activity
y
convierta
en
comentario
setContentView(R.layout.main), tal como se muestra :

el

mtodo

Y aada las siguientes tres lneas, no olvidndose de colocar el import de la


librera widget para usar la clase TextView, tal como a continuacin se muestra
:

Ejecute el proyecto y observar :

Ing. Juan Vera Castillo

Pgina 5

GUI en aplicaciones Android

CREAR INTERFAZ DE USUARIO CON XML


En este parte aprenderemos como
crear interface de usuario,
trabajando directamente sobre el
archivo main.xml :

Pero antes, debemos regresar al Activity y eliminar las tres ltimas lneas y
adems quitar el comentario (//)

Hecho esto, ejecutar nuevamente y obtendr como mensaje : Hello World,


CodigoActivity, es decir el mensaje original. Ahora como algo adicional,
compruebe que pasa si cambia el mensaje en el archivo strings.xml

Por ejemplo aada al final del mensaje, la palabra cambiado y entonces grabe
y ejecute y observe el efecto del cambio.

Ing. Juan Vera Castillo

Pgina 6

GUI en aplicaciones Android


Finalmente vamos a colocar cdigo en el archivo main.xml, tal como se ve
abajo, aada dos TextView con sus atributos y valores indicados:

Los textos adicionales son : Trujillo capital de la primavera y donde floreci


la cultura Mochica
Entonces proceda a ejecutar y obtendr la siguiente salida :

Explique porque los dos textos salen centrados.


,

Oberve tambin como luce la pestaa Graphical Layout del main.xml

Ing. Juan Vera Castillo

Pgina 7

GUI en aplicaciones Android

fill_parent
wrap_content

DIFERENCIA ENTRE

(estudiando el atributo

layout_width)

wrap_content
El componente se mostrar solo lo suficientemente ancho, como para dar
cabida al texto que ira sobre l.
<Button
android:id="@+id/btnButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Boton W_C"/>

fill_parent
El componente se mostrar tan ancho como el ancho del contenedor que lo
soporta.
<Button
android:id="@+id/btnButton2"
android:layout_width="fill_parent"

Ing. Juan Vera Castillo

Pgina 8

GUI en aplicaciones Android


android:layout_height="wrap_content"
android:text="Boton F_P"/>

Como ejercicio crear otro proyecto y probar el fill_parent y el wrap_content,


con el atributo layout_height

EJERCICIO EN MODO VISUAL


Crear un nuevo proyecto (proyVistas), un paquete (auto.paq.vistas) y un
activity (VistasActivity)
Abrir el archivo main.xml
Desde la paleta de componentes (lado izquierdo) arrastrar los siguientes
componentes :
ToggleButton, CheckBox, ProgressBar y RatingBar

Ahora Clic en el botn Set Horizontal Orientation

Ing. Juan Vera Castillo

Pgina 9

GUI en aplicaciones Android

Hecho lo indicado,
note como cambia la
distribucin de
componentes . . . . .
...
ahora se

Ahora pulse el botn Set Vertical Orientation

Note como la
distribucin de
componentes
vuelve a ser
vertical

Ahora seleccione el botn

OFF
y clic en el botn

Toggle Fill Width


(cambiar a todo lo ancho)

Ing. Juan Vera Castillo

Pgina 10

GUI en aplicaciones Android

Note el efecto:

Si pulsa de nuevo Toggle Fill

Width observara que el


botn otra vez
adopta su
tamao normal :

Ahora seleccione la vista (componente) CheckBox y pulse el botn Change

Margins . . .

Aparece una ventana, donde en el campo ALL se aplicara un margen de 20


pixeles ( 20px) :

Ing. Juan Vera Castillo

Pgina 11

GUI en aplicaciones Android

Observe el margen (sangrado) que se ha creado:

Ahora con el checkbox seleccionado abrir el combo Change Gravity y


seleccionar Center Horizontal

Note como queda


centrado el
CheckBox, adems
de los mrgenes :

Bien como puede


notar, existe espacio

Ing. Juan Vera Castillo

Pgina 12

GUI en aplicaciones Android


desaprovechado en la
parte inferior de la
pantalla y
Por otro lado, en la
parte superior no
aparecen los otros
iconos de layout
(la zona que he
marcado ) :

Para que aparezcan, marque cualquiera de las vistas (por ejemplo el CheckBox)
para hacer visibles los iconos de layout :

Ahora pique el icono


Distribute Weights
Evenly a fin de
redistribuir las vistas
sobre la pantalla:

Ing. Juan Vera Castillo

Pgina 13

GUI en aplicaciones Android

Note como se han


redistribuido las vistas
para ocupar toda la
pantalla:

Otra vez amplie el botn


OFF y el checkBox,
haciendo clic en el icono
toggle fill width

Ahora vamos a trabajar con la proporcionalidad de las vistas, as seleccione el


CheckBox y haga clic en el icono Change layout Weight y asigne un peso
de 1 :

Ing. Juan Vera Castillo

Pgina 14

GUI en aplicaciones Android


Repita lo mismo para la
vista ProgressBar y
le asigna un peso de 4:

Comentarios . . . ?

PROPIEDADES
Seleccione la
vista CheckBox
y vea en la
parte inferior
del Eclipse la
barra de
propiedades:

Ing. Juan Vera Castillo

Pgina 15

GUI en aplicaciones Android

Busque la propiedad text y sustituya el valor ChewckBox por Guardar datos


del usuario

Ing. Juan Vera Castillo

Pgina 16