PDF de programación - Introducción a la Interfaz de usuario de Android - guía lab04

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Ciclo I-2014



Guía de Laboratorio N°04

(para desarrollarse en dos semanas)

“Introducción a la Interfaz de usuario de Android”

Objetivos:

Que el estudiante:

 Aprenda la declaración e implementación de los controles básicos en la programación
Android haciendo uso de layouts para realizar el diseño de la interfaz y el uso de java para
definir el manejo de estos.

 Aprenda a Incorporar nuevos controles de forma intuitiva siguiendo la lógica de controles

de similar comportamiento.


Descripción:

Esta práctica consistirá en crear un programa que contendrá una serie de Activities que mostrarán
el uso de cada uno de los controles básicos de Android (Button, TextView, EditText, CheckBox, etc)
con su respectiva interfaz de usuario (usando XML). Cada Activity será llamada por medio de otra
Activity adicional que usaremos para mostrar un “Menú” por medio del componente ListView.



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Índice

Ciclo I-2014

Creación de Proyecto ........................................................................ 1

Menú (Activity principal) .................................................................. 3

ListView(capa de presentación o vista) ........................................................................................... 3

ListView (Aplicación o controlador) ................................................................................................ 4

Primera opción del menú(activity del botón) ................................... 7

Button (presentación o vista) .......................................................................................................... 7

Button (Aplicación o controlador) ................................................................................................... 9

Forma Alternativa de creación de Vista(xml) y controlador(java) ... 11

Segunda opción del menú(activity del TextView) ........................... 13

TextView(presentación o vista) ..................................................................................................... 13

TextView(Aplicación o controlador) .............................................................................................. 14

Tercera opción del menú(activity del EditText) .............................. 15

EditText (presentación o vista) ...................................................................................................... 15

EditText (Aplicación o controlador) .............................................................................................. 16

Cuarta opción del menú(activity del CheckBox) ............................. 18

CheckBox (presentación o vista) ................................................................................................... 18

CheckBox(Aplicación o controlador) ............................................................................................. 19

Quinta opción del menú(activity del RadioButton) ......................... 22

RadioButton(presentación o vista) ............................................................................................... 22

RadioButton(Aplicación o controlador) ........................................................................................ 23

Sexta opción del menú(activity de Galery) ..................................... 24

Gallery(presentación o vista) ........................................................................................................ 24

Gallery(Aplicación o controlador) ................................................................................................. 25

Septima opción del menú(activity de Spinner) ............................... 29

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Ciclo I-2014
Spinner(presentación o vista) ....................................................................................................... 29

Spinner(Aplicación o controlador) ................................................................................................ 30

Octava opción del menú(activity de TabWidget) ............................ 32

TabWidget(presentación o vista) .................................................................................................. 32

TabWidget(Aplicación o controlador) ........................................................................................... 33

TAREA ............................................................................................. 35

Anexos ............................................................................................ 36

2014


Página 3

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Ciclo I-2014

Creación de Proyecto
Proyecto con menú(base un activity
llamado listview que invoca otros
activities)

Crea un nuevo proyecto, desde el
menú de eclipse en File->New-
>Other, luego Android Application
Project ubicado dentro de
la
subcarpeta Android y presione el
botón Next>.

Para este ejercicio escribe como
nombre de la aplicación será
Carnet04, El proyecto será:
sv.ues.fia.carnet04 . selecciona next,
desmarca la opción Create Project in
workspace y busca las carpeta donde
almacenas tus proyectos(carnet) .



2014


Página 1

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Ciclo I-2014

.

Nuevamente de un click en Next>, varias veces hasta que aparezca la ventana de creación de
activity en Blanco, nombre a la Activity inicial como ListViewMenu, la cual Eclipse creará y
configurará automáticamente para que sea la Activity que se ejecute inicialmente en la aplicación,
y que al mismo tiempo será en la que implementaremos un menú que nos permita navegar entre
los diferentes ejemplos de los controles básicos usados en Android que realizaremos en este
mismo laboratorio.

Presione el botón Finish, observe que Eclipse forma la estructura jerarquica de las carpetas de
nuestro proyecto Android, el cual se puede observar en el extremo izquierdo como Project
Explorer.



2014


Página 2

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Menú (Activity principal)

ListView(capa de presentación o vista)


Ciclo I-2014

Dentro del Proyect Explorer navega por el directorio Carnet04->res-> y dentro de la carpeta
layout, Presiona doble clic en activity_list_view_menu.xml.

Esto para agregar un objeto lista(ListView) en la capa de presentación (layouts) como se muestra:



<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/listv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

</ListView>

Nota: Por default el wizard de eclipse genera un relativelayout y otros elementos, elimina todo el texto y
sustitúyelo por el anterior

Esta lista tiene un identificador llamado listv, este nombre lo utilizaremos en el controlador.

En la lista se tienen como atributos más relevantes los siguientes:

ATRIBUTOS RELEVANTES

DESCRIPCIÓN

android:background=""
android:entries=""

android:clickable=""



Color del layout (opcional)

Permite colocar el color de fondo a la lista
Permite agregar un Array que contenga los
componentes de la lista
Permite agregar un evento que realice un
conjunto de Acciones y esto se hace colocando
un nombre

Aunque el color de fondo del layout está bien, puedes probar cambiar la propiedad background

De la siguiente forma.

a) agrega a string.xml el color

2014


Página 3

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



b) cambia la propiedad en el graphical layout o



En la vista de edición en xml

Ciclo I-2014



Si miras oscuro el color, puedes cambiarlo por otro como:FFFFFF o 8FBC8B u otro

(Consulta sitios como este si quieres ver más opciones http://roble.pntic.mec.es/apuente/nombre.html )



establece

el

atributo

Continuando con el layout, este debe tener un elemento ListView con un identificador único que
se
en
android:id=”@+id/listv”. Este identificador nos permitirá hacer referencia a él desde otros
componentes del xml o dentro del codigo java.

establecido

android:id

mediante

ListView (Aplicación o controlador)
Ahora abra la Activity ListViewMenu.java, ubicada dentro la carpeta src->sv.ues.fia.carnet04.

Usaremos dentro de ella, la clase predeterminada ArrayAdapter como adaptador para nuestro
ListView y un diseño predefinido par amostrar la lista que ya viene incluido en el SDK de Android.



2014


Página 4

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



El código que deberá contener es el siguiente:

Ciclo I-2014

package