tutorial android

23
 Tutorial Android parte 1: Instalando Android  Vamos a instalarnos Android. Este tutorial se ha desarrollado siguiendo los pasos que vienen en la web oficial de Android SDK: http://developer.android.com/sdk/installing.html  Instalar Java SE Development Kit Los pasos a seguir son: - Entrar en: http://java.oracle.com - Luego seleccionamos “Downloads”, - Seleccionamos “Java SE”, - Seleccionamos “JDK”, - Aceptar la licencia, - Seleccionar el sistema operativo (en mi caso Windows x86) y se comenzará a descargar. - Después ejecutamos el instalador y ya quedará instalado el JDK. - Podéis ir al registro o no según como queráis. Pulsando Nota: si intento instalar el Android SDK antes del JDK, me informa de que tengo que tener descargado el Java SE Development Kit antes de instalar el Android SDK.  Instalar Eclipse IDE Vamos a la web: http://www.eclipse.org/downloads/ Y descargamos el entorno Eclipse que queramos (en la web de Google recomiendan la versión Eclipse Classic). Lo descomprimimos en una carpeta y ya lo tendríamos instalado en nuestro sistema.  Nota sobre la estructura de las carpetas Yo he creado la siguiente estructura de carpetas: Directorio principal para meter todas las cosas de Android: C:\Android Directorio para el Eclipse IDE: C:\Android\eclipse-SDK-3.6.2-win32 Directorio para Android SDK: C:\Android\ and roid-sdk_r11-wi ndows  Instalar Android SDK Vamos a esta web: http://developer.android.com/sdk/index.html

Upload: joanteaj-ta

Post on 14-Jul-2015

1.152 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 1/23

 

Tutorial Android parte 1: Instalando Android 

Vamos a instalarnos Android. Este tutorial se ha desarrollado siguiendo los pasos que vienen en laweb oficial de Android SDK:

http://developer.android.com/sdk/installing.html 

Instalar Java SE Development Kit

Los pasos a seguir son:

- Entrar en:

http://java.oracle.com

- Luego seleccionamos “Downloads”,

- Seleccionamos “Java SE”,

- Seleccionamos “JDK”,

- Aceptar la licencia,

- Seleccionar el sistema operativo (en mi caso Windows x86) y se comenzará a descargar.

- Después ejecutamos el instalador y ya quedará instalado el JDK.

- Podéis ir al registro o no según como queráis. Pulsando

Nota: si intento instalar el Android SDK antes del JDK, me informa de que tengo que tener descargado el Java SE Development Kit antes de instalar el Android SDK.

 

Instalar Eclipse IDE

Vamos a la web:

http://www.eclipse.org/downloads/

Y descargamos el entorno Eclipse que queramos (en la web de Google recomiendan la versiónEclipse Classic).

Lo descomprimimos en una carpeta y ya lo tendríamos instalado en nuestro sistema.

 

Nota sobre la estructura de las carpetas

Yo he creado la siguiente estructura de carpetas:

Directorio principal para meter todas las cosas de Android:

C:\Android

Directorio para el Eclipse IDE:

C:\Android\eclipse-SDK-3.6.2-win32Directorio para Android SDK:

C:\Android\ android-sdk_r11-windows

 

Instalar Android SDK

Vamos a esta web:

http://developer.android.com/sdk/index.html

Page 2: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 2/23

 

Y seleccionamos la descarga que más nos interese. En este caso yo he seleccionado:

android-sdk_r11-windows.zip

Tras descargarlo, hay que descomprimirlo en la carpeta que queramos.

 

Instalar el plugin ADT para Eclipse

Para desarrollar aplicaciones para Eclipse hay un plugin llamado Android Development Tools(ADT). Este plugin proporciona un entorno más potente para construir aplicaciones Android.

Para instalarlo hay que seguir los siguientes pasos (los pasos vienen

en http://developer.android.com/sdk/eclipse-adt.html#installing ):

- Lanzar Eclipse.

- Entrar en Help -> Install new software...

- Pinchar en el botón Add en la esquina superior derecha.

- Aparecerá la ventana de Add Repository, introducir:

Name = “ADT Plugin”

Location =https://dl-ssl.google.com/android/eclipse/

- Pulsar Ok.

- Aparecerá la lista de componentes, chequearlos todos y pulsar Next.

- Pulsar Next en la lista de herramientas a descargar.

- Leer y aceptar la licencia y pulsar Finish.

Si aparece un aviso de seguridad diciendo que la autenticidad o validez del software no puedeobtenerse, click en Ok.

- Cuando terminen de instalarse los componentes, reiniciar Eclipse.

 Configurando el plugin ADT

- Entra en Eclipse y selecciona Window > Preferences....- Seleccionar la pestaña Android en el panel izquierdo.

- A continuación se te preguntará si quieres mandar información a Android, seleccionar si enviarlo ono y pulsar en Proceed.

- Para el SDK Location pinchar en Brwse y buscar el directorio donde descargaste el SDK (en micaso era C:\Android\android-sdk_r11-windows\android-sdk-windows).

- Pulsar en Apply y luego Ok.

 Añadiendo plataforma y otros componentes

El último paso es usar Android SDK y el AVD Manager (un a herramienta incluida en el SDK) paradescargar los componentes esenciales al entorno de desarrollo.

Para lanzar el Android SDK y el AD Manager hay que hacer lo siguiente:

- Entrar en Eclipse y seleccionar Window -> Android SDK and AVD Manager.

- En Windows, hacer doble click en SDK manager.exe en la carpeta donde descomprimiste elAndroid SDK.

- En Eclipse en la ventana de Android SDK and AVD Manager seleccionar “Available packages”

- Marcar todos los paquetes y dar a Install Selected.

Page 3: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 3/23

 

- Pulsar “Accept All” para aceptar todas las licencias y pulsar el botón para que comiencen adescargarse los paquetes.

 Creando nuestro primer programa “Hello, World!”

Vamos a crear el primer programa siguiendo el tutorial:

http://developer.android.com/resources/tutorials/hello-world.htmlCreando un AVD

- Primero abrimos Eclipse.

- Seleccionamos Window -> Android SDK and AVD Manager.

- Seleccionamos Virtual Devices en el panel lateral.

- Hacemos click en New.

- Se abrirá la ventana de Create New AVD. Rellenar con las siguientes opciones:

Name: "my_avd" (por ejemplo).

Target: “Android 1.5” (es la plataforma sobre la que correrá el emulador).

El resto de campos se pueden ignorar para este ejemplo.- Hacer click en Create AVD.

Nota: los que tengáis un pc muy potente podéis seleccionar otro Target de una versión mayor como por ejemplo “Android 3.1”.

Crear un nuevo proyecto Android

Para crear un nuevo proyecto:

- Ir a File -> New -> Project.

- Seleccionar un proyecto "Android Project" y pulsar Next.

- Rellenar los campos con los siguientes valores:

Project name: HelloAndroid

Application name: Hello, AndroidPackage name: com.example.helloandroid

Create Activity: HelloAndroid

- Hacer click en Finish.

Ahora vamos a introducir las instrucciones para insertar la frase “Hello, Android!”.

En el constructor hay que añadir estas dos instrucciones.

TextView tv = new TextView(this);

tv.setText("Hello, Android");

El código quedaría así:

package com.example.helloandroid;

import android.app.Activity;

import android.os.Bundle;import android.widget.TextView;

public class HelloAndroid extends Activity

{

/** Called when the activity is first created. */

@Override public void onCreate(Bundle savedInstanceState)

{

Page 4: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 4/23

 

super.onCreate(savedInstanceState);

TextView tv = new TextView(this);

tv.setText("Hello, Android");

setContentView(tv);

}

}

Lanzar la aplicación

- Seleccionar Run -> Run.- Seleccionar Android application.

Page 5: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 5/23

 

Tardará un poco en que se lance el programa... podéis aprovechar para ir al baño o tomaros undescanso.

Page 6: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 6/23

 

Como veis ha salido genial.

¡Buen trabajo!

http://www.youtube.com/watch?feature=player_embedded&v=aplcLIYUYEQ

Tutorial Android parte 2: Hola mundo en Androidmodificando fichero layout

 

En el primer artículo creamos un programa hello world sin tocar el fichero xml del interfaz de

usuario.

Ahora vamos a crear el programa hello world pero tocando el fichero xml.

Este tutorial está basado en el tutorial oficial:

http://developer.android.com/resources/tutorials/hello-world.html

 

Crear un nuevo proyecto Android

Abrimos Android y seleccionamos el workspace que queramos (en mi caso yo selecciono

C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Page 7: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 7/23

 

Para crear un nuevo proyecto:

 

• Ir a File -> New -> Project.

• Seleccionar un proyecto "Android Project" y pulsar Next.

Rellenar los campos con los siguientes valores:○ Project name: HelloAndroidXml

○ Build target: (El que queráis, yo en este caso he marcado...) Android 1.5

○ Application name: Hello, Android!

○ Package name: com.example.helloandroidxml

○ Create Activity: HelloAndroidXml

• Hacer click en Finish.

Y ahora vamos a modificar el archivo xml con el layout de la página principal del programa.

Este xml está en la carpeta res/layouts en el archivo main.xml.

Reemplazamos el contenido por:

 

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/textview"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="@string/hello"/>

 

Este xml mostrará un mensaje en la pantalla.

El texto del mensaje lo vamos a meter en un recurso de la aplicación

Page 8: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 8/23

 

Para ello vamos a ir a la carpeta res/values/ y abrimos strings.xml. Y escribimos lo siguiente:

 

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="hello">Hello, world from Talavera de la Reina!</string>

<string name="app_name">Hello, world!</string>

</resources>

 

Definimos el titulo de la aplicación y el recurso hello que utilizamos en el textbox de main.xml.

Y ya solo queda seleccionar el menú Run -> Run (Android project) y se ejecutará la aplicación.

 

¡Buen trabajo!

 

En este video podéis ver todos los pasos a seguir:

http://www.youtube.com/watch?feature=player_embedded&v=bHaylO081pc

Tutorial Android parte 3: Depurar con Android

Page 9: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 9/23

 

Este tutorial está basado en el tutorial Hello, world de la documentación de Android SDK.

http://developer.android.com/resources/tutorials/hello-world.html

Vamos a reutilizar el programa que hemos hecho en el artículo anterior para aprender a depurar una aplicación.

Podemos poner puntos de interrupción haciendo doble click en la barra lateral izquierda del editor 

de código fuente. Como se puede ver en la siguiente imagen:

Para depurar el código, voy a meter un par de instrucciones en el main de la aplicación.

Object o = null;o.toString();

Nos quedaría así:

package com.example.helloandroid;import android.app.Activity;import android.os.Bundle;public class HelloAndroid extends Activity{/** Called when the activity is first created. */

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);Object o = null;o.toString();

setContentView(R.layout.main);}

}

Estas instrucciones provocarán un error en tiempo de ejecución (porque se llama a un evento deun objeto no creado).

Page 10: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 10/23

 

Vamos a poner un punto de interrupción en la instrucción:

Object o = null;

Y ahora depuramos seleccionando menú Run -> Debug History -> HelloWorldXml.

Os cuento antes de ver lo que ocurriría cuáles son los accesos rápidos (teclas) para depurar lasaplicaciones son:

F5 – ejecutar instrucción a instrucción (paso a paso) sin entrar en sus subinstrucciones

F6 – ejecutar instrucción a instrucción (paso a paso) entrando en sus subinstrucciones

F8 – continuar ejecución (run)

(También se pueden ejecutar estos comandos entrando en el menú Run cuando está en ejecuciónuna aplicación).

La aplicación se detendrá en la instrucción anterior a que se produzca el error. Dónde hemospuesto el punto de interrupción.

Si continuamos ejecutando saltará el error. Os recomiendo ir ejecutando linea a linea hasta quesalte el error para que practiquéis.

En el emulador os aparecerá esta pantalla.

Page 11: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 11/23

 

Más cosas. Podéis cambiar de la perspectiva de Debug a la de código haciendo click en losbotones en la esquina superior derecha:

Y hasta aquí lo que queríamos aprender hoy. Tened un día excelente.

Page 12: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 12/23

 

Tutorial Android parte 4: Cómo escribir en un TextView enAndroidPara modificar el valor de un textview que hemos creado en el fichero de layout main.xml. Hay queobtener el control y con setText establecer su nuevo valor:

TextView tvBd = (TextView) findViewById(R.id.textViewPrueba);

tvBd.setText("00:00:00");

También habrá que importar la libreria para que funcione:

import android.widget.TextView;

Por ejemplo:

package com.examples.minutestomidnight;

import android.app.Activity;

import android.os.Bundle;

import android.widget.TextView;

public class MinutesToMidnightMain extends Activity {

/** Called when the activity is first created.

*/@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

TextView tvBd = (TextView) findViewById(R.id.textViewPrueba);

tvBd.setText("00:00:00");

}}

Tutorial Android parte 5: Cómo usar un LinearLayout enAndroidEste tutorial está basado en el tutorial “Hello, views” de la documentación de Android SDK.

Page 13: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 13/23

 

http://developer.android.com/resources/tutorials/views/hello-linearlayout.html

Hoy vamos a aprender a trabajar con vistas.

Los layouts sirven para establecer cómo se van a colocar los controles en la vista que estamosdesarrollando. Los linearlayouts son un tipo de layout en el que los elementos se apilan linealmenteuno a continuación del anterior de forma horizontal o vertical.

En este ejemplo vamos a modificar el archivo xml de la vista de una aplicación y vamos a colocar los elementos utilizando un linearlayout.

Creando la aplicación

Abrimos Android y seleccionamos el workspace que queramos (en mi caso yo seleccionoC:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:- Ir a File, opción New, opción Project.- Seleccionar un proyecto "Android Project" y pulsar Next.- Rellenar los campos con los siguientes valores:

• Project name: HelloLinearLayout

• Build target: (El que queráis, yo en este caso he marcado...) Android 1.5

• Application name: Hello, LinearLayout!

• Package name: com.example.hellolinerlayout

• Create Activity: HelloLinearLayout

- Hacer click en Finish.

Abrir res/layout/main.xml e introducir el código que aparece en la web del tutorial de Android.

http://developer.android.com/resources/tutorials/views/hello-linearlayout.html

Ejecutar la aplicación pulsando en el menú Run la opción Run.

Page 14: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 14/23

 

El ejemplo crea un linearlayout vertical con cinco casillas y luego en la primera casilla crea otrolinearlayout y mete dentro cuatro casillas horizontales con diferentes clores de fondo.

Tutorial Android parte 6: Cómo poner un background en unLinearLayout en AndroidEn el tutorial anterior hemos aprendido a crear una vista con un layout de tipo LinearLayout.

Ahora vamos a aprender a poner un fondo background a un LinearLayout.

Para hacer esto lo único que hay que hacer es en la etiqueta del LinearLayout meter un atributoandroid:background que apunte a la imagen que se colocará de fondo. Por ejemplo:

android:background="@drawable/fondoPantalla"

Tenéis el código fuente de este tutorial en el siguiente enlace:

Código fuente.

Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo seleccionoC:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:- Ir a File -> New -> Project.- Seleccionar un proyecto "Android Project" y pulsar Next.- Rellenar los campos con los siguientes valores:• Project name: HelloBackground

• Build target: (El que queráis, yo en este caso he marcado...) Android 1.5

• Application name: Hello, Background!

Page 15: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 15/23

 

• Package name: com.example.hellobackground

• Create Activity: HelloBackground

- Hacer click en Finish.

Vamos a agregar la imagen “fondopantalla.png” que os pongo a continuación:

Nota: Es importante poner el nombre del recurso en minusculas a que si no lo hacemos así, nosparecerá el error “Invalid file name: must contain only [a-z0-9_.]”.

Para ello, la vamos a guardar dentro de res/drawable seleccionando la carpeta y pulsando con elbotón derecho sobre ella y luego seleccionando Import (dentro seleccionaremos File System yluego seleccionamos la imágen en la carpeta en la que esté).

Ahora vamos a abrir el fichero res/layout/main.xml e introducir el código que encontraréis en elcódigo fuente del tutorial. Copiad el contenido del fichero res/layout/main.xml en el ficherores/layout/main.xml de vuestro ejemplo.

Código fuente de este tutorial.

Ahora vamos a compilar y ejecutar la aplicación con Run -> Run.

Page 16: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 16/23

 

Tutorial Android parte 7: RelativeLayout con AndroidEste tutorial está basado en el tutorial "Hello, views" de la documentación de Android SDK.

Tutorial Hello RelativeLayout 

Hoy vamos a seguir aprendiendo más sobre las vistas.

Los relativelayouts son un tipo de layout en el que los elementos se colocan en una posicionrelativa a otro elemento.

En este ejemplo vamos a modificar el archivo xml de la vista de una aplicación y vamos a colocar los elementos utilizando un relativelayout.

El código fuente de esta aplicación lo podéis encontrar en el siguiente enlace:

Descargar código fuente de este tutorial

Creando la aplicación

Abrimos Android y seleccionamos el workspace que queramos (en mi caso yo seleccionoC:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:- Ir a File, opción New, opción Project.- Seleccionar un proyecto "Android Project" y pulsar Next.- Rellenar los campos con los siguientes valores:

Project name: HelloRelativeLayoutBuild target: (El que queráis, yo en este caso he marcado...) Android 1.5Application name: Hello, RelativeLayout!

Page 17: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 17/23

 

Package name: com.example.hellorelativelayoutCreate Activity: HelloRelativeLayout

- Hacer click en Finish.

Abrir res/layout/main.xml e introducir el código xml que podréis encontrar en el tutorial original:

Tutorial Hello RelativeLayout

Ejecutar la aplicación con Run -> Run.

El ejemplo crea un relativelayout y coloca los elementos poniendo primero un texto. Luego elcuadro de texto se indica que se colocará debajo del texto. El botón Ok va debajo del cuadro detexto y alieado a la derecha. Y el botón Cancel se coloca a la izquierda del botón Ok y a la mismaaltura que este botón.

Sencillo, ¿verdad?

Tutorial Android parte 8: Usando TableLayout en AndroidEste tutorial está basado en el tutorial “Hello, views” de la documentación de Android SDK.

http://developer.android.com/resources/tutorials/views/hello-tablelayout.html 

Hoy vamos a seguir aprendiendo más sobre las vistas.

Los tablelayouts son un tipo de layout en el que los elementos se colocan dentro de las filas de unatabla.

En este ejemplo vamos a modificar el archivo xml de la vista de una aplicación y vamos a colocar los elementos utilizando un tablelayout.

El código fuente de este ejemplo lo podéis encontrar en el siguiente enlace:

Page 18: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 18/23

 

https://sites.google.com/site/libreyextremo/codigo-fuente-tutorial-aprender-android-parte-8

Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono

C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:- Ir a File -> New -> Project.- Seleccionar un proyecto "Android Project" y pulsar Next.- Rellenar los campos con los siguientes valores:

Project name: HelloTableLayoutBuild target: (El que queráis, yo en este caso he marcado...) Android 1.5Application name: Hello, TableLayout!Package name: com.example.hellotablelayoutCreate Activity: HelloTableLayout

- Hacer click en Finish.

Abrir res/layout/main.xml e introducir el código que viene en el tutorial oficial:

http://developer.android.com/resources/tutorials/views/hello-tablelayout.html 

Nota: para indicar la alineación de un control hay que utilizar el atributo “android:gravity”.

Ejecutar la aplicación con Run -> Run.

El ejemplo crea un tablelayout y coloca los controles en filas. Con la etiqueta View crea barras deseparación entre unas filas y otras del TableLayout.

Page 19: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 19/23

 

Podéis echar un vistazo al código xml para entenderlo mejor.

Tutorial Android parte 9: Utilizando un GridLayout enAndroidEste tutorial está basado en el tutorial "Hello, views" de la documentación de Android SDK.

http://developer.android.com/resources/tutorials/views/hello-gridview.html 

Seguimos viendo más cosas sobre las vistas en Android. Este tutorial va a ser un poco máscomplicado que los anteriores.

Lo cual hace que mole mucho más.

Los gridlayouts son un tipo de layout en el que los elementos se colocan dentro de una cuadrículade dos dimensiones por la que se puede navegar con los scroles verticales y horizontales.

En este ejemplo vamos a modificar el archivo xml de la vista de una aplicación y vamos a colocar un grupo de imágenes en las casillas de un gridlayout.

El código fuente de este tutorial podéis encontrarlo en la siguiente dirección:

https://sites.google.com/site/libreyextremo/codigo-fuente-tutorial-aprender-android-parte-9

Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo seleccionoC:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:- Ir a File -> New -> Project.

- Seleccionar un proyecto "Android Project" y pulsar Next.- Rellenar los campos con los siguientes valores:

Project name: HelloGridLayoutBuild target: (El que queráis, yo en este caso he marcado...) Android 1.5Application name: Hello, GridLayout!Package name: com.example.hellogridlayoutCreate Activity: HelloGridLayout

- Hacer click en Finish.

Ahora vamos a añadir el conjunto de imágenes a la carpeta res/drawable.Podéis coger las imágenes que queráis o las que vienen en el tutorial en la web de Android SDK.

http://developer.android.com/shareables/sample_images.zip 

Para copiar las imágenes en el directorio res/drawable, descomprimirlas en cualquier carpeta. Ydespués ir a Eclipse buscar la carpeta res/drawable, pulsar con el botón derecho sobre ella,seleccionar Import, File System y seleccionar las imágenes de la carpeta donde lasdescomprimisteis para agregarlas al proyecto.

Page 21: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 21/23

 

Cambiar el contenido del fichero res/layout/main.xml por el código que viene en el tutorial:

http://developer.android.com/resources/tutorials/views/hello-gridview.html 

Ahora vamos a abrir el fichero HelloGridLayout.java y vamos a modificar el código del eventoOnCreate().

public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);GridView gridview = (GridView) findViewById(R.id.gridview);

gridview.setAdapter(new ImageAdapter(this));gridview.setOnItemClickListener(new OnItemClickListener() {public void onItemClick(AdapterView parent, View v, int position,long id) {Toast.makeText(HelloGridLayout.this, "" + position, Toast.LENGTH_SHORT).show();}});}

También hay que agregar los siguientes imports:

import android.view.View;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.GridView;import android.widget.Toast;

Va a seguir dando error porque no encuentra la clase ImageAdapter. Y no la encuentra porque lavamos a crear ahora.

El código asigna al GridView un adaptador que crearemos a continuación (ImageAdapter) y que seencargará de obtener todas las imágenes que cargaremos en el GridView.

El código también define para el GridView un evento y un listener que capturará los clicks que elusuario realice en uno de los elementos del gridview.

Vamos a crear la clase ImageAdapter. Para ello:

- Pinchar con el botón derecho en el proyecto HelloGridLayout,- seleccionar New -> Class.- Poner los siguientes valores:

Source folder: HelloGridLayout/srcPackage: com.example.hellogridlayoutName: ImageAdapter 

Y escribimos el siguiente código en esta clase:

package com.example.hellogridlayout;

import android.content.Context;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.ImageView;

Page 22: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 22/23

 

public class ImageAdapter extends BaseAdapter {private Context mContext;

public ImageAdapter(Context c) {mContext = c;}

public int getCount() {return mThumbIds.length;}

public Object getItem(int position) {return null;}

public long getItemId(int position) {return 0;}

// create a new ImageView for each item referenced by the Adapter public View getView(int position, View convertView, ViewGroup parent) {ImageView imageView;if (convertView == null) { // if it's not recycled, initialize some attributesimageView = new ImageView(mContext);imageView.setLayoutParams(new GridView.LayoutParams(85, 85));imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);imageView.setPadding(8, 8, 8, 8);} else {imageView = (ImageView) convertView;}

imageView.setImageResource(mThumbIds[position]);return imageView;

}

// references to our imagesprivate Integer[] mThumbIds = {R.drawable.sample_2, R.drawable.sample_3,R.drawable.sample_4, R.drawable.sample_5,R.drawable.sample_6, R.drawable.sample_7,R.drawable.sample_0, R.drawable.sample_1,R.drawable.sample_2, R.drawable.sample_3,R.drawable.sample_4, R.drawable.sample_5,R.drawable.sample_6, R.drawable.sample_7,R.drawable.sample_0, R.drawable.sample_1,R.drawable.sample_2, R.drawable.sample_3,R.drawable.sample_4, R.drawable.sample_5,

R.drawable.sample_6, R.drawable.sample_7};}

Os dejo como ejercicio que analiceis el código del adaptador y veáis cómo se cargan las imágenes.

Y ya podemos ejecutar el programa (menú Run -> Run).

Page 23: Tutorial Android

5/13/2018 Tutorial Android - slidepdf.com

http://slidepdf.com/reader/full/tutorial-android-55a74e490a64d 23/23

 

Si pulsáis en las imágenes, aparecerá un mensaje con la posición de la imagen.

Nada más. Espero que hayáis disfrutado con este tutorial.