17 Feb 10 Tutorial Android paso a paso I: Desarrollo de la aplicación Notepad

Me he decidido a hacer una serie de posts a modo de curso para empezar a desarrollar aplicaciones para Android. Voy a omitir la instalación del entorno de desarrollo (eclipse + sdk android) ya que existen numerosos manuales disponibles en internet. De todas formas, para instalarlo recomiendo este enlace. Después seguiremos los manuales disponibles en inglés en la web oficial de Android (http://developer.android.com/resources/tutorials/notepad/index.html), pero en castellano y con pasos muy fáciles de seguir (no será una traducción al pie de la letra).

Nos deberemos descargar los ejemplos que encontraremos aquí para seguir el curso.

Empezamos!

Desarrollo de la aplicación Notepad

A través de este tutorial vamos a crear una aplicación para tomar notas, que nos introducirá a los aspectos básicos y herramientas para el desarrollo en Android. Comenzando por un proyecto base, seguiremos los pasos  para crear una simple aplicación, viendo como desarrollar la lógica de negocio y las interfaces, así como compilar y ejecutar la aplicación.

En este ejercicio, vamos a construir una simple lista de notas, permitiendo al usuario añadir nuevas notas, pero no editarlas.

Objetivos:
• Conocer ListActivities y crear menus de aplicación.
• Utilizar SQLite para almacenar datos.
• Cómo recuperar los datos de una base de datos y mostrarlos en pantalla.
• Conceptos básicos sobre cómo interactuar con la interfaz de usuario.

Paso 1

1. Crear un nuevo proyecto Android File > New > Android Project
2. En el cuadro de diálogo, seleccionar Create project from existing source
3. Pulsar Browse y navegar hasta donde hemos descomprimido el material del curso (carpeta NotepadCodeLab) y seleccionar Notepadv1
4. Las propiedades del proyecto deberían de completarse automáticamente.
5. Pulsar Finish. El proyecto Notepadv1 debería abrirse y aparecer en el explorador de proyectos.

Si se produce algún error con AndroidManifest.xml, pulsar el botón derecho sobre el proyecto y seleccionar Android Tools > Fix Project Properties.

Paso 2

Abrir el fichero notepad_list.xml en res/layout. Vamos a añadir los elementos necesarios para presentar la lista de notas. Podemos hacerlo de dos manera, añadir un ListView y un TextView desde el panel de elementos, o escribiendo el código directamente en el XML.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
      <ListView android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@android:id/list"></ListView>
     <TextView android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/no_notes"
          android:id="@android:id/empty"></TextView>
</LinearLayout>

Los elementos que hemos añadido se mostrarán alternativamente, es decir, solo uno de ellos será visible.
• Los identificadores list y empty son proporcionados por la plataforma Android, por lo que tenemos que añadir el prefijo android: a los identificadores (@android:id/list).
• La vista con el identificador empty, es usada automáticamente por Android cuando no existen elementos que mostrar.

Paso 3

Necesitamos mostrar las notas en el listado de notas, dentro del ListView.
1. Crear un nuevo fichero llamado notes_row.xml dentro de res/layout.
2. Añadir un nuevo TextView a la interfaz. Aplicarle el siguiente identificador: @+id/text1
3. Guardar el fichero.

Paso 4

Vamos a modificar la clase Notepadv1 para mostrar el listado de nostas y que nos permita añadir nuevas notas. Abrimos el fichero Notepadv1.java.

• Debemos cambiar la clase a la que extiende (Activity) por ListActivity. Esta clase nos proporciona funcionalidades extra para trabajar con listas.
• Vemos que existen varios métodos en el código:
onCreate(): se ejecuta cuando se llama a la actividad (puede verse como un método main).
onCreateOptionsMenu(): crea el menu de la actividad.
onOptionsItemSelected(): se ejecuta al seleccionar un elemento del menu.

Paso 5

Ahora que ya tenemos los componentes, ya podemos comenzar a construir la aplicación. Lo primero que vamos a hacer es abrir/crear la base de datos y asignar el resultado a la vista (ListView). Vamos a añadir el siguiente código al método onCreate():

1
2
3
4
5
6
7
8
9

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.notepad_list);
    mDbHelper = new NotesDbAdapter(this);
    mDbHelper.open();
    fillData();
}

Definir la siguiente variable a nivel de clase:

1

private NotesDbAdapter mDbHelper = null;

Hemos definido un nuevo método, fillData(), que es el encargado de obtener todas las notas de la base de datos y asignárselas al ListView.

1
2
3
4
5
6
7
8
9

private void fillData() {
    Cursor c = mDbHelper.fetchAllNotes();
    startManagingCursor(c);
    String[] from = new String[] { NotesDbAdapter.KEY_TITLE };
    int[] to = new int[] { R.id.text1 };
    SimpleCursorAdapter notes =
        new SimpleCursorAdapter(this, R.layout.notes_row, c, from, to);
    setListAdapter(notes);
}

Paso 6

Vamos a crear el menu para que nos permita añadir nuevas notas a la lista.
Necesitamos un botón que al ser pulsado cree una nueva nota:

1. Creamos el texto asociado al botón en res/values/strings.xml

2. Definimos la posición del botón en el menú:

1

public static final int INSERT_ID = Menu.FIRST;

3. Añadimos el nuevo botón al menú:

1
2
3
4
5
6

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    boolean result = super.onCreateOptionsMenu(menu);
    menu.add(0, INSERT_ID, 0, R.string.menu_insert);
    return result;
}

Paso 7

Una vez creado el menú, es necesario atender a las pulsaciones de los elementos del mismo. Aunque en este caso tengamos un único elemento, hay que tener en cuenta el elemento pulsado:

1
2
3
4
5
6
7
8
9

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case INSERT_ID:
            createNote();
            return true;
    }
    return super.onOptionsItemSelected(item);
}

Paso 8

Creamos una nueva nota, la añadimos a la base de datos y actualizamos la lista para reflejar los cambios.

1
2
3
4
5
6

private void createNote() {
    String noteName = this.getString(R.string.note_name) + " " +
    String.valueOf(mNoteNumber++);
    mDbHelper.createNote(noteName, "");
    fillData();
}

Paso 9

Ya hemos acabado. Puedes importar el proyecto llamado Notepadv1Solution para comprobar que has hecho todo bien. Mañana más. Cualquier duda en los comentarios!

Segundo capítulo del tutorial: Tutorial Android paso a paso II: Desarrollo de la aplicación Notepad
Tercer capítulo del tutorial: Tutorial Android paso a paso III: Desarrollo de la aplicación Notepad

Etiquetas: Android, aplicación, Desarrollo, notepad