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

febrero 17, 2010

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
android1

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

Tags ; , , ,

29 comentarios

    Ryck Feb 18, 2010

    Genial! Esperando las siguientes entradas!
    Gran trabajo, de verdad…

    Responder
    Ruben Mar 25, 2010

    Hola! Antes de nada muy currao este Tutorial. Tan solo tengo un problema: en el metodo fillData() me da error en R.id.text1. Si doy a la sugerencia del Eclipse me modifica el R.java y, claro, esto me produce otro error porque este archivo no se puede modificar a mano.

    Muchas gracias por todo y un saludo.

    Responder
    Jon Mar 25, 2010

    Hola Ruben, asegurate de que el id del TextView del fichero notes_row.xml es text1, algo tal que así:

    <TextView android:id=»@+id/text1″

    Si este no es el error, escribe otro comentario con el error específico.

    Un saludo!

    Responder
    Ruben Mar 26, 2010

    Hola Jon y a todos. Muchas gracias por contestar.
    Error por mi parte que tenia un «:» puesto donde no debía (<TextView android:id="@+id : /text1").
    Por ultimo, al ejecutar la aplicacion me sale "No Notes Yetfalse". Esto es lo que tiene que salir?

    Bueno, muchas gracias y un saludo.

    Responder
    kikorb Jul 06, 2010

    Increible.

    Mil gracias por este tutorial. Te parecerá una tontería pero leer esto equivale a meterse un tocho de 500 páginas para aprender a desenvolverte con la programación en Android y a mi me ha ayudado sobremanera.

    Un saludo y gracias por el trabajo.

    Responder
    Antonio Ago 16, 2010

    Hola, me marca error aqui:

    R.string.note_name

    en el paso 8, en donde se delcara note_name?

    Saludos

    Responder
    Jon Ago 23, 2010

    Hola Antonio,

    en tu fichero res/values/strings.xml

    debes incluir un nuevo valor:
    <string name=»note_name»>note name</string>

    También puedes sustituir esa linea por un texto estático:

    String noteName = «note name» + » » +
    String.valueOf(mNoteNumber++);

    Un saludo

    Responder
    Cabeto41 Sep 20, 2010

    Hola .. muy bueno el tutorial. Lo he hecho paso a paso y tengo 2 inconvenientes:

    1) No carga la lista con la opcion de add note.
    2) En la funcion filldata en la linea que llama a fetchAllNotes me sale el siguente error en tiempo de ejecucion: Sorry the aplication has stoped unexpectedly.

    Un saludo.

    Responder
    Fabian Nov 24, 2010

    Cursor cannot be resolved to a type

    Este error aparece:
    con respecto a esta linea
    Cursor c = mDbHelper.fetchAllNotes(); Paso 5

    esto fetchAllNotes() donde se debe agregar?

    Responder
    Javier Feb 22, 2011

    Hola, el tutorial es muy bueno, pero para el que no tiene nociones iniciales de java y Android, esto le puede ir largo.

    Si lo que quereis es empezar desde cero, enviarme un email a mybluejean@hotmail.es, y os enviaré los cursos de iniciación a Java, Android, entorno de desarrollo de aplicaciones en java y entorno eclipse.

    Estos libros vienen con ejercicios y test de autoevaluación, y un total de mas de 2000 páginas, para aprender DESDE CERO.

    Un saludo y segid publicando cosas como estas, que son buenas para aprender.

    Responder
    David Mar 25, 2011

    hola estoy probando el codigo pero me sale un error que indica que el metodo createNote() esta como no usado es logico el error pero en que parte debo llamar a esta funcion ?? gracias por si acaso soi nuevo en este tema de android jeje

    Responder
    maria May 20, 2011

    Hola, cuando ejecuto la aplicacion me dice que se ha cerrado inesperadamente, que puedo hacer???

    Responder
    Jon May 21, 2011

    Hola María, estaría bien saber que error te da exactamente.

    Para saberlo, utiliza LogCat de Eclipse.

    Un saludo.

    Responder
    Rubén Darío May 21, 2011

    Hola amigos estoy muy interesado en el tema y ahora me llama mucho mas la atención por esa actitud desinteresada de compartir con todos. Espero que hacia el próximo futuro sea uno de los que ofrecen sin esperar nada a cambio. Por ahora solo soy un curioso que no tiene el mas mínimo fundamento de desarrollo de aplicaciones pero si tengo buenas muy buenas ideas. Gracias y hasta pronto.

    Responder
    maria May 21, 2011

    Hola!! Ya me funciona…se ve que algo tendria mal…pero ahora lo que me sale es…no notes yet….¿?????
    Muchas gracias jon!!!

    Responder
    maria May 26, 2011

    eso es lo que me tiene que salir o es que algo esta fallando¿???

    Responder
    kNo Jun 22, 2011

    A mi igual que a maría me sale Notepad v1 y No notes yet, pero no reacciona a ningun evento. ¿qué estamos haciendo mal?

    Responder
    Jon Jun 24, 2011

    Si está todo correcto, al pulsar la tecla menú debe aparecer un botón para añadir una nueva nota. Al pulsarlo, debería añadirse una nueva nota al listado y desaparecer el mensaje de «No notes yet».

    Responder
    Fredy Ago 10, 2011

    Muchas gracias por el tutorial, sí me funcionó, si bien no a la primera pero sí lo hizo. Continuaré con los siguientes capítulos.

    Responder
    Fernando Tello Ago 26, 2011

    El tutorial es muy bueno, si pudieses decirme donde encuentro los manuales ara realizar aplicaciones desde cero te agradecería muchisimo

    Cuando ejecuto la aplicación genera un el siguiente error
    «Sorry! teh application com.android.demo.notepad1 (process com.android.demo.notepad1) has stopped unexpectedly. Please try again.

    realice el siguiente camio en esta línea en private void fillData() {

    Esta:
    » R.layout.notes_row, c, from, to); »

    por esta otra:

    » R.layout.notepad.list, c, from, to); »

    Aqui si funciona agregando nuevas filas

    Algo hice mal??
    Alguna sugerencia

    Mil gracias.

    Responder
    Noreply Oct 12, 2011

    Muy bueno el tuto, Maria y kNO, yo pensaba que no me funcionaba por que me pasaba lo mismo que a ustedes, pero apreten menu y carga las notas… Parte 1 completada, me voy a dormir mañana a por la parte 2! .

    Responder
    Aime Oct 26, 2011

    Hola, me sirvió mucho tu manual, muchas graxs x la info!!! Tengo un par de preguntas, podrías ayudarme?
    1. Como puedo actualizar mi app que ya esta dada de alta en el market?
    2. En dado caso que quisiera eliminar mi app, como la puedo borrar del market?
    Ojalá me pudieras ayudar, de nuevo muchas graxs!!!!

    Responder
    Elí Nov 17, 2011

    Felicidades por tu aporte, esta sensacional comenzar con pasos sencillos como estos. 😉

    Por favor sigue subiendo más material.
    Un saludo.

    Responder
    Billy Dic 15, 2011

    Buenas. Ante todo gran trabajo!
    Cuando creo el notes_row, si no meto el textview dentro de un layout me da error de parsing. Cómo hago para que se lo trague??
    A la hora de crearlo tendré que cambiar el tipo de recurso que quiero, pero cual seria, menu? values?

    Gracias!

    Responder
    Rober Dic 19, 2011

    Hola tio me podrias decir que version utilizas para emular, a mi no me funciona bien y creo que puede ser debido a eso.

    Un saludo!!

    Responder
    GPWilliam Sep 07, 2012

    Gracias por los tutoriales me ayudaron mucho, soy nuevo en android, si tienes algunos tutos mas; me interesan : uso de cámara, ascelerometro, cronometro, tabhost, y webSrvice.

    Te agradezco la molestia.

    Responder

Escribe un comentario

Los comentarios son moderados y se utiliza rel="nofollow" para los enlaces.