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