TextView

La forma ms sencilla de editar un texto en pantalla, cambiando el tamao del texto, color, estilo Tambin veremos como realizar realizar distintos tipos de enlaces como al navegador, correo electrnico o un mapa. Lo primero que vamos a realizar es un ejemplo simple de texto:

1 <?xml version="1.0" encoding="utf-8"> <AbsoluteLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 <TextView 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:text="El Texto que queremos mostrar" /> 11 </AbsoluteLayout> 12

El resultado es el siguiente:

Ejemplo simple de TextView Crear un enlace al navegador

1<TextView android:layout_width="wrap_content" 2 android:layout_height="wrap_content" 3 android:autoLink="web" 4 android:text="http://www.google.es" /> 5

Crear enlace al correo electrnico

1<TextView android:layout_width="wrap_content" 2 android:layout_height="wrap_content" 3 android:autoLink="email" 4

Ing. Ubaldo Jorge Lpez X

Pgina 1

android:text="pepe@correoo.net" />

Crear enlace al mapa La direccin del mapa la obtenemos del googlemaps.

1<TextView 2 android:layout_width="wrap_content" android:layout_height="wrap_content" 3 android:autoLink="map" 4 android:text="381 Park Avenue South, New York" /> 5

Android:background Color de fondo

1<TextView 2 android:layout_width="wrap_content" android:layout_height="wrap_content" 3 ndroid:background="#ffffffff" 4 android:text="Texto en prueba" /> 5

Android:textSize Tamao de los caracteres

1 <TextView android:layout_width="wrap_content" 2 android:layout_height="wrap_content" 3 android:textSize="15sp" 4 android:text="Texto en 15sp" /> 5 6 7 <TextView android:layout_width="wrap_content" 8

Ing. Ubaldo Jorge Lpez X

Pgina 2

9 10 11

android:layout_height="wrap_content" android:textSize="30sp" android:text="Texto en 30sp" />

Android:textStyle Tipo de texto: italic, bold o normal

1 <TextView 2 android:layout_width="wrap_content" android:layout_height="wrap_content" 3 android:textStyle="bold" 4 android:text="Texto en bold" /> 5 6 7 <TextView android:layout_width="wrap_content" 8 android:layout_height="wrap_content" 9 android:textStyle="italic" 10 android:text="Texto en italic" /> 11

Android:typeface Tipo de letra para el texto : normal, sans, serif o monospace

1 <TextView 2 android:layout_width="wrap_content" android:layout_height="wrap_content" 3 android:typeface="monospace" 4 android:text="Texto en monospace" /> 5 6 7 <TextView android:layout_width="wrap_content" 8 android:layout_height="wrap_content" 9 android:typeface="sans" 10 android:text="Texto en sans" /> 11

Ing. Ubaldo Jorge Lpez X

Pgina 3

EditText
La forma mas sencilla que el usuario interacte con la aplicacin introduciendo texto. Veamos como realizarlo de forma simple:
1 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 5 android:layout_height="fill_parent" 6 android:orientation="vertical"> 7 <EditText 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content"/> 10 11 </LinearLayout> 12

Con estas simples lneas el resultado es el siguiente:

Y si pulsamos sobre el EditText, nos aparece el teclado :

Ing. Ubaldo Jorge Lpez X

Pgina 4

Veamos algunos atributos Android:inputType=number Cuando pulsemos sobre el EditText, nos aparecer directamente el teclado numrico:
1 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 <EditText 8 android:layout_width="wrap_content" 9 10 android:layout_height="wrap_content" 11 android:inputType="number"/> </LinearLayout> 12

Android:inputType=textNoSuggestions Desactiva las sugerencias de texto cuando escribimos:

1 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 <EditText 8 android:layout_width="wrap_content" 9 10 android:layout_height="wrap_content" android:inputType="textNoSuggestions"/> 11 </LinearLayout> 12

Ing. Ubaldo Jorge Lpez X

Pgina 5

Android:inputType=textEmailAddress Nos muestra la tecla @ en el teclado para mayor comodidad del usuario.
1 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 <EditText 8 android:layout_width="wrap_content" 9 10 android:layout_height="wrap_content" android:inputType="textEmailAddress"/> 11 </LinearLayout> 12

Button
Estudiaremos una forma sencilla de crear botones y configurar el evento para que nos cambie un texto. En primer lugar crearemos un botn al que identificaremos como btnBoton1 y con el texto Plsame.

Ing. Ubaldo Jorge Lpez X

Pgina 6

Tambin crearemos un TextView que identificaremos como txtTexto con el texto No has pulsado. Archivo main.xml

1 <?xml version="1.0" encoding="utf-8"> <LinarLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 8 <Button android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:id="@+id/btnBoton1" 11 android:text="PULSAME"/> 12 13 14 <TextView android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:id="@+id/txtTexto" 17 android:text="No has pulsado"/> 18 </LinearLayout> 19 20

Con esto hemos creado la pantalla de inicio que queda como sigue :

Pantalla inicial Ahora modificaremos el archivo Java para que el botn funcione. Para controlar el evento del botn importaremos OnClickListener, el cdigo quedara como sigue:
1 public class PracticaActivity extends Activity implements OnClickListener{ /** Called when the activity is first created. */ 2 @Override 3 public void onCreate(Bundle savedInstanceState) { 4 super.onCreate(savedInstanceState); 5 setContentView(R.layout.main); 6 7 View btnboton1 = findViewById(R.id.btnBoton1); 8 btnboton1.setOnClickListener(this); 9 10 11 @Override 12 public void onClick(View v) { final TextView txttexto=(TextView) findViewById(R.id.txtTexto); 13 txttexto.setText("Has pulsado el boton"); 14 } 15 } 16

Ing. Ubaldo Jorge Lpez X

Pgina 7

El resultado al pulsar el botn es:

Evento OnclickListener

RadioButton
Usaremos el RadioButton para realizar una seleccin entre varias opciones: Para ello usaremos el RadioGroup para agrupar los RadioButton . 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 <RadioGroup android:id="@+id/grupo1" 8 android:orientation="vertical" 9 android:layout_width="fill_parent" 10 android:layout_height="fill_parent"> 11 12 <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" 13 android:layout_height="wrap_content" 14 android:text="Opcin RadioButton 1"/> 15 <RadioButton android:id="@+id/radio2" 16 android:layout_width="wrap_content" 17 android:layout_height="wrap_content" 18 android:text="Opcin RadioButton 2"/> 19 </RadioGroup> 20 21 22</LinearLayout>

El resultado es el siguiente:

Ing. Ubaldo Jorge Lpez X

Pgina 8

Android:onClick Vamos a darle utilidad al RadioButton, cambiaremos el texto segn su posicin. Diseamos el entorno 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 2 android:layout_width="fill_parent" 3 android:layout_height="fill_parent" 4 android:orientation="vertical"> 5 6 <TextView 7 android:layout_width="wrap_content" 8 android:layout_height="wrap_content" 9 android:id="@+id/txtTexto" 10 android:text="Sin seleccin"/> 11

Usaremos el RadioGroup para agrupar los RadioButton:

1<RadioGroup android:layout_width="fill_parent" 2 android:layout_height="fill_parent" 3 4 android:id="@+id/rgrEleccion" android:orientation="vertical"> 5 Crearemos los RadioButton, lo mas importante es la linea onClick, que es la que usaremos para que cuando pulsemos sobre este RadioButton salte al mtodo que le indicamos, en este caso lo hemos llamado onRadioButtonClick

1 <RadioButton android:id="@+id/rbtArriba" 2 android:layout_width="wrap_content" 3 android:layout_height="wrap_content" android:onClick="onRadioButtonClick" 4 android:text="Arriba" /> 5 6 <RadioButton android:id="@+id/rbtAbajo" android:layout_width="wrap_content" 7 android:layout_height="wrap_content" 8 android:onClick="onRadioButtonClick" 9 android:text="Abajo" /> 10

Ahora cerramos el RadioGroup y el LinearLayout

1</RadioGroup> 2</LinearLayout>

Ing. Ubaldo Jorge Lpez X

Pgina 9

Nos queda como sigue :

Ahora creamos el cdigo

1 package com.practica.android; 2 import android.app.Activity; import android.os.Bundle; 3 import android.view.View; 4 import android.widget.RadioButton; 5 import android.widget.TextView; 6 7 8 public class PracticaActivity extends Activity { /** Called when the activity is first created. */ 9 @Override 10 public void onCreate(Bundle savedInstanceState) { 11 super.onCreate(savedInstanceState); 12 setContentView(R.layout.main); 13 } 14

Llamamos al mtodo que creamos con el android:onClick , y pasamos a variables el txtTexto y RadioButton
1public void onRadioButtonClick(View v) { RadioButton button = (RadioButton) v; 2 TextView txttexto = (TextView) findViewById(R.id.txtTexto); 3 txttexto.setText("has pulsado "+ button.getText()); 4 5} 6}

El resultado es el siguiente:

Ing. Ubaldo Jorge Lpez X

Pgina 10

CheckBox
El CheckBox es un botn con dos estados, pulsado o no pulsado como el que vemos a continuacin :

Vamos a crear un TextBox con un texto que se modificar segn la actividad del Checkbox 1 <?xml version="1.0" encoding="utf-8"> <LinearLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 6 android:orientation="vertical"> 7 8 <CheckBox 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 12 android:id="@+id/chkBox" 13 android:text="Botn CheckBox"/> 14 15 <TextView android:layout_width="wrap_content" 16 android:layout_height="wrap_content" 17 18 android:id="@+id/txtView" 19 android:text="Sin pulsar"/> 20 </LinearLayout> El resultado es el siguiente :

Pantalla inicial
Ahora modificaremos el archivo Java. Usaremos el OnClickListener para controlar el evento al pulsar sobre el CheckBox y con ello modificar el texto de nuestro TextView 1 package com.practica.android; import android.app.Activity; 2 import android.os.Bundle; 3

Ing. Ubaldo Jorge Lpez X

Pgina 11

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

import android.view.View; import android.view.View.OnClickListener; import android.widget.CheckBox; import android.widget.TextView; public class PracticaActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); verificarCheckbox(); } private void verificarCheckbox() { CheckBox chkbox = (CheckBox) findViewById(R.id.chkBox); final TextView txtview = (TextView) findViewById(R.id.txtView); chkbox.setOnClickListener(new OnClickListener() { public void onClick(View v) { if (((CheckBox) v).isChecked()) { txtview.setText("Pulsado"); } else { txtview.setText("No Pulsado"); } } }); } }

El resultado es el siguiente:

TableLayout
Con esta instruccin, organizamos los componentes que se visualizan en pantalla en forma de tablas, para ello tambin usaremos TableRow para realizar las divisiones. 1 2 3 4 5 6 7 8 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TableRow>

Ing. Ubaldo Jorge Lpez X

Pgina 12

9 <Button android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:text="boton 1" /> 12 13<Button android:layout_width="wrap_content" 14 android:layout_height="wrap_content" 15 android:text="boton 2" /> 16 17</TableRow> <TableRow> 18 <Button 19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:text="boton 3" /> 22 23<Button android:layout_width="wrap_content" 24 android:layout_height="wrap_content" 25 android:text="boton 4" /> 26 27</TableLayout>

El resultado es el siguiente

RelativeLayout
Con esta instruccin, organizamos los componentes que se visualizan en pantalla en referencia a uno en concreto. Lo veremos mejor con un ejemplo. En primer lugar crearemos un botn PADRE, para ello le daremos una ID para poder referenciarlo ms adelante y usaremos el Layout_alingParentTop=true para colocarlo en la parte superior de la pantalla.
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="fill_parent" android:layout_height="fill_parent"> 4 5 <Button android:id="@+id/BotonPadre" 6 android:layout_width="wrap_content" 7 android:layout_height="wrap_content" 8 android:layout_alignParentTop="true" 9 android:text=&quot;Padre" /> 10

Ing. Ubaldo Jorge Lpez X

Pgina 13

Ahora crearemos un botn que llamaremos BotonHijo y con la instruccin layout_below lo colocaremos debajo del BotonPadre:
1<Button 2 android:id="@+id/BotonHijo" android:layout_width="wrap_content" 3 android:layout_height="wrap_content" 4 android:layout_below="@+id/BotonPadre" 5 android:text="Hijo"/> 6 7</RelativeLayout>

El resultado es el siguiente:

Algunas disposiciones para los RelativeLayout android: layout_toLeftOf Para posicionarlo a la izquierda del que referenciamos. android: layout_toRightOf Para posicionarlo a la derecha del que referenciamos . android: layout_alignParentBottom como true (verdadero) para posicionarlo en la parte baja del todo

LinearLayout
Con esta instruccin, organizamos los componentes que se visualizan en pantalla en una fila o en una columna. Por defecto y si no indicamos lo contrario, el diseo ser en vertical:
1 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 2

Ing. Ubaldo Jorge Lpez X

Pgina 14

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&quot;fill_parent" android:layout_height=&quot;fill_parent" android:orientation=&quot;vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="boton1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="boton2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="boton3"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="boton4"/> </LinearLayout>

El resultado es el siguiente:

Si modificamos la siguiente linea : 1android:orientation="horizontal" El resultado es el siguiente:

Ing. Ubaldo Jorge Lpez X

Pgina 15

AbsoluteLayout
Con esta instruccin, organizamos los componentes mediantes las coordenadas (x,y). Esta opcin no es nada recomendable ya que desconocemos la resolucin del terminal, y podemos dejar espacios libres o incluso superpuestos Archivo main.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <AbsoluteLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent" 6 android:orientation="vertical"> 7 8 <Button 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:layout_x="50px" 12 android:layout_y="50px" android:text="boton 1"/> 13 14 <Button 15 android:layout_width="wrap_content" 16 android:layout_height="wrap_content" 17 android:layout_x="150px" 18 android:layout_y="50px" 19 android:text="boton 2"/> 20 21 <Button 22 android:layout_width="wrap_content" 23 android:layout_height="wrap_content" 24 android:layout_x="50px" 25 android:layout_y="150px" 26 android:text="boton 3"/> 27 28 </AbsoluteLayout> 29 El resultado es el siguiente

Ejemplo de absoluteLayout

Ing. Ubaldo Jorge Lpez X

Pgina 16

ImageView

Usaremos el ImageView cuando queremos mostrar una imagen. La ruta del archivo se la indicamos en el android:src. El formato aceptado es JPG, GIF y PNG. Te mostramos como hacerlo:

1 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width=&quot;fill_parent" 4 android:layout_height=&quot;fill_parent" 5 android:orientation=&quot;vertical"> 6 7 <ImageView 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:src="@drawable/android"/> 11 12 </LinearLayout> 13 Resultado:

Para subir las imgenes al Eclipse, simplemente lo arrastras desde tu carpeta a res/drawable-hdpi.

ImageButton
Con esta opcin, podremos insertar una imagen en nuestro Button, Para ello usaremos el formato png en nuestra imagen, y la subiremos a res/drawable-hdpi del Eclipse. Ahora solo nos falta incluir la ruta en nuestro button. Aqui tienes un ejemplo sencillo de como hacerlo:

Ing. Ubaldo Jorge Lpez X

Pgina 17

1 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width=&quot;fill_parent" 4 android:layout_height=&quot;fill_parent" 5 android:orientation=&quot;vertical"> 6 7 <ImageButton 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:src="@drawable/ok"/> 11 12 <ImageButton 13 android:layout_width="wrap_content" 14 android:layout_height="wrap_content" 15 android:src="@drawable/no"/> 16 17 </LinearLayout> 18 El resultado es el siguiente:

Para incluir los png dentro de la carpeta, simplemente los hemos desde el origen:

MenuItem
Crearemos un men que aparecer al pulsar el botn fsico del terminal. El resultado ser el siguiente:

Ing. Ubaldo Jorge Lpez X

Pgina 18

En primer lugar dejaremos el archivo XML como sigue:

1<?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width=&quot;fill_parent" 4 android:layout_height=&quot;fill_parent" 5 android:orientation=&quot;vertical"> 6 </LinearLayout> 7

Seguiremos los siguientes pasos para crear un nuevo archivo xml que llamaremos menuTeclado. Pulsamo el botn derecho sobre la carpeta res, vamos a New Folder :

Nombraremos a la nueva carpeta como menu y pulsamos Finish

Ing. Ubaldo Jorge Lpez X

Pgina 19

Pulsamos sobre la nueva carpeta creada y nos vamos a Android XML file :

Nombraremos el archivo como : menuinicio

Vamos a introducir el siguiente codigo en la nueva carpeta.

1 <?xml version="1.0&" encoding="utf-8"?> <menu 2 xmlns:android="http://schemas.android.com/apk/res/android"> 3 4

Ing. Ubaldo Jorge Lpez X

Pgina 20

5 6 7 8 9 10 11 12

<item android:id="@+id/Opcion1" android:title="Opcion1"> </item> <item android:id="@+id/Opcion2" android:title="Opcion2"> </item> <item android:id="@+id/Opcion3" android:title="Opcion3"> </item> </menu>

Con las siguientes instrucciones en el archivo java activaremos el botn fsico del mvil:
1 package com.practica.android; 2 import android.app.Activity; 3 import android.os.Bundle; 4 import android.view.Menu; 5 import android.view.MenuInflater; 6 public class PracticaActivity extends Activity { 7 public void onCreate(Bundle savedInstanceState) { 8 super.onCreate(savedInstanceState); 9 setContentView(R.layout.main); 10 } 11 @Override 12 public boolean onCreateOptionsMenu(Menu menu) { 13 MenuInflater inflater = getMenuInflater(); 14 inflater.inflate(R.menu.menuinicio, menu); 15 return true; 16 }} 17

ToggleButton
Con este botn obtenemos dos estados: Pulsado o no pulsado. Veremos como crearlo y crearemos un evento al pulsarlo. En primer lugar desarrollaremos un entorno donde tendremos un ToggleButon que modificar un texto segn su estado:

1 <?xml version="1.0" encoding="utf-8"> 2 <LinearLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 8 <ToggleButton 9 android:layout_width="wrap_content" android:layout_height="wrap_content" 10 android:id="@+id/btnBoton1" 11 android:textOn="ON" 12 android:textOff="OFF"/> 13 14 <TextView 15

Ing. Ubaldo Jorge Lpez X

Pgina 21

16 17 18 19 20 21

android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/txtTexto" android:text="No lo has pulsado"/> </LinearLayout>

Con esto tenemos preparado la pantalla de inicio :

Ahora modificaremos el archivo Java :

1 package com.practica.android; import android.app.Activity; 2 import android.os.Bundle; 3 import android.view.View; 4 import android.view.View.OnClickListener; 5 import android.widget.TextView; 6 import android.widget.ToggleButton; 7 8 9 @Override 10 public void onCreate(Bundle savedInstanceState) { 11 super.onCreate(savedInstanceState); 12 setContentView(R.layout.main); 13 14 15 16 ToggleButton btnboton1 = (ToggleButton) findViewById(R.id.btnBoton1); 17 final TextView txttexto = (TextView) findViewById(R.id.txtTexto); 18 19 btnboton1.setOnClickListener(new OnClickListener() 20 { 21 @Override 22 public void onClick(View v) 23 { 24 txttexto.setText("Pulsado"); }}); 25 } 26 } 27 28

El resultado es el siguiente una vez pulsado el botn:

Ing. Ubaldo Jorge Lpez X

Pgina 22

Toast
El Toast es un pop up flotante que aparece en pantalla un breve espacio de tiempo. Vamos a crear el entorno, un simple botn que al pulsarlo aparezca el Toast.

1 <?xml version="1.0" encoding="utf-8"> <AbsoluteLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 android:orientation="vertical"> 6 7 <Button 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:id="@+id/btnToast" 11 android:text="Activar Toast" /> 12 </AbsoluteLayout> 13

Nos queda como sigue :

Archivo Java : 1 package com.practica.android;<br> 2 import android.app.Activity; 3 import android.os.Bundle; 4 import android.view.View; 5 import android.view.View.OnClickListener; 6

Ing. Ubaldo Jorge Lpez X

Pgina 23

import android.widget.Toast; 7 8 9 public class PracticaActivity extends Activity { 10 11 public void onCreate(Bundle savedInstanceState) { 12 super.onCreate(savedInstanceState); 13 setContentView(R.layout.main); 14 View btnboton1 = findViewById(R.id.btnToast); 15 btnboton1.setOnClickListener(new OnClickListener() { 16 public void onClick(View v) {; Toast.makeText(getApplicationContext(),&quot;Botn pulsado&quot;, 17 18Toast.LENGTH_LONG).show(); 19 20 } 21 }); }}

El resultado al pulsar el botn es el siguiente:

Obtener el API Key para el Google Maps

Para poder usar el Google Maps en nuestra aplicacin, primero debemos de obtener el API Key. Seguiremos los siguientes pasos para su obtencin depus de haber seguido el tutorial sobre como obtener el SHA1 que usaremos ms tarde. En primer lugar accederemos a la Google APIs console :

Google APIs console

Una vez logueados nos dar la opcin de crear un nuevo proyecto :

Ing. Ubaldo Jorge Lpez X

Pgina 24

A la izquierda nos aparecer un men que seleccionaremos Rename para nombrar nuestra API

Yo lo he llamado Mapa, y pulso Save :

Activamos Google Maps Android API V2 :

Pulsamos sobre el enlace :

Pulsamos sobre API Access en el men de la izquierda :

Ing. Ubaldo Jorge Lpez X Pgina 25

Aunque aparezca una API Key, esta nos nos sirve, pulsaremos sobre Create new Android Key:

En la ventana que nos aparece pegamos el cdigo SHA1 que vimos en este tutorial , seguido de ; y nombre de nuestro paquete en la aplicacin, que en mi caso es: es.tutorialandroid.mapav2 :

Ya obtenemos nuestro API Key para nuestro proyecto :

Obtener el SHA1 para el Google Maps

Para empezar a trabajar con el GoogleMaps en nuestro proyecto, debemos de realizar una serie de pasos previos para poder usarlo. Para poder usar este sevicio, tenemos que registrar nuestra aplicacin. Necesitaremos dos claves en este orden, el SHA1 para luego obtener la API KEY. En este tutorial veremos como obtener nuestra primera clave en un entorno Windows.

Vamos a localizar donde tiene guardado ECLIPSE la clave del Debug Para ello vamos a Window / Preferences

Ing. Ubaldo Jorge Lpez X

Pgina 26

Una vez abierto vamos a Android / Build. Aqui encontramos la ruta de la Key.

Copiamos la ruta excepto el debug.keystore

Como se puede observar, en mi caso el certificado de pruebas est en la ruta C:\Users\yomero\.android\debug.keystore. Pues bien, para obtener nuestra huella digital SHA1 deberemos acceder a dicha ruta desde la consola de comando de Windows y ejecutar los siguientes comandos: abrimos la ventana de comandos:

Ing. Ubaldo Jorge Lpez X

Pgina 27

1 Tecleamos cd .android (Esto es en mi caso) 2 "C:\Program Files\Java\jdk1.7.0_07\bin\keytool.exe" -list -v -keystore debug.keystore alias androiddebugkey -storepass android -keypass android

Esto nos deber devolver varios datos del certificado, entre ellos la huella SHA1. Pues bien, nos copiamos este dato y lo aadimos a la ventana de obtencin de la API Key donde nos habamos quedado antes, y a continuacin separado por un punto y coma aadimos el paquete java que vayamos a utilizar en nuestra aplicacin, que en mi caso ser
package="com.example.mapita"

Pulsamos el botn Create y ya deberamos tener nuestra API Key generada, podremos verla en la pantalla siguiente dentro del apartado Key for Android Apps (with certificates). Apuntaremos tambin este dato para utilizarlo ms tarde.

Ing. Ubaldo Jorge Lpez X

Pgina 28

Con esto ya habramos concluido los preparativos iniciales necesarios para utilizar el servicio de mapas de Android en nuestras propias aplicaciones, por lo que empecemos a crear un proyecto de ejemplo en Eclipse. No cierres el Api Key lo utilizaras despus.

Google maps Android API V2

Para seguir este tutorial, previamente tenemos que haber seguido los siguientes tutoriales : Obtener SHA1 Obtener API Key Veamos en un ejemplo prctico como usar las librerias de Google Maps en la nueva versin API V2. En primer lugar veremos si las tenemos instaladas para poder usarlas. Dentro del eclipse abrimos el SDK Manager :

Verifico que tengo instalado el Google Play Services. En mi caso la ltima versin a 5 de marzo de 2013 es la 5:

Una vez comprobado que tenemos las libreras, crearemos un proyecto al que yo he denominado MapaV2 :

Ing. Ubaldo Jorge Lpez X

Pgina 29

Importamos la librera a nuestro proyecto :

Seleccionamos la ubicacin dentro de la carpeta Android y pulsamos Next:

Browse

Ing. Ubaldo Jorge Lpez X

Pgina 30

Accedemos a la carpeta libproject y pulsamos aceptar:

Pulsamos sobre finish :

Ing. Ubaldo Jorge Lpez X

Pgina 31

En este punto, todava no han sido importadas a nuestro proyecto :

Para incluirla en nuestro proyecto tenemos que ir a propiedades del proyecto / carpeta Android:

Y en la parte baja pulsamos sobre Add:

Ing. Ubaldo Jorge Lpez X

Pgina 32

Seleccionamos la librera y pulsamos Ok :

Volvemos a pulsar Ok

Ya hemos aadido las libreras necesarias :

Ing. Ubaldo Jorge Lpez X

Pgina 33

Vamos a modificar el Manifest como sigue: Crearemos un meda-data como sigue pero con el valor de nuestra API Key : 1<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="api_key"/> 2 Agregamos los siguientes permisos : <permission 1 android:name="es.tutorialandroid.mapav2.permission.MAPS_RECEIVE" 2 android:protectionLevel="signature"/> 3 <uses-permission 4 android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/> 5 <uses-permission android:name="android.permission.INTERNET"/> 6 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 7 <uses-feature android:glEsVersion="0x00020000" 8 android:required="true"/> As quedara nuestro Manifest : Recuerda modificar los valores del API Key y el nombre de tu Package en mi caso era package="com.example.mapita4" 1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 3 package="es.tutorialandroid.mapav2" 4 android:versionCode="1" 5 android:versionName="1.0" > 6 7 <uses-sdk 8 android:minSdkVersion="8" 9 android:targetSdkVersion="16" /> 10 <permission 11 android:name="es.tutorialandroid.mapav2.permission.MAPS_RECEIVE" 12 android:protectionLevel="signature"/> <uses-permission 13 14android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/> <uses-permission android:name="android.permission.INTERNET"/> 15 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 16 <uses-feature android:glEsVersion="0x00020000" 17 android:required="true"/> 18 19 <application 20 android:allowBackup="true" 21 android:icon="@drawable/ic_launcher" 22 android:label="@string/app_name" 23 android:theme="@style/AppTheme" > 24 <activity 25 android:name="es.tutorialandroid.mapav2.MainActivity" 26 android:label="@string/app_name" > 27 <intent-filter> 28 <action android:name="android.intent.action.MAIN" /> 29 30 <category android:name="android.intent.category.LAUNCHER" /> 31 </intent-filter> 32

Ing. Ubaldo Jorge Lpez X

Pgina 34

</activity> 33 <meta-data android:name="com.google.android.maps.v2.API_KEY" 34 android:value="AIzaSyAPeOQ07w7_Gaqo-uJddOeQpT8UgLcwwqM"/> 35 </application> 36 37 </manifest> El cdigo Java como sigue : 1 package es.tutorialandroid.mapav2; 2 3 import android.os.Bundle; 4 import android.app.Activity; 5 import android.view.Menu; 6 7 8 9 public class MainActivity extends android.support.v4.app.FragmentActivity { 10 11 @Override 12 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); 13 setContentView(R.layout.activity_main); 14 } 15 16 17 @Override 18 public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. 19 getMenuInflater().inflate(R.menu.activity_main, menu); 20 return true; 21 } 22 23} Y por ltimo nuestro XML : 1<?xml version="1.0" encoding="utf-8"?> 2<fragment xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/map" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 class="com.google.android.gms.maps.SupportMapFragment"/> 6 El resultado es el siguiente :

Ing. Ubaldo Jorge Lpez X

Pgina 35

Nuestro primer mapa en android

Despus de haber obtenido nuestro API KEY, ya podemos empezar a crear nuestro primer mapa. En esta ocasin realizaremos un proyecto que simplemente nos ensear un mapa, l. Comencemos: Abrimos el manifest para aadir la libreria de Google Maps a nuestra aplicacin. 1.- Abrir Manifest. 2.- Abrir pestaa Application. 3.- Pulsar sobre Add

ms adelante veremos la forma de interactuar con

Seleccionamos Uses Library

Marcamos la librera que vamos a usar

En el Manifest crearemos 3 permisos: Permiso para localizacion aproximada mediante triangulacin de antenas: <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> Permiso para localizacin exacta mediante GPS: <uses-permission android:name=&quot;android.permission.ACCESS_FINE_LOCATION"/> Permiso para usar Internet (Imprescindible) <uses-permission android:name="android.permission.INTERNET"/>

Ing. Ubaldo Jorge Lpez X

Pgina 36

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.mapita4" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" /> <permission android:name="com.example.mapita4.permission.MAPS_RECEIVE" android:protectionLevel="signature"/> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-feature android:glEsVersion="0x00020000" android:required="true"/> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.example.mapita4.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" />

Api Key

<category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyCA4330YIOvwE2bKroXqOIOzLqtG0NbvIA" /> </application> </manifest> Modificamos el activity_main de la siguiente forma: 1 <?xml version="1.0" encoding="utf-8"> 2 <RelativeLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="match_parent" android:layout_height="match_parent" 5 tools:context=".MainActivity"> 6 7 <com.google.android.maps.MapView 8 android:id="@+id/mapa" 9 android:layout_width="fill_parent" 10 android:layout_height="fill_parent" 11 android:apiKey="Aqui tu Api Key"/> 12 </RelativeLayout> 13 Y por iltimo el cdigo Java: 1 package com.example.mapita4; 2 import com.google.android.maps.MapActivity; 3 import com.google.android.maps.MapView; 4 import android.os.Bundle; 5 import android.app.Activity; import android.view.Menu; 6 public class MainActivity extends MapActivity { 7 private MapView mapView; 8

Ing. Ubaldo Jorge Lpez X

Pgina 37

9 10 11 12 13 14 15 16 17 18 19 20

public void onCreate(Bundle bundle) { super.onCreate(bundle); setContentView(R.layout.activity_main); mapView = (MapView) findViewById(R.id.mapa); } @Override protected boolean isRouteDisplayed() { // TODO Auto-generated method stub return false; } }

Ejecutamos y el resultado es el siguiente

Mi localizacion en Google Maps API v2

Siguiendo con los tutoriales sobre los GoogleMaps en Android, vamos a crear un mapa que nos localice y dibuje un punto sobre en nuestra hubicacin. Partiremos que ya has ledo los anteriores tutoriales y sabes como realizar un mapa Tutorial de Mapas. Lo primero que tenemos que modificar es el Manifest para poder usar el GPS y la triangulacin de antena, por lo que nos quedar como sigue: <?xml version="1.0" encoding="utf-8"?> 1 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 2 package="es.tutorialandroid.mapav2" 3 android:versionCode="1" 4 android:versionName="1.0" > 5 6 <uses-sdk 7 android:minSdkVersion="8" 8 android:targetSdkVersion="16" /> 9 <permission 10 android:name="es.tutorialandroid.mapav2.permission.MAPS_RECEIVE" 11 android:protectionLevel="signature"/> 12 <uses-permission 13android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/> 14 <uses-permission android:name="android.permission.INTERNET"/>

Ing. Ubaldo Jorge Lpez X

Pgina 38

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 15 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 16 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 17 <uses-feature android:glEsVersion="0x00020000" 18 android:required="true"/> 19 20 <application 21 android:allowBackup="true" 22 android:icon="@drawable/ic_launcher" 23 android:label="@string/app_name" 24 android:theme="@style/AppTheme" > 25 <activity 26 android:name="es.tutorialandroid.mapav2.MainActivity" 27 android:label="@string/app_name" > 28 <intent-filter> 29 <action android:name="android.intent.action.MAIN" /> 30 31 <category android:name="android.intent.category.LAUNCHER" /> 32 </intent-filter> 33 </activity> 34 <meta-data android:name="com.google.android.maps.v2.API_KEY" 35 android:value="AIzaSyAPeOQ07w7_Gaqo-uJddOeQpT8UgLcwwqM"/> 36 </application> 37 38 39</manifest> El activity_main no lo modificamos : 1<?xml version="1.0" encoding="utf-8"?> 2<fragment xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/map" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 class="com.google.android.gms.maps.SupportMapFragment"/> 6 Y el MainActivity.java : 1 package es.tutorialandroid.mapav2; 2 3 import com.google.android.gms.maps.GoogleMap; 4 5 import com.google.android.gms.maps.SupportMapFragment; 6 7 8 import android.location.Location; 9 import android.location.LocationListener; 10import android.os.Bundle; 11 12import android.support.v4.app.FragmentActivity; 13import android.view.Menu; 14 15 16 17public class MainActivity extends FragmentActivity implements LocationListener { GoogleMap googlemap; 18 19 20 @Override 21 protected void onCreate(Bundle savedInstanceState) { 22 super.onCreate(savedInstanceState); 23 setContentView(R.layout.activity_main); 24 SupportMapFragment mf = (SupportMapFragment) 25 26getSupportFragmentManager().findFragmentById(R.id.map); googlemap = mf.getMap(); 27 28 googlemap.setMyLocationEnabled(true); 29 30 } 31

Ing. Ubaldo Jorge Lpez X

Pgina 39

32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 }

@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. return true; } @Override public void onLocationChanged(Location arg0) { // TODO Auto-generated method stub } @Override public void onProviderDisabled(String provider) { // TODO Auto-generated method stub } @Override public void onProviderEnabled(String provider) { // TODO Auto-generated method stub } @Override public void onStatusChanged(String provider, int status, Bundle extras) { // TODO Auto-generated method stub }

El resultado es el siguiente: Aparece un punto sobre Las Islas Canarias, que es donde estoy.

Y si nos acercamos con el zoom, vemos mi posicin an mas exacta. Estoy en Santa Cruz de Tenerife:

Ing. Ubaldo Jorge Lpez X

Pgina 40

Insertar icono GoogleMap API v2

Vamos a marcar un punto en nuestro mapa, le incluiremos un ttulo, un comentario y como marcador usaremos un BitmapDescriptorFactory.HUE_GREEN . Usaremos como base nuestro tutorial mi primer mapa. Buscamos en el navegador el punto que quiero que aparezca en mi mapa, en este caso el monumento de La Cibeles en Madrid. Pulso en el botn para enlazar y me aparece una nueva ventana con los datos que necesito : latitud y longitud.

Ahora en el eclipse empiezo a realizar las modificaciones en el MainActivity.java. Creo un nuevo mtodo que en este caso lo he llamado addMarcador : 1addMarcador(); Y mi addMarcador recin creado le incluyo los siguientes datos: 1private void addMarcador() { 2 LatLng latlng = new LatLng(40.419193,-3.692892); 3 googlemap.addMarker(new MarkerOptions() 4 .title("La Cibeles") .position(latlng) 5 .snippet("Monumento") 6 .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN)) 7 ); 8

Ing. Ubaldo Jorge Lpez X

Pgina 41

Veamos el resultado :

Si realizamos un zoom y pulsamos sobre el icono :

Ing. Ubaldo Jorge Lpez X

Pgina 42