Introducción a las DB en android

Aurelio López Ovanbdo – http://aureliux.wordpress.com 1

Aspectos iniciales y creación del proyecto

Objetivo: Realizar un diccionario que pueda traducir palabras escritas en español al lenguaje maya utilizando un dispositivo

android.

De inicio necesitamos una base de datos a la que llamaremos: ”Traductor.db” en esta pequeña base de datos tendremos una

tabla, es importante hacer mención que tanto las imágenes como los audios serán referenciables, es decir, no estarán

almacenados propiamente en la base de datos, sino que estarán en la carpeta de recursos y simplemente serán invocados

desde la aplicación cuando sea necesarios.

La tabla que necesitamos la llamaremos “palabras” que contendrá los siguientes campos y datos de inicio.

_id espanol maya archivo

1 Abeja Kaab abeja

2 Abrazar Meek abrazar

3 Abuela Chiich abuela

4 Abuelo Nool abuelo

5 Adivinar Na’a adivinar

6 Agua Ha agua

7 Aguacate Oon aguacate

8 Aire Iik aire

9 Alacrán Siina alacrán

10 albañil Meen Pack albañil

¿Que necesitamos para comenzar a trabajar?

Antes de comenzar a darle forma al proyecto es necesario que contemos con los archivos que vamos a utilizar, esto con el fin

de que cuando comencemos con el desarrollo optimicemos el tiempo lo más que se pueda y las actividades mayormente sean

de desarrollo, para ello es importante que contemos con la siguiente lista:

1 Un banco de palabras en español las cuáles serán las que contendrá el diccionario, por cuestión de tiempo en este

ejemplo utilizaremos solamente 10 palabras.

2 Las correspondientes traducciones de las palabras anteriores en maya.

3 Audio en mp3 de las pronunciaciones en maya.

4 Imágenes correspondientes a las palabras del diccionario.

5 Iconos a utilizar.

Para este ejemplo utilizaré los siguientes archivos, las imágenes están en formato PNG y los sonidos en mp3.

Introducción a las DB en android

Aurelio López Ovanbdo – http://aureliux.wordpress.com 2

1.- Creamos un proyecto al que llamaremos MakTool

Creamos el proyecto y como ícono escogemos el archivo “ceroIcon.png”, el nombre del proyecto es una palabra en maya que

significa “Hombre diciendo”, personalizamos el ícono de la aplicación.

2.- Agregar los archivos a la carpeta de recursos

Buscamos la carpeta “res” esta carpeta, contiene los recursos externos a utilizar en el proyecto, al decir

recursos externos, nos referimos a: imágenes, audios, videos, íconos, etc…, pues bien, en esa carpeta

debemos colocar los archivos de los recursos a utilizar.

En este caso específico, vamos a comenzar con las imágenes que queremos mostrar, si desplegamos la

estructura de carpetas veremos que tiene: drawable-hdpi, darwable-ldpi, layout, etc… cada una con

una función específica, para no generar confusiones lo más adecuado será crear nuestra propia carpeta

y de ahí colocar nuestras imágenes, a esta nueva carpeta le llamaremos “drawable”.

Para ellos damos clic derecho sobre la carpeta “res” y “New -> folder”.

En la ventana que aparece, escribimos el nombre de la carpeta que para este

caso la llamaremos “drawable” y pulsamos en el botón finish, como se

muestra en la figura.

Ahora debemos tener una nueva subcarpeta

dentro de la carpeta res, lo que ocupa ahora es

agregar los archivos que necesitamos a dicha

subcarpeta.

Una manera sencilla de hacerlo es arrastrando las imágenes deseadas desde una carpeta de

explorador de Windows hasta esta carpeta “drawable” en eclipse, cuestión de acomodar las ambas ventanas para poder

hacerlo sin complicaciones. (Nota: El archivo “ceroIcon.PNG” no es necesario arrastrarlo a los recursos porque

automáticamente se agregó cuando seleccionemos el ícono al crear el proyecto. )

Se arrastran los archivos

Introducción a las DB en android

Aurelio López Ovanbdo – http://aureliux.wordpress.com 3

Si lo hacemos de manera correcta nos aparece un cuadro de diálogo preguntándonos si queremos copiar el archivo a lo cual

diremos que “sí” marcando la opción “Copy files”, podríamos arrastrar más de un archivo a

la vez si así lo quisiéramos.

Ahora toca el turno a los archivos de audio, el proceso es similar, solo que ahora crearemos una

carpeta llamada “raw” y ahí arrastraremos los mp3 que ocuparemos, no se explicará porque el

proceso es idéntico al utilizado para las imágenes.

Hasta este punto ya tenemos los recursos que necesitamos para nuestro proyecto, ahora

3.- Diseño de la pantalla principal

Primero quitaremos el mensaje que “Hello Wordl!!” que aparece de manera prederminada, y

seguidamente de ello cambiaremos el nombre de la aplicación, para lograrlo abriremos el archivo

“strings.xml” y dejémoslo como se muestra a continuación

No olvidemos que para que los cambios se reflejen se debe guardar constantemente.

La etiqueta que dice “app_name” corresponde al texto del nombre de la aplicación, las otras etiquetas las utilizaremos más

adelante.

En conclusión, debemos tener una pantalla limpia como la que se muestra en la figura:

Introducción a las DB en android

Aurelio López Ovanbdo – http://aureliux.wordpress.com 4

Ahora uno de los retos a los que nos enfrentamos es diseñar las interfaces de usuario (de ahora en adelante “UI”) de nuestra

aplicación, la gran cantidad de tamaños y resoluciones de pantalla que nos esperan allí hacen que esta tarea pueda resultar

complicada. Para lograr esto trabajaremos con los “Layouts” que nos proporciona controles para manejar nuestras pantallas, primeramente

centrémonos en la ventana del “Outline” cambiemos el tipo de Layout que tenemos, para ello clic derecho donde dice

“RelativeLayout” y escogemos la opción: “Change Layout” del cuadro de diálogo que aparece escogemos la que dice

“LinearLayout(Vertical)”.

A este layout le podemos modificar su ID, en este caso lo modifiqué y le puse como nombre “CPrincipal” (Click derecho sobre

“LinearLayout1 ” -> Edit ID).

El LinearLayout, dependiendo si escogemos la orientación vertical u horizontal, divide el activity en renglones o filas, en donde

para cada fila o renglón podremos utilizar solo un control.

Lo que debemos hacer ahora es jugar con los diferentes tipos de activity y darle la forma que necesitemos, para este ejercicio

queremos una forma mas o menos como esta.

Botón para traducir Buscador de palabras

Botón para ir al listado

Logotipo

Introducción a las DB en android

Aurelio López Ovanbdo – http://aureliux.wordpress.com 5

Entonces juguemos un rato con estos activity y combinémoslos, primero arrastremos los siguientes layouts a CPrincipal en este

orden:

LinearLayout(Horizontal)

FrameLayout

LinearLayout(Vertical)

Obtenemos algo así:

Si nos marca algún error, seguramente es porque no se ha definido la orientación, para ellos tendremos que irnos al código

XML.

Y modificamos el código asignándole al atributo “Orientation”

De esta manera tenemos 3 layouts embebidos al layout CPrincipal,

nuestro activity Principal aún continúa en blanco.

Modificamos sus ID: Click

derecho -> Assing ID

Introducción a las DB en android

Aurelio López Ovanbdo – http://aureliux.wordpress.com 6

Ahora ya podemos arrastrar los controles que necesitamos, en Header pondremos: un TextView, un TextField (AutoComplete) y

un ImageButton.

Debemos tener algo como esto:

Ahora lo que corresponde es editar los ID de los controles para que quede de esta manera:

Por ahora nos marca algunos warnings, para corregirlos

debemos irnos nuevamente al código .XML y modificar los

siguientes parámetros como se muestran en la figura :

Arrastramos el TextView, lo mismo que un

TextField(AutoComplete) y lo soltamos sobre

Header

Cuando arrastremos el ImageView nos va a pedir una imagen, la que seleccionaremos

será de la lupa (que subimos previamente y se encuentra en la carpeta drawable)

Introducción a las DB en android

Aurelio López Ovanbdo – http://aureliux.wordpress.com 7

Evidentemente debemos agregar el String “textoDescImage”

Después de esto tenemos un encabezado mas decente, asi también los warning del Outline han desaparecido:

En el layout que corresponde a Body lo utilizaremos para mostrar el logotipo de nuestra app, para ello arrastremos un

ImageView y la seleccionemos la imagen “logo.PNG”, ahora cambiemos el ID y le ponemos como

nombre “imgLogo”.

Ahora trabajemos en el Footer, y coloquemos un TextView y in ImageButton, la imagen que utilizaremos para el botón será

diccionario.PNG que ya subimos previamente, necesitaremos agregar un string que diga “Ir al diccionario”.

Configuramos los ID de estos controles y les llamaremos: txBotonDiccionario y btnDiccionario.

Con esto hemos terminado el diseño inicial de la pantalla principal, aún quedan algunas cosas por corregir, pero las iremos

trabajando a lo largo que dure el proyecto.