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

UNIVERSIDAD DE EL SALVADOR

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


PDM115



Ciclo I-2016



Guía de Laboratorio N°02

(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-2016

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UNIVERSIDAD DE EL SALVADOR

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


PDM115



Ciclo I-2016
Spinner(presentación o vista) ....................................................................................................... 36

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

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

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

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

Tarea opcional ................................................................................ 43

Anexos ............................................................................................ 45

2016


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-2016

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á Carnet02, El proyecto será:
sv.ues.fia.carnet02 . selecciona next y busca
las carpeta donde almacenas tus
proyectos(carnet) .



Selecciona la API 10 y presiona Next.

Selecciona Empty Activity y luego Next



presiona Finish.

2016


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-2016

Página 2



presiona Finish.



2016


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-2016

Dentro del Proyect Explorer navega por el directorio Carnet02->res-> y dentro de la carpeta
layout, Presiona clic en activity_main y clic en la pestaña de text



Sustituye el código por el que se muestra a continuación:

<?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 Android Studio genera un Relativelayout y otros elementos, elimina todo el
texto y sustitúyelo por el anterior



2016


Página 3

UNIVERSIDAD DE EL SALVADOR

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


PDM115



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

Ciclo I-2016

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 que tendrá el layout(lista)



2016



Página 4

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 la ventana de diseño

Ciclo I-2016

En la vista Text en xml se vera asi:



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



2016


Página 5

UNIVERSIDAD DE EL SALVADOR

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


PDM115



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

Ciclo I-2016

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

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

package carnet02.fia.ues.sv.carnet02;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends ActionBarActivity implements
AdapterView.OnItemClickListener {

String values[]={"ButtonActivity","TextViewActivity",