Programación básica con android Introducción - … · res –> values -> strings.xml y abrimos...

Programación básica con android

Aurelio López Ovando 1

Introducción

En este primer tutorial diseñado para la materia de programación básica, veremos cómo iniciarse en la programación android de

una manera sencilla, utilizaremos cono entorno de desarrollo que vamos a utilizar será Eclipse, se asume que el lector tiene

conocimientos de java y del uso de eclipse, de no ser así sería bueno leerse unos tutoriales antes de iniciar, para una mejor

compresión serpía bueno ir siguiendo lo que aquí se muestra e ir analizando la información aquí presentada.

1. Crear el proyecto

La secuencia para crear el proyecto es la siguiente: File -> New -> Android Application Project.

Nombre del proyecto y de la aplicación, normalmente

coinciden, pero no es una regla ya que Application Name

será el nombre que aparecerá a los usuarios en sus

teléfonos al instalar la app y Project Name es el nombre

del directorio donde se guardará el proyecto mientras lo

desarrollamos.

Package Name es el espacio de nombres

donde se organizarán nuestros archivos y

al mismo tiempo es una manera de ir

firmando la app.

Versiones de sistema operativo mínimo y

máximo sobre los que correrá nuestra app.



Si marcamos esta opción, podremos en la siguiente

pantalla seleccionar el ícono de arranque de nuestra

aplicación, que normalmente es un “androidcito” o

podremos subir nuestro propio ícono.

Con esta opción podemos seleccionar en las

siguientes pantallas, un activity o pantalla de inicio de

nuestra aplicación.

Especificamos que queremos crear nuestra aplicación

en el workspace de eclipse, si quisiéramos crear

nuestro proyecto en otra carpeta, debemos

desmarcar esta casilla.

Como en la pantalla anterior marcamos la casilla

“Create custom launcher icon” ahora podemos

configurar el ícono de nuestra app, aquí te

recomiendo que navegues y veas tu mismo las

diferentes modalidades o configuraciones del

ícono.



Después de todos estos pasos pulsamos el botón “Finish”.

Simliar al anterior, como previamente, dos pantallas

antes, marcamos la casilla “Create activity” ahora

podemos escoger unos templates de pantallas de

inicio, te recomiendo que de momento escojas la

opción “Blank Activity” ya mas adelante que tengas

más conocimiento, explores en las otras opciones.

Esta parte es crucial, ya que el desarrollo

android está basado en la arquitectura

“Modelo-Vista-Controlador”, en esta sección

damos nombre a nuestro controlador, que no

es otra cosa que un archivo con la extensión

.java y a nuestra vista que es representado

por archivo von la extensión .xml (El modelo

queda pendiente aún).

Donde dice “Activity Name” he puesto

Principal (La primera letra mayúscula),

me generará un archivo llamado

“Principal.java” que contendrá el código

en java del controlador de la app. Nota:

He borrado el nombre predeterminado

que era “MainActivity”.

Donde dice “Layout Name” he puesto

principal (todo en minúsculas), que me

generará un archivo “principal.xml”, que

representa la vista o parte gráfica de

nuestra pantalla o activity de inicio.

Nota: He cambiado el nombre

predeterminado que era“activity_main”.



2. Pantalla de trabajo

Una vez creado el proyecto veremos la pantalla principal de trabajo, similar a la siguiente:

Todas estas secciones deben ser identificadas de manera adecuada, al fin de cuentas se trata de un ambiente de desarrollo

integrado (IDE) donde una sección trabaja con otra.

Package explorer: Muestra las carpetas de los proyectos

existentes en nuestro wokspace, incluye el proyecto actual

en el que estamos trabajando, hay que tener cuidado de

no perderse, lo recomendable es replegar las carpetas

todas las carpetas y dejar desplegada la de nuestro

proyecto.

Palette: Tiene todas las herramientas o

controles gráficos que podremos utilizar

para diseñar nuestra app, organizadas en

categorias

Activity inicial, en este ejemplo es el archivo llamado

“principal.xml”, el cual representa la vista de nuestro

proyecto, podemos verlo también como un lienzo en

blanco donde iremos colocando los controles de la sección

“Palette” hasta dar forma a nuestra aplicación. No tiene

que ser el único, a medida que necesitemos podremos ir

creando más activitys.

Outline: Muestra los detalles de los controles

que se han ido colocando sobre el activity.



3. Estructura de directorio del proyecto en el package explorer

Al crear el proyecto se genera una serie de carpetas, cada una con sus respectivos usos, veamos las más importantes:

Estas son las secciones que por el momento es importante sean bien identificadas, para concluir:

src es la abreviación de “source” y contiene todo el código que se utilice en la aplicación, es decir es la parte

correspondiente al controlador, recordemos que el controlador es el código que hace funcionar a la vista.

res es abreviación de “resource” y aquí siempre encontraremos diferentes recursos de nuestro proyecto como por

ejemplo: íconos, imágenes, sonidos, textos, menús, etc.

gen es la abreviación de “Generated” y en esta sección encontraremos archivos de configuración con código que se

genera automáticamente por eclipse.

Con esta ideología ya podemos avanzar y ver cada uno de manera detallada.

Principal.java contiene el código(controlador) que mueve a toda la app,

a medida que avancemos el proyecto seguramente iremos creando otros

archivos de código, pero particularmente este es que contiene el código

inicial de la aplicación.

R.java es un archivo de definición, podemos verlo como una bitácora

donde se van registrando todos los controles que vayamos colocando

sobre los activitis, tiene una sección llamada “id” donde podremos ver

las definiciones de dichos controles antes mencionados.

principal.xml es el archivo que contiene la parte gráfica de nuestra

aplicación(vista).

strings.xml todos los textos que se utilicen en la vista deben estar

definidos en esta sección.



4. Activity y Palette

Ahora que ya conocemos la estructura del directorio del proyecto (si no le entendiste a medida que avancemos podrás

entenderlo de mejor manera), veamos cómo darle forma a nuestro activity.

Vamos a la carpeta res –> layout -> principal.xml y abrimos el archivo, nos aparecerá algo como esto:

Este es el código XML cuando damos clic en “principal.xml”, para regresar a la parte gráfica damos click en “Graphical Layout”.

Es importante conocer el código porque hay cosas que de manera gráfica no podremos configurar, sin embargo para este curso

trataremos de meternos los menos posible en esta sección, todo lo que hagamos será de manera gráfica.

Hagamos una aplicación básica, pediremos el nombre de una persona y más abajo aparecerá una leyenda saludando a esa

persona… (Algo así como el “Hola mundo recargado”).

Debajo del activity podemos ver dos pestañas:

Graphical Layout que es la que vemos en la

imagen, nos muestra el activyti de manera

gráfica.

principal.xml nos muestra el código en XML

del activity, podemos dar clic en ambos y ver

que pasa.



Antes de comenzar, es bueno tener identificados los controles básicos, en la sección “Palette”

encontramos una serie de controles organizados en pestañas desplegables, en la sección “Form

Widgets” encontramos los botones (Button) y las etiquetas (TextView), los botones no necesitan

explicación de para que sirven, los TextView son etiquetas o textos que colocaremos en nuestros

activitys.

En la sección “Text Fields” encontramos los que en Windows conocemos como “textbox” para los

que vienen de .net o “editbox” para los que vienen de Visual Basic, pero que en android

llamaremos “EditText” que no son otra cosas que los cuadros de diálogos en donde los usuarios

pueden introducir información. Como podemos ver se nos ofrece una serie de EditText

preconfigurados dependiendo del tipo de dato que se va a introducir, por ejemplo si queremos un

campo de contraseña, escogeríamos “Password”, donde sabemos que los caracteres no se

mostrarán, solo aparecerán unos puntitos. (Si has iniciado sesión en algún teléfono sabrás de lo

que te hablo), y así sucesivamente, es cuestión de meterse a la documentación y ver cómo

funciona cada uno de ellos.

Algo asi como se muestra en la figura:

Colocar controles en el activity. Una vez aclarado el punto, prosigamos con el ejemplo, cuando creamos el activity en blanco,

en realidad no bien en blanco, podemos ver que trae un encabezado y un TextView que dice “Hello world!”… lo primero que

haremos será eliminar el TextView, demos un click sobre el y pulsemos la tecla “Supr” y listo, se ha eliminado

Una vez teniendo nuestro activity en blanco, vamos a darle forma a nuestra

aplicación, necesitamos colocar sobre el activity Un nuevo TextView, un Editext, un botón y al final otro TextView.

Nota: Para colocarlo solo debes ir a la paleta, escoger el control que necesitas y arrastrarlo al activity.



Como decía anteriormente, ahora debemos darle la siguiente forma al activity principal:

Una vez colocado los controles, podemos ver el

la ventana del outline y veremos que nos

muestra los controles que hemos colocado

sobre el activity.

Nombrar los controles. Es importante

colocar un nombre(id) a cada elemento

colocado en el activity, sin embargo no a todos,

es decir, se debe hacer un análisis de que

elementos son lo que realmente necesitan ser

nombrados, esto es fácil, si el elemento servirá

para entrada de datos o para mostrar la salida

de algún proceso, es importante que lo

nombremos, por ejemplo en este ejemplo, solo es indispensable nombrar el EditText, al Button y al segundo TextView… el

primero porque ahí el usuario tecleará su nombre, el botón porque es debemos capturar cuando sea pulsado y el último porque

mostrará el saludo… el primer TextView no lo nombraremos, porque solo será un simple texto, aunque podría hacerse sin ningún

problema.

Para nombrar un control damos click derecho y escogemos la opción: “Edit ID” y en el cuadro de diálogo que aparece colocamos

el nombre deseado, en este ejemplo cambiaremos “editText1” a “txNombre”.

Hacemos lo mismo para cada elemento de manera que los nombre sque utilizaremos serán: txNombre, btnSaludar, txSaludo, de

tal manera que si checamos el OutLine debemos tener algo similar a lo siguiente:



Cuando asignamos los nombres a cada control, estos se van bitacorizando o registrando en el archivo R.Java, podemos

encontrarlo en la carpeta gen:

En este archivo encontraremos una sección llamada “id” en la cual se van agregando las direcciones de memoria donde se han

guardado estos elementos, es importante tener en cuenta esto, ya que más adelante invocaremos a dichos controles mediante

la invocación a “R.id.nombreControl” donde nombreControl podría ser cualquiera de los nombres ahí registrado, más adelante

veremos este código que aquí menciono.

Cambiando los textos. Una vez que hemos colocado los nombres correspondientes a cada control, ahora debemos darle una

mejor apariencia, para ello debemos colocarle el texto correspondiente a los controles que así lo requieran, de tal manera que

en nuestro ejemplo el primer TextView diga: “Teclea tu nombre”, el botón diga: “Saludar” y el segundo TextView diga: “Hola”.

Para ello debemos crear esas tres cadenas(strings) por separado y luego asignárselas a los controles correspondientes, vamos a

res –> values -> strings.xml y abrimos el archivo, nos aparece una ventana como la siguiente:

Tenemos dos formas de agregar nuestras cadenas, una de ellas es

de manera gráfica pulsando el botón “Add” y agregando las

cadenas y los textos y la otra, que es la que usaremos en este caso,

es haciéndolo por código.

En la parte de abajo hay dos pestañas, una dice Resources y la otra

dice strings.xml, justo ahí daremos click y se nos mostrará un

código en xml de las cadenas, podemos dar click en esta pestaña y

veremos un código como el de la imagen que se muestra más

abajo.



Procedemos a agregar nuestras tres cadenas, de manera que nos quede como se muestra a continuación :

Al agregar un string debemos considerar dos

partes:

La primera es el nombre(name) del string,

por ejemplo en la primera cadena el

nombre es: “textoEntradaNombre”.

La segunda es el contenido del texto, en la

primera cadena es “Teclea tu nombre” .

La diferencia entre uno y otro es que el

nombre del string es con el que la invocaremos para asignárselo a algún control y el contenido es el texto que será visible en los

controles.

Ahora si procedemos a utilizar estos textos en los controles correspondientes, para ellos regresamos al activity Principal.Xml y

muy similiar a cuando cambiamos el ID, damos click derecho sobre el control deseado y escogemos la opción “Edit Text”:

Se nos mostrará un cuadro que contiene una lista con todos los strings existentes, aquí es

cuestión de ser congruentes y asignarle al control el string que le corresponda y pulsar el

botón “OK”, lo cual se reflejará

inmediatamente en el texto de

dicho control.

Podemos observar dos cosas, una de ellas es que el texto ha cambiado, y

la otra es que el ícono del warning ha desaparecido, esto es

porque cuando se agrega un control al activity, el compilador detecta que

el texto que utiliza sigue siendo el

que trae por default y lo correcto es

crear un string para cada texto

como ya había mencionado

anteriormente.

Asignamos los textos a cada control

que asi lo requiera hasta tener algo

como esto:

Ahora nuestra pantalla va agarrando mas forma, con esto hemos terminado la parte del

diseño(vista), podríamos correr nuestra app y ver cómo va quedando, pero antes de eso

mejor trabajemos con la parte del controlador.



Vamos a la carpeta src y buscamos el archivo “Principal.java”, como mencionamos anteriormente, aquí se encuentra el código

que hace funcionar a la vista.

Una vez habiendo conocido las partes principal del código comencemos a programar nuestra app, lo primero que vamos a hacer

es conectar nuestro código con la vista, mediante código definiremos un EditText y dos TextView, el botón lo manejaremos de

manera diferente, así que no es necesario definirlo.

Seguramente al definir un control, en este caso EditText, marcará un error debido a que la librería del EditText no está definida.

Podemos solucionarlo mediante la combinación de teclas ctrl + shift + O(recomendada), otra manera de solucionarlo es dar clic

sobre el ícono del error y escoger algo como se muestra en la figura:

Cualquiera de las dos opciones agregará la librería correspondiente y dejará de marcar dicho error.

Esto mismo haremos con los otros controles, los definimos y agregamos las librerías correspondientes.

Despliega todas las librerías

utilizadas en el código.

Es la función principal del proyecto,

es decir cuando la app es ejecutada,

es este método el que se ejecuta

primero, por lo tanto aquí debe

comenzar nuestra programación.

Menú prederminado que tiene

nuestra pp al pulsar el botón menú

del teléfono, podemos modificarlo

o crear otros.

Error al definir el EditText El error es debido a que no se

encuentra definida la librería para la

clase EditText.



Los nombres utilizados para los controles podrían ser los mismos nombre que

usamos en la vista sin ningún problema, pero para efectos de explicar el código le

cambiamos tantito poniendo una C al final.

Ahora lo que debemos hacer es conectar estos a los definidos en la vista, si

recordamos, anteriormente dijimos que los nombre utilizados en la vista se graban

en un archivo llamado R.Java en una sección llamada “id”, pues bien, aquí haremos

uso de ello, mediante la instrucción findViewById().

Podemos fijarnos que hemos conectado a cada

control de la vista con su respectivo control del

controlador, el botón lo hemos dejado fuera, porque

la conexión la haremos de manera diferente.

Ahora lo que procede es hacer un método que se

ejecute al pulsar sobre el botón, de manera que

tome el texto tecleado en txNombreC y se lo mande a

tvSaludo para que aparezca como saludo.

Sería de mucha ayuda que el estudiante conozca el funcionamiento de eclipse, ya que cuenta con algunas herramientas para

agilizar la captura de código, como por ejemplo crtl + space que autocompleta algunas palabras, pero bueno ya regresando al

punto, el código que vamos a emplear es el siguiente:

Aún no hemos terminado, debemos hacer funcionar el botón, existen tres maneras de detectar el pulsado del botón, dos de ellas

es por código, la que usaremos en este ejemplo desde mi punto de vista es la manera más sencilla, ya que definimos un método

(que en este caso ya lo hicimos y se llama saludar), y de manera gráfica nos vamos a las propiedades del botón y ahí escribimos

el nombre de dicho método, asi como se muestra a continuación.

Abrimos el activity “principal.xml”.

Damos click derecho sobre el botón y escogemos: Other Properties -> Inherited from View -> Onclick

Creamos un método, que en este

caso lo llamaremos “saludar” en

donde crearemos la rutina que se

ejecutará el pulsar el botón.

getText() obtiene el texto

contenido en un control, en este

caso el control EditText llamado

txNombre.

setText() estable o asigna el texto a

un control, en este caso al control

tvSaludo.



En la ventana que aparece escribimos el nombre del método que queremos que se ejecute.

Listo, hemos terminado nuestro programa, guardamos todo lo que hemos hecho y ahora ya

podemos correrlo y ver que funcione.

5. Corriendo nuestra app

Para ver cómo funciona nuestra app, podemos hacerlo mediante un emulador o directamente en

el teléfono, para hacerlo mediante el emulador debemos crear uno, para ellos damos clic en el la

pestaña Windows -> Android Virtual Device Manager.

De la ventana que aparece damos clic en el botón “New”.



Y configuramos nuestro emulador.

Ya que configuramos nuestro emulador damos clic en el botón “OK” y

ahora nos aparece en el listado de emuladores el que hemos creado,

podemos cerrar la ventana, el emulador queda guardado para ser utilizado

cuando necesitemos.

Ahora vamos a hacer uso de el, vamos al menú Run -> Run Configurations

Nombre con el que identificaremos al emulador, podemos tener

varios emuladores si queremos.

Modelo del teléfono que queremos emular, existe una serie de

marcas y modelos, algunos requieren mas memoria que otros.

Versión de android que queremos emular

1.- Seleccionamos la opción “Android Application”

2.- Damos click en el botón “New launch

configuration”

3.- Pulsamos el botón “Browse” y de la ventana que

aparece elegimos nuestro proyecto.



En la pertaña “Target” marcamos el emulador que tenemos disponible, damos click en el botón “Apply” y luego en el botón

“Run”

Tenemos cono resultado lo siguiente:

Para correrlo en el teléfono, primero debemos considerar que el teléfono tenga “Android” como sistema operativo y

que no sea una versión tan antigua.

Debemos conectar el teléfono a la PC y asegurarnos que el controlador del teléfono se instale correctamente,

normalmente la instalación es automática, de no ser así habría que buscar los controladores manualmente en internet.

Entre las cosas que cambian son las siguientes al momento de correr la aplicación es la siguiente:

1.- Seleccionamos menú Run -> Configuration manager.

2.- Debemos seleccionar la opción “Always prompt to pick divice”, pulsar el botón “Apply” y luego el botón “Run”.



Se nos muestra en una nueva ventana un listado con el teléfono que se encuentra conectado a la PC, en este caso lo estoy

corriendo desde un HTC.

Lo seleccionamos y damos clic en el botón “OK”, esto hará que la app se ejecute en nuestro teléfono directamente, a

continuación se muestra una captura de la app corriendo en el teléfono.

Está por demás decir que en cualquiera de los dos casos anteriores, si existieran errores, la aplicación no correría, es más

recomendable correrla directamente en el teléfono ya que el emulador no cuenta con todos los servicios que se necesitan en

muchas aplicaciones.

Espero este primer material haya sido de mucha ayuda, los siguientes no serán tan detallados, partiremos de la idea que el lector

ya sabe como crear un proyecto y veremos nuevas cosas, saludos.

Programación básica con android Introducción - … · res –> values -> strings.xml y abrimos...

Documents

Transcript of Programación básica con android Introducción - … · res –> values -> strings.xml y abrimos...