Tutorial Android paso a paso I: Desarrollo de la aplicacin 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 instalacin del entorno de desarrollo (eclipse + sdk android) ya que existen numerosos manuales disponibles en internet. De todas formas, para instalarlo recomiendo este enlace. Despus seguiremos los manuales disponibles en ingls en la web oficial de Android (http://developer.android.com/resources/tutorials/notepad/index.html), pero en castellano y con pasos muy fciles de seguir (no ser una traduccin al pie de la letra). Nos deberemos descargar los ejemplos que encontraremos aqu para seguir el curso. Empezamos!

Desarrollo de la aplicacin Notepad

A travs de este tutorial vamos a crear una aplicacin para tomar notas, que nos introducir a los aspectos bsicos y herramientas para el desarrollo en Android. Comenzando por un proyecto base, seguiremos los pasos para crear una simple aplicacin, viendo como desarrollar la lgica de negocio y las interfaces, as como compilar y ejecutar la aplicacin.

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

Objetivos: Conocer ListActivities y crear menus de aplicacin. Utilizar SQLite para almacenar datos. Cmo recuperar los datos de una base de datos y mostrarlos en pantalla. Conceptos bsicos sobre cmo interactuar con la interfaz de usuario.

Paso 1
1. Crear un nuevo proyecto Android File > New > Android Project 2. En el cuadro de dilogo, 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 deberan de completarse automticamente. 5. Pulsar Finish. El proyecto Notepadv1 debera abrirse y aparecer en el explorador de proyectos.

Si se produce algn error con AndroidManifest.xml, pulsar el botn derecho sobre el proyecto y seleccionar Android Tools > Fix Project Properties.

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

1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="wrap_content" 5 android:layout_height="wrap_content"> 6 <ListView android:layout_width="wrap_content" 7 8 android:layout_height="wrap_content" 9 android:id="@android:id/list"></ListView> 10 <TextView android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:text="@string/no_notes" 13 android:id="@android:id/empty"></TextView> </LinearLayout>

Los elementos que hemos aadido se mostrarn 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 aadir el prefijo android: a los identificadores (@android:id/list). La vista con el identificador empty, es usada automticamente 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. Aadir 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 aadir 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 mtodos en el cdigo: onCreate(): se ejecuta cuando se llama a la actividad (puede verse como un mtodo 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 aplicacin. Lo primero que vamos a hacer es abrir/crear la base de datos y asignar el resultado a la vista (ListView). Vamos a aadir el siguiente cdigo al mtodo onCreate():

1 @Override 2 public void onCreate(Bundle savedInstanceState) { 3 super.onCreate(savedInstanceState); 4 super.onCreate(savedInstanceState); 5 6 setContentView(R.layout.notepad_list); 7 mDbHelper = new NotesDbAdapter(this); 8 mDbHelper.open(); 9 fillData(); }

Definir la siguiente variable a nivel de clase:

1 private NotesDbAdapter mDbHelper = null;

Hemos definido un nuevo mtodo, fillData(), que es el encargado de obtener todas las notas de la base de datos y asignrselas al ListView.

1 private void fillData() { 2 Cursor c = mDbHelper.fetchAllNotes(); 3 startManagingCursor(c); 4 String[] from = new String[] { NotesDbAdapter.KEY_TITLE }; 5 6 int[] to = new int[] { R.id.text1 }; 7 SimpleCursorAdapter notes = 8 new SimpleCursorAdapter(this, R.layout.notes_row, c, from, to); 9 setListAdapter(notes); }

Paso 6
Vamos a crear el menu para que nos permita aadir nuevas notas a la lista. Necesitamos un botn que al ser pulsado cree una nueva nota:

1. Creamos el texto asociado al botn en res/values/strings.xml

2. Definimos la posicin del botn en el men:

1 public static final int INSERT_ID = Menu.FIRST;

3. Aadimos el nuevo botn al men:

1 @Override 2 public boolean onCreateOptionsMenu(Menu menu) { 3 boolean result = super.onCreateOptionsMenu(menu); 4 menu.add(0, INSERT_ID, 0, R.string.menu_insert); 5 6 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 @Override 2 public boolean onOptionsItemSelected(MenuItem item) { 3 switch (item.getItemId()) { 4 case INSERT_ID: 5 6 createNote(); 7 return true; 8 } 9 return super.onOptionsItemSelected(item); }

Paso 8
Creamos una nueva nota, la aadimos a la base de datos y actualizamos la lista para reflejar los cambios.

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

Paso 9
Ya hemos acabado. Puedes importar el proyecto llamado Notepadv1Solution para comprobar que has hecho todo bien. Maana ms. Cualquier duda en los comentarios!

Segundo captulo del tutorial: Tutorial Android paso a paso II: Desarrollo de la aplicacin Notepad Tercer captulo del tutorial: Tutorial Android paso a paso III: Desarrollo de la aplicacin Notepad

Tutorial Android paso a paso II: Desarrollo de la aplicacin Notepad

Continuamos con la segunda parte del tutorial para el desarrollo de una aplicacin para Android paso a paso. La primera parte la puedes consultar en Tutorial Android paso a paso I: Desarrollo de la aplicacin Notepad. En este segundo post, vamos a crear una segunda actividad que nos permita crear y editar notas. Adems, vamos a poder tener la posibilidad de eliminar notas a travs del un men contextual.

Objetivos: Crear una nueva actividad. Realizar llamadas a la nueva actividad. Paso de datos entre las actividades. Crear un nuevo menu contextual.

Paso 1
Vamos a crear un men contextual que nos permita eliminar las notas creadas por el usuario. Este men se activar al seleccionar una nota:

1. Relacionamos la lista de notas (ListView) con el menu contextual:

1 registerForContextMenu(getListView());

2. Creamos el men contextual con la opcin de eliminar una nota:

1 @Override 2 public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) { 3 super.onCreateContextMenu(menu, v, menuInfo); 4 menu.add(0, DELETE_ID, 0, R.string.menu_delete); 5 }

3. Ahora que tenemos el men creado y relacionado con el listado, tenemos que atender a las pulsaciones en el men contextual:

1 @Override 2 public boolean onContextItemSelected(MenuItem item) { 3 switch(item.getItemId()) { 4 case DELETE_ID: 5 6 AdapterContextMenuInfo info = (AdapterContextMenuInfo) 7 item.getMenuInfo(); 8 mDbHelper.deleteNote(info.id); 9 fillData(); 10 return true; 11 12 } return super.onContextItemSelected(item); }

Paso 2
Como hemos visto antes, vamos a dar la posibilidad al usuario de crear y editar notas. Para ello, necesitamos una actividad que controle la interfaz de usuario.

1 public class NoteEdit extends Activity { 2 private EditText mTitleText; 3 private EditText mBodyText; 4 private Long mRowId; 5 6 7 @Override 8 protected void onCreate(Bundle savedInstanceState) { 9 super.onCreate(savedInstanceState); 10 setContentView(R.layout.note_edit); 11 12 mTitleText = (EditText) findViewById(R.id.title);

13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

mBodyText = (EditText) findViewById(R.id.body); Button confirmButton = (Button) findViewById(R.id.confirm); mRowId = null; Bundle extras = getIntent().getExtras(); if (extras != null) { String title = extras.getString(NotesDbAdapter.KEY_TITLE); String body = extras.getString(NotesDbAdapter.KEY_BODY); mRowId = extras.getLong(NotesDbAdapter.KEY_ROWID); if (title != null) { mTitleText.setText(title); } if (body != null) { mBodyText.setText(body); } } confirmButton.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { Bundle bundle = new Bundle(); bundle.putString(NotesDbAdapter.KEY_TITLE, mTitleText.getText().toString()); bundle.putString(NotesDbAdapter.KEY_BODY, mBodyText.getText().toString()); if (mRowId != null) { bundle.putLong(NotesDbAdapter.KEY_ROWID, mRowId); } Intent mIntent = new Intent(); mIntent.putExtras(bundle); setResult(RESULT_OK, mIntent); finish(); }}); } }

Paso 3
Ya tenemos la interfaz de usuario, y la actividad para controlarla. Vamos a abrir la nueva actividad desde el listado, para crear una nueva nota. Modificamos el mtodo createNote() de la siguiente manera:

1 private void createNote() { 2 Intent i = new Intent(this, NoteEdit.class); 3 startActivityForResult(i, ACTIVITY_CREATE); 4 }

Paso 4
Para editar las notas ya creadas, creamos un evento para atender a las pulsaciones de los elementos de las listas. Pasamos los datos de la nota a la nueva actividad.

1 @Override 2 protected void onListItemClick(ListView l, View v, int position, long id) { 3 super.onListItemClick(l, v, position, id); 4 Cursor c = mNotesCursor; 5 6 c.moveToPosition(position); 7 Intent i = new Intent(this, NoteEdit.class); 8 i.putExtra(NotesDbAdapter.KEY_ROWID, id); 9 i.putExtra(NotesDbAdapter.KEY_TITLE, c.getString( 10 c.getColumnIndexOrThrow(NotesDbAdapter.KEY_TITLE))); 11 12 i.putExtra(NotesDbAdapter.KEY_BODY, c.getString( 13 c.getColumnIndexOrThrow(NotesDbAdapter.KEY_BODY))); startActivityForResult(i, ACTIVITY_EDIT); }

Paso 5
Los mtodos creados anteriormente createNote() y onListItemClick() nos devuelven datos, por lo que necesitamos un mtodo para manejar la respuesta. onActivityResult() es el mtodo ejecutado cuando una actividad devuelve resultados.

1 @Override 2 protected void onActivityResult(int requestCode, int resultCode, Intent intent) { 3 super.onActivityResult(requestCode, resultCode, intent); 4 Bundle extras = intent.getExtras(); 5 6 switch(requestCode) { 7 case ACTIVITY_CREATE: 8 String title = extras.getString(NotesDbAdapter.KEY_TITLE); 9 String body = extras.getString(NotesDbAdapter.KEY_BODY); 10 mDbHelper.createNote(title, body); 11 12 fillData(); 13 break; 14 case ACTIVITY_EDIT: 15 Long rowId = extras.getLong(NotesDbAdapter.KEY_ROWID); 16 17 if (rowId != null) { 18 String editTitle = extras.getString(NotesDbAdapter.KEY_TITLE); 19 String editBody = extras.getString(NotesDbAdapter.KEY_BODY); 20 mDbHelper.updateNote(rowId, editTitle, editBody); 21 } fillData(); break; }

Paso 6
La nueva actividad que hemos definido anteriormente, hay que aadirla a AndroidManifest.xml. Esto permite al sistema conocer los componentes de la aplicacin. Eclipse include un editor para el manifiesto que facilita la edicin del fichero AndroidManifest.xml. Para aadir una nueva actividad:

1. Abrir el fichero AndroidManifest.xml 2. Seleccionar la pestaa Application. 3. Pulsamos Add en la seccin de Application Nodes. 4. En el cuadro de dilogo, seleccionar Create a new element at the top level, in Application y Activity. Pulsar OK. 5. Seleccionar la nueva actividad creada, y en el campo de texto Name, escribir .NoteEdit.

Paso 7
Ya hemos terminado esta segunda entrega del tutorial. Si ejecutamos la aplicacin, editamos una nota y pulsamos el botn atrs, veremos que se produce un error. Veremos como solucionar estos problemas en el siguiente post.

Cualquier pregunta o duda (o correccin) en los comentarios.

Ya puedes consultar la tercera parte del tutorial: Tutorial Android paso a paso III: Desarrollo de la aplicacin Notepad

Tutorial Android paso a paso III: Desarrollo de la aplicacin Notepad

En este tercer y ltimo post del tutorial, vamos a practicar el ciclo de vida de la aplicacin, y como guardar y recuperar el estado de la aplicacin.

Puedes ver los anteriores artculos: Tutorial Android paso a paso I: Desarrollo de la aplicacin Notepad Tutorial Android paso a paso II: Desarrollo de la aplicacin Notepad Objetivos: Conocer los eventos del ciclo de vida de la aplicacin. Tecnicas para mantener el estado de la aplicacin.

Paso 1
La aplicacin actual contiene algunos problemas. Para solucionarlo, vamos a mover la funcionalidad de edicin de notas a la clase NoteEdit.

1. Eliminar el siguiente cdigo de la clase NoteEdit, que obtiene los datos de la nota a travs del Bundle. Vamos a pasar a utilizar la clase DBHelper para obtener los datos directamente de la base de datos.

1 2 3 4 5

Bundle extras = getIntent().getExtras(); String title = extras.getString(NotesDbAdapter.KEY_TITLE); String body = extras.getString(NotesDbAdapter.KEY_BODY); mRowId = extras.getLong(NotesDbAdapter.KEY_ROWID);

2. Adems, eliminamos la asignacin de los datos a la interfaz de usuario

1 if (title != null) { 2 mTitleText.setText(title); 3 4 } 5 if (body != null) { 6 mBodyText.setText(body); }

Paso 2
Conectamos la clase NoteEdit con la base de datos.

1. Creamos un nuevo atributo:

1 private NotesDbAdapter mDbHelper;

2. Conectamos con la base de datos en el constructor, justo despus de llamar al constructor padre:

1 mDbHelper = new NotesDbAdapter(this); 2 mDbHelper.open();

Paso 3
Pasamos a comprobar el estado de la variable savedInstanceState. Esto sirve para comprobar si tenemos datos guardados en el Bundle, que debemos recuperar (Esto ocurre si la actividad pierde el foco y despus se recupera).

1. Reeplazar el siguiente cdigo:

1 mRowId = null; 2 Bundle extras = getIntent().getExtras(); 3 4 if (extras != null) { mRowId = extras.getLong(NotesDbAdapter.KEY_ROWID); 5 }

Por este otro

1 mRowId = savedInstanceState != null ? savedInstanceState.getLong(NotesDbAdapter.KEY_ROWID) : null; 2 if (mRowId == null) { 3 Bundle extras = getIntent().getExtras(); 4 mRowId = extras != null ? extras.getLong(NotesDbAdapter.KEY_ROWID) : null; 5 }

Paso 4
Necesitamos completar los campos con los datos de la nota. Llamamos al mtodo populateFields() que completaremos ms adelante. Insertarlo justo antes de confirmButton.setOnClickListener():

1 populateFields();

Paso 5
En esta actividad ya no es necesario devolver ningn tipo de datos, ya que vamos a guardar los datos directamente en esta actividad, por lo que es posible simplificar el mtodo onClick() considerablemente:

1 public void onClick(View view) { 2 setResult(RESULT_OK); 3 finish(); 4 }

Ms adelante veremos como guardar los datos.

Paso 6
Definimos el mtodo populateFields():

1 private void populateFields() { 2 if (mRowId != null) { 3 Cursor note = mDbHelper.fetchNote(mRowId); 4 startManagingCursor(note); 5 6 mTitleText.setText(note.getString(note.getColumnIndexOrThrow(NotesDbAdapter.KEY_TITLE))); 7 mBodyText.setText(note.getString(note.getColumnIndexOrThrow(NotesDbAdapter.KEY_BODY))); 8 } }

Paso 7

Implementamos los mtodos que gestionan el ciclo de vida de Android. Estos mtodos nos permiten guardar y recuperar el estado de la actividad en caso de que esta se cierre o pase a un segundo plano (al recibir una llamada, por ejemplo):

1. onSaveInstanceState(): es llamada por Android cuando la actividad va a ser cerrada. Esto significa que aqu se debe guardar toda la informacin necesaria para restaurar la actividad en su estado anterior. Podemos pensar que es el mtodo contrario a onCreate(), de hecho el Bundle que construimos en este mtodo, es el que ser pasado al mtodo onCreate().

1 @Override 2 protected void onSaveInstanceState(Bundle outState) { 3 super.onSaveInstanceState(outState); 4 outState.putLong(NotesDbAdapter.KEY_ROWID, mRowId); 5 }

2. onPause(): es llamada cuando la actividad va a terminar (con finish()) o pasar a un segundo plano (con una llamada de telfono).

1 @Override 2 protected void onPause() { 3 super.onPause(); 4 saveState(); 5 }

3. onResume(): es llamada al reactivar la actividad. Completamos los campos:

1 @Override 2 protected void onResume() { 3 super.onResume(); 4 populateFields(); 5 }

Paso 8
Para terminar de completar la clase NoteEdit, ya solo nos queda guardar los datos en la base de datos. Creamos el mtodo saveState():

1 private void saveState() { 2 String title = mTitleText.getText().toString(); 3 String body = mBodyText.getText().toString(); 4 if (mRowId == null) { 5 6 long id = mDbHelper.createNote(title, body); 7 if (id > 0) { 8 mRowId = id; 9 } 10 } else { 11 12 mDbHelper.updateNote(mRowId, title, body); } }

Paso 9
Volvemos a la clase Notepadv3. En el mtodo onActivityResult(), tenamos implementado todo lo necesario para recibir los datos de la actividad y guardarla en la base de datos. Como este proceso ya lo realizamos en la clase NoteEdit, solo es necesario que actualizemos la lista con los nuevos datos:

1 @Override 2 protected void onActivityResult(int requestCode, int resultCode, Intent intent) { 3 super.onActivityResult(requestCode, resultCode, intent); 4 fillData(); 5 }

Paso 10
Finalmente, es esta misma clase, al seleccionar un elemento de la lista, ya no es ncesario pasar todos los datos de la nota, nicamente el id, por lo que el mtodo onListItemClick(), quedara de la siguiete manera:

1 @Override 2 protected void onListItemClick(ListView l, View v, int position, long id) { 3 super.onListItemClick(l, v, position, id); 4 Intent i = new Intent(this, NoteEdit.class); 5 6 i.putExtra(NotesDbAdapter.KEY_ROWID, id); 7 startActivityForResult(i, ACTIVITY_EDIT); }

Y con este ltimo post hemos terminado el tutorial. Espero que os haya servido de ayuda y, como siempre, cualquier duda o pregunta en los comentarios.