Páginas

26 dic. 2012

Crear aplicaciones Multiidioma para Android

En los dos últimos artículos intenté mostrar todo el proceso de creación de una aplicación y, sobretodo, cómo dar los primeros pasos desarrollando aplicaciones de mapas utilizando Google Maps Android API v2. En ésta ocasión y a raiz de que creo que la aplicación que desarrollé a modo de ejemplo podría tener algo de tirón dentro de toda la comunidad de musulmanes a nivel internacional y no sólo entre los musulmanes hispanohablantes como pensé en un principio he decidido hacer multi-idioma dicha aplicación para que cualquier musulman del planeta la pueda utilizar.

Lo primero que voy a hacer va a ser cambiarla de nombre para que tenga un nombre más internacional. Me he preguntado cuál es el idioma que más musulmanes hablan y buscando un poco he encontrado ésta pregunta y una buena respuesta dice:
El mayor número de musulmanes del mundo hablan Filipino, Indú, Arabe y Francés, ya que en cuanto a números la mayor cantidad de Musulmanes están en el sudeste de Asia, en la India, en la llamada "Media Luna" de Oriente Medio y en los países excolonias belgo/francesas de Africa.
Atendiendo a esa respuesta y haciendo varias búsquedas en Google barajo varios posibles nombres,  Mekah y Makkah, siendo esta segunda la palabra más internacional de todas para referirse a La Meca. Creo que la voy a cambiar de nombre a Makkah Compass.

Hay una manera fácil y recomendada para hacer aplicaciones multi-idioma para Android y consiste en crear una carpeta llamada "values-sufijo" que contenga el strings.xml que corresponda dentro, por ejemplo values-en tendrá en su interior el fichero con los textos en inglés. (podéis ver la documentación oficial aquí: http://developer.android.com/guide/topics/resources/localization.html )

He encontrado el listado de los ISO Country codes aquí:


Voy a empezar con:

AE UNITED ARAB EMIRATES
FR FRANCE
ID INDONESIA
IQ IRAQ officially assigned
IR IRAN, ISLAMIC REPUBLIC OF
PH PHILIPPINES
PK PAKISTAN
PS PALESTINIAN TERRITORY, OCCUPIED
IN INDIA

Éstos son los distintos ficheros strings.xml que acabo de generar:

values-ae/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro"></string>
    <string name="lanzar_mapa">الى اين هو الكعبة؟</string>
    <string name="lanzar_configuracion_gps">GPS إعدادات</string>
    <string name="app_name">مكة البوصلة</string>

</resources>
values-es/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro">La unicidad de Dios se expresa ritualmente en la oración comunitaria, que todos los musulmanes deben observar, rezando en la misma dirección: hacia la Kaaba, la primera casa de Dios.</string>
    <string name="lanzar_mapa">¿Hacia dónde está la Kabaa?</string>
    <string name="lanzar_configuracion_gps">Configuración GPS</string>
    <string name="app_name">Makkah Compass</string>

</resources>
values-fr/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro">L\'unicité de Dieu est exprimé rituellement dans la prière communautaire, tous les musulmans doivent observer, en priant dans la même direction: vers la Kaaba, la première maison de Dieu.</string>
    <string name="lanzar_mapa">Où se trouve la Kaaba?</string>
    <string name="lanzar_configuracion_gps">Paramètres GPS</string>
    <string name="app_name">La Mecque boussole</string>

</resources>
values-id/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro">Keesaan Tuhan diungkapkan dalam doa ritual komunitas, semua muslim harus mengamati, berdoa dalam arah yang sama: menuju Ka'bah, rumah Allah yang pertama.</string>
    <string name="lanzar_mapa">Kemanakah adalah Ka'bah?</string>
    <string name="lanzar_configuracion_gps">GPS Pengaturan</string>
    <string name="app_name">Mekkah kompas</string>

</resources>
values-in/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro">परमेश्वर की एकता धार्मिक समुदाय प्रार्थना में व्यक्त किया है, सभी मुसलमानों का निरीक्षण, एक ही दिशा में प्रार्थना: Kaaba, भगवान के पहले घर की ओर.</string>
    <string name="lanzar_mapa">मक्का कहाँ है?</string>
    <string name="lanzar_configuracion_gps">जीपीएस सेटिंग्स</string>
    <string name="app_name">मक्का कम्पास</string>

</resources>
values-iq/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro"></string>
    <string name="lanzar_mapa">الى اين هو الكعبة؟</string>
    <string name="lanzar_configuracion_gps">GPS إعدادات</string>
    <string name="app_name">مكة البوصلة</string>

</resources>
values-ir/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro">یکتایی و یگانگی خداوند رسوم در نماز جامعه بیان می شود، همه مسلمانان باید رعایت، دعا در همان جهت به سمت کعبه، اولین خانه خدا.</string>
    <string name="lanzar_mapa">کجا کعبه است؟</string>
    <string name="lanzar_configuracion_gps">تنظیمات GPS</string>
    <string name="app_name">مکه قطب نما</string>

</resources>
values-ph/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro">Ang kaisahan ng Diyos ay ipinahayag ritually sa komunidad panalangin, ang lahat ng Muslim ay dapat obserbahan, nagdarasal sa parehong direksyon: patungo sa Kaaba, ang unang bahay ng Diyos.</string>
    <string name="lanzar_mapa">Pasaan ang Kaaba?</string>
    <string name="lanzar_configuracion_gps">GPS Setting</string>
    <string name="app_name">Mecca compass</string>

</resources>
values-pk/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro">کمیونٹی کی نماز میں خدا کی وحدانیت کا اظہار کیا ہے، تمام مسلمانوں کا مشاہدہ، ایک ہی سمت میں نماز بھی ضروری ہے: کعبہ، خدا کے پہلے گھر کی طرف.</string>
    <string name="lanzar_mapa">کعبہ کہاں ہے؟</string>
    <string name="lanzar_configuracion_gps">GPS ترتیبات</string>
    <string name="app_name">مکہ کمپاس</string>

</resources>
values-ps/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="intro_arabe">وأعرب عن وحدانية الله في الصلاة عقائديا المجتمع، يجب على جميع المسلمين مراقبة، والصلاة في نفس الاتجاه: نحو الكعبة، أول بيت الله.</string>
    <string name="intro"></string>
    <string name="lanzar_mapa">الى اين هو الكعبة؟</string>
    <string name="lanzar_configuracion_gps">GPS إعدادات</string>
    <string name="app_name">مكة البوصلة</string>

</resources>


Ha sido fácil, he copiado los cinco textos y los he ido traduciendo a los distintos idiomas oficiales de cada país, quizá en una próxima versión suba más traducciones a más idiomas pero creo que con estos será suficiente por ahora. Si alguien encuentra alguna traducción mal hecha que por favor me corrija.

إذا وجدت أي عدم تطابق الترجمة يرجى تصحيح لي.
यदि आप पाते हैं किसी भी बेमेल अनुवाद मुझे सही कृपया.
Jika Anda menemukan terjemahan mismatch tolong benar saya.
Kung nalaman mo ang anumang Maling pagtutugma ng pagsasalin paki-tama sa akin.

اگر آپ کو تلاش کسی بھی بیمیل ترجمہ براہ مہربانی آپ کے وزٹرز کا ریکارڈ رکھا درست کریں.


 La aplicación la podréis descargar en muy poco tiempo, actualizaré ésta misma entrada con el enlace a la descarga. 

24 dic. 2012

Aplicaciones de Google Maps v2 desde cero (II)

Antes de ayer le dediqué la mañana a aprender lo básico de programación con el API de Google Maps para Android y de paso a escribir un breve artículo exponiendo sin tapujos mis cábalas, lo que me iba pasando por la cabeza... Estuvo entretenido pero, como digo, me llevó toda la mañana incrustar un mapa en mi aplicación. Es cierto que tuve que leer bastante y también es cierto que tuve distracciones ya que estuve leyendo las noticias, mirando el facebook y haciendo alguna "tarea del hogar" pero no fue sencillo del todo. En pocas palabras, el anterior artículo se resume en:
  1. Crear el proyecto y el repositorio para la gestión y el control de cambios.
  2. Darle forma al código para que sea fácil de mantener, robusto y versátil.
  3. Conseguir la key del Google Maps Android API.
  4. Incluir referencias y librerías (tuve que actualizar eclipse y varios plugins y eso también me llevó un rato largo, google-play-services_lib.jar, android-support-v4.jar) 
  5. Insertar el mapa como fragment (lo que me llevó a pasar de utilizar Activity a usar FragmentActivity)
Todas estas cábalas las podéis leer con mucho mas detalle en la parte primera de ésta serie de artículos sobre Google Maps Android API.

Hoy quiero continuar con ese proyecto, el objetivo sigue siendo el mismo, construir una aplicación robusta, versátil, mantenible y ampliable enfocada a la comunidad musulmana cuya principal característica tiene que ser que nos diga siempre en qué dirección se encuentra exactamente la ciudad santa de La Meca. La planificación inicial era:

1º Requisitos
2º Análisis
3º Creación del proyecto y repositorio
4º Inserción de mapa
5º Localizar y apuntar a La Meca
6º Detalles de usabilidad
7º Crear y firmar la applicación y subirla a +Google Play

En la primera parte llegué hasta el punto 4 y hoy me gustaría terminar y publicar una versión BETA de ésta aplicación. así que empecemos.

Localización

En la actividad que maneja el mapa necesitamos un objeto tipo GoogleMap para manejarlo par alo cual hay que hacer lo siguiente:
GoogleMap mapa = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
Tendremos que importar además com.google.android.gms.maps.GoogleMap y com.google.android.gms.maps.SupportMapFragment, cosa que no debería darnos problemas si tenemos bien enlazadas las librerías del API y con ésto obtenemos una instancia del mapa que hemos declarado en la vista así:
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        class="com.google.android.gms.maps.SupportMapFragment"/>
Se pueden hacer muchas cosas con ese mapa y recomiendo leer éste segundo artículo de sgoliver sobre mapas para ver como jugar con los estilos del mapa y con la cámara, habrá cosas de ese artículo que utilizaré más adelante... Pero lo que ahora quiero es centrar el mapa en mi posición.

Haciendo mapa.setMyLocationEnabled(true); nos aparecerá el famoso círculo azul que indica nuestra posición y el radio aproximado de precisión pero el mapa seguirá centrado en el punto 0,0 y con el zoom por defecto...

Después de darle muchas vueltas a todo el tema de la localización y haber evolucionado mucho el código de mi MapActivity creo que es mejor que lo exponga y lo desgrane aquí que ir explicando los pasos que he ido siguiendo porque he dado muchas vueltas sin resultados. Es cierto que el código es bastante sucio pero esto es porque he intentado con multitud de comentarios que el código sea auto-explicativo:
package com.jgc.lameca;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.LocationSource;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.gms.maps.model.PolylineOptions;

import android.graphics.Color;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
import android.location.Criteria;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.os.Bundle;

public class MapActivity extends BaseActivity implements LocationListener, LocationSource, SensorEventListener {
 // El mapa
 private GoogleMap mMap;
 // Para escuchar los cambios de localización del usuario, 
 // si se mueve o si la localización es más precisa
 private OnLocationChangedListener mListener;
 // Para gestionar nosotros la localización y no el propio mapa y poder 
 // manejar eventos como onLocationChanged que de otra manera no podríamos gestionar
 private LocationManager locationManager;

 private boolean haveLocation = false;

 // Sensores para orientar el mapa de acuerdo a la brújula
 private SensorManager mSensorManager;
 private float[] mGravity;
 private float[] mGeomagnetic;

 // para controlar el intervalo de ejecución del evento de los sensores
 private long lastTimeCompassUpdated = 0;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.map_layout);       

  // Instanciamos locationManager
  locationManager = (LocationManager) getSystemService(LOCATION_SERVICE);
  // Establecemos la precisión
  Criteria locationCriteria = new Criteria();
  locationCriteria.setAccuracy(Criteria.ACCURACY_FINE);
  // Y establecemos que se escuche al mejor proveedor de localización 
  // (o redes móviles o GPS o WiFi, dependerá del estado del dispositivo
  // y así nos despreocupamos nosotros)
  locationManager.requestLocationUpdates(locationManager.getBestProvider(locationCriteria, true), 1L, 2F, (LocationListener) this);

  initializeMap();       
 }

 private void initializeMap() {
  // Confirmamos que no se ha inicializado el mapa todavía
  if (mMap == null) 
  {
   // obtenemos el mapa de la vista
   mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();

   // Registramos o establecemos ésta clase, MapActivity, como LocationSource 
   // del mapa para utilizar nuestro locationManager y el Listener ;)
   mMap.setLocationSource(this);

   // Inicializamos el mapa...
   if (mMap != null) 
   {
    setUpMap();     
   }
  }
 }

 private void setUpMap() 
 {
  // Nos localiza...
  mMap.setMyLocationEnabled(true);
  // Quitamos el botón de "mi posición"
  mMap.getUiSettings().setMyLocationButtonEnabled(false);
  // Pinta una marca en La Meca
  addLaMecaMarkOnMap();
  centerMapOnLaMeca();
 }

 private void addLaMecaMarkOnMap(){
  mMap.addMarker(new MarkerOptions()
  .position(new LatLng(Constants.laMecaLatitude, Constants.laMecaLongitude))
  .title("La Meca")
  .icon(BitmapDescriptorFactory.fromResource(R.drawable.icono_meca)));
 }

 public void centerMapOnLaMeca(){
  CameraPosition newCameraPosition = new CameraPosition.Builder()
  .target(new LatLng(Constants.laMecaLatitude, Constants.laMecaLatitude))      
  .zoom(1)                   
  .bearing(0)        
  .tilt(0)                  
  .build();  

  mMap.animateCamera(CameraUpdateFactory.newCameraPosition(newCameraPosition));
 }

 private void initialiceSensors() {
  mSensorManager = (SensorManager)getSystemService(SENSOR_SERVICE);
  // Vamos a usar el acelerómetro y el sensor magnético
  Sensor gsensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
  Sensor msensor = mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);

  mSensorManager.registerListener(this, gsensor, SensorManager.SENSOR_DELAY_NORMAL); 
  mSensorManager.registerListener(this, msensor, SensorManager.SENSOR_DELAY_NORMAL);
 } 

 private void drawLineBetweenOurLocationAndLaMeca(){
  // Debe ejecutarse cuando sepamos nuestra localización
  // es decir, onLocationChanged
  Location myLocation = mMap.getMyLocation();
  LatLng myLatLng = new LatLng(myLocation.getLatitude(), myLocation.getLongitude());
  LatLng laMecaLatLng = new LatLng(Constants.laMecaLatitude, Constants.laMecaLongitude);

  // creamos un polyline (linea poligonal) con dos puntos
  PolylineOptions rectOptions = new PolylineOptions()
  .add(myLatLng) // nuestra posición
  .add(laMecaLatLng); // la posición de la meca

  // pintamos esa línea de color verde
  rectOptions.color(Color.GREEN);

  // Y la añadimos al mapa
  mMap.addPolyline(rectOptions); 
 }

 @Override
 public void onPause()
 {
  if(locationManager != null)
  {
   locationManager.removeUpdates((LocationListener) this);
  }

  super.onPause();
 }

 @Override
 public void onResume()
 {
  super.onResume();

  initializeMap();

  if(locationManager != null)
  {
   mMap.setMyLocationEnabled(true);
  }
 }


 public void activate(OnLocationChangedListener listener) 
 {
  mListener = listener;
 }

 public void deactivate() 
 {
  mListener = null;
 }

 public void onLocationChanged(Location location) 
 {
  if (!haveLocation){
   initialiceSensors();
   haveLocation = true;
  }
  mMap.clear();
  if( mListener != null )
  {
   addLaMecaMarkOnMap();

   mListener.onLocationChanged( location );
   CameraPosition newCameraPosition = new CameraPosition.Builder()
   .target(new LatLng(location.getLatitude(), location.getLongitude()))      // centra el mapa en nuestra posición
   .zoom(19)   // establece el zoom
   .bearing(0)        
   .tilt(0)                  
   .build();  

   //Move the camera to the user's location once it's available!
   mMap.animateCamera(CameraUpdateFactory.newCameraPosition(newCameraPosition)); 
   drawLineBetweenOurLocationAndLaMeca();

  }
 }

 public void onProviderDisabled(String provider) 
 {
  // cuando se deshabilita un probeedor de localización... prefiero no hacer nada
  // Toast.makeText(this, "provider disabled", Toast.LENGTH_SHORT).show();
 }

 public void onProviderEnabled(String provider) 
 {
  // cuando se habilita un probeedor de localización... prefiero no hacer nada
  // Toast.makeText(this, "provider enabled", Toast.LENGTH_SHORT).show();
 }

 public void onStatusChanged(String provider, int status, Bundle extras) 
 {
  // Cuando cambia el estado de la localización... prefiero no hacer nada
  // Toast.makeText(this, "status changed", Toast.LENGTH_SHORT).show();
 }

 public void onAccuracyChanged(Sensor sensor, int accuracy) {
  // cuando cambia la precisión...
 }


 public void onSensorChanged(SensorEvent event) {
  // quiero dejar un margen de 3 segundos al principio
  // para la animación hasta el punto donde se encuentra el usuario...
  if (lastTimeCompassUpdated == 0){
   lastTimeCompassUpdated = System.currentTimeMillis()+3000;
   return;
  }
  else if (System.currentTimeMillis()>lastTimeCompassUpdated ){
   if (mMap!=null){
    int matrix_size = 16;
    float[] R = new float[matrix_size];
    float[] outR = new float[matrix_size];

    if (event.accuracy == SensorManager.SENSOR_STATUS_UNRELIABLE)
     return;

    switch (event.sensor.getType()) {
    case Sensor.TYPE_MAGNETIC_FIELD:
     mGeomagnetic = event.values.clone();
     break;
    case Sensor.TYPE_ACCELEROMETER:
     mGravity = event.values.clone();
     break;
    }

    if (mGeomagnetic != null && mGravity != null) {
     if (SensorManager.getRotationMatrix(R, null, mGravity, mGeomagnetic)) {
      SensorManager.getOrientation(R, outR);
     }

     CameraPosition oldPosition = mMap.getCameraPosition();

     // Quiero que sólo se actualice si hay una variación de mas de un grado
     //if (Math.abs(Math.abs(oldPosition.bearing) - Math.abs(Math.toDegrees(outR[0])))>1){

     CameraPosition newCameraPosition = new CameraPosition.Builder()
     .target(oldPosition.target)      // Sets the center of the map to Mountain View
     .zoom(oldPosition.zoom)                   // Sets the zoom
     .bearing((float) Math.toDegrees(outR[0]))        
     .tilt(oldPosition.tilt)                 
     .build();                   // Creates a CameraPosition from the builder

     mMap.moveCamera(CameraUpdateFactory.newCameraPosition(newCameraPosition));
     
    }
   }
  }
 }
}
Si te fijas el código es muy lineal, hay una secuencia de acontecimientos. Se pinta el icono sobre la meca y se centra la cámara en ese punto y cuando el dispositivo da una localización (onLocationChanged) si es la primera localización se inicializan los sensores y se lanza una animación de la cámara hasta nuestra posición.

Durante mis pruebas y errores me he encontrado con que el giro (la animación o el movimiento) de la cámara de acuerdo a los sensores interrumpía las animaciones del mapa, es decir, el movimiento de la cámara de un punto a otro, si éste movimiento se hacía por código, es decir, si hacia un movimiento desde La Meca hasta mi localización y empezaban a funcionar los sensores (onSensorChanged) el ajuste de la orientación de la cámara en ese método paraba la animación así que decidí meter un pequeño retardo de tres segundos en el evento la primera vez e inicializar los sensores una vez tuviera una localización. Así he conseguido que, primero el mapa nos muestre La Meca y una vez sepamos donde estamos movernos "elegantemente" hasta nuestra posición y, tres segundos después, orientar nuestro mapa de acuerdo a la brújula para saber en qué dirección se encuentra exáctamente La Meca. 

Hay que tener en cuenta también que si no hay ningún proveedor de localización éste código fallará y se cerrará la aplicación, por tanto lo que debemos hacer es obligar a que haya un proveedor de localización activo antes de poder lanzar ésta actividad. Para ello, en EntryPointActivity, tengo el siguiente código:
import android.location.LocationManager;
import android.os.Bundle;
import android.widget.Button;

public class EntryPointActivity extends BaseActivity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
 }
 
 @Override
 protected void onResume() {
  setMapButtonVisibility();
  super.onResume();
 }

 private void setMapButtonVisibility() {
  LocationManager locationManager = (LocationManager) getSystemService(LOCATION_SERVICE);

  boolean network_enabled=locationManager.isProviderEnabled(LocationManager.NETWORK_PROVIDER);
  boolean gps_enabled=locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER);
  Button mapButton = ((Button)this.findViewById(R.id.ep_map_button)); 
  if (!(network_enabled || gps_enabled)){
   
   mapButton.setEnabled(false);
  }
  else {
   mapButton.setEnabled(true);
  }
 }
}
Lo último que nos queda por hacer antes de poder firmar y subir a Google Play es pulir detalles de interfaz de usuario y de usabilidad... vamos con ello:

Interfaz de Usuario

Que no se crea nadie que me he complicado demasiado, he buscado un mensaje que invita a la oración, lo he traducido al árabe y he incluido los dos textos, he buscado alguna imagen bonita de la Kaaba y la he centrado y colocado como background del layout principal, también he centrado los botones y buscado una imagen pequeña de la Kaaba para utilizarla como icono de la aplicación. Así ha quedado el xml (main.xml) de EntryPoint:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/centered"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="@string/intro_arabe" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="@string/intro" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="1dip"
        android:orientation="vertical" >

        <Button
            android:id="@+id/ep_gps_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="25dp"
            android:onClick="onClickFeature"
            android:text="@string/lanzar_configuracion_gps" />

        <Button
            android:id="@+id/ep_map_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/ep_gps_button"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="14dp"
            android:onClick="onClickFeature"
            android:text="@string/lanzar_mapa" />

     </RelativeLayout>

</LinearLayout>
Respecto al centrado de la imagen, he creado un fichero en /res/drawable llamado centered.xml así:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:src="@drawable/Kaaba_mirror_edit_jj" />

Esto hace que la imagen elegida quede centrada y no se deforme, ha quedado así a la primera y me ha gustado aunque quizá en móviles con la pantalla un poco más pequeña no quede del todo bien, ya me plantearé ese ajuste más adelante, de momento doy por terminado "el maquillaje" y voy a firmar la aplicación y a subirla a Google Play.

Para firmar la aplicación: Botón derecho sobre el proyecto -> Android Tools -> Export Signed Application Package... Pones tus credenciales, creas el apk, bas a https://play.google.com/apps/publish  y subes tu aplicación...

(siento haber resumido ésto tanto pero da para varias entradas y ya se ha escrito mucho sobre firmar aplicaciones y gestionar tus aplicaciones en Google Play, en cuanto esté activa pondré un enlace para que veáis el resultado)


Y como hoy es Noche Buena voy a ducharme y a vestirme para ir a cenar con mi familia, espero que éste artículo sirva como introducción a la programación de aplicaciones con Google Maps. En el próximo artículo me gustaría hacer una nueva versión de ésta aplicación donde aparezcan laas mezquitas más cercanas, tendré que buscar si existe esa información en algún sitio y hacer un poco de I+D, y eso será dentro de unos días...

¡Hasta la próxima entrada!

Juan García Carmona
d.jgc.it@gmail.com



21 dic. 2012

Aplicación de Google Maps Android API v2 desde cero

Hola a tod@s. En ésta entrada quiero compartir con los lectores el proceso de creación de una aplicación desde cero. Tengo como objetivo aprender a utilizar los mapas de +Google Maps en +Android y se me ha ocurrido que un buen comienzo puede ser la creación de una aplicación que nos diga en qué dirección se encuentra un punto concreto. Para éste ejemplo voy a hacer algo que espero sea útil a la comunidad muslumana hispano hablante puesto el punto concreto que he decidido utilizar en éste ejemplo es La Meca.

Según Wikipedia La Meca (en árabe مكة المكرمة Makkah al-Mukarrama o simplemente Makkah) es la principal ciudad de la región del Hiyaz, en la actual Arabia Saudita, y una de las más importantes de la península de Arabia. Está situada al oeste de la península y cuenta con 1.294.167 habitantes (censo de 2004), localizada en un estrecho valle, a 277 m sobre el nivel del mar; se ubica a 80 km del mar Rojo.

Como todos sabéis cada musulmán debe rezar cinco veces al día en dirección a La Meca y como supongo que no siempre será fácil saber en qué dirección mirar y menos si se viaja constantemente alrededor del mundo. 

Vamos a hacer una pequeña planificación inicial, a ver cuánto me acabo desviando, pero la planificación inicial podría ser la siguiente:

1º Requisitos
2º Análisis 
3º Creación del proyecto y repositorio
4º Inserción de mapa
5º Localizar y apuntar a La Meca
6º Detalles de usabilidad
7º Crear y firmar la applicación y subirla a +Google Play 

Siete pasos, podría valer, siete es un número que me gusta...

Requisitos

Queremos una aplicación mínima que nos diga, desde donde nos encontramos, hacia dónde o en qué dirección se encuentra La Meca.

Queremos además dejar la aplicación abierta a futuras mejoras o ampliaciones de funcionalidad

Análisis

El primer requisito, ya que es el objetivo, lo voy a atacar utilizando +Google Maps para Android, del que aún no sé nada y cuya investigación incluiré en éste artículo. También se podría utilizar una brújula hecha con Canvas pero lo que me importa o me gustaría conseguir es dar al usuario la dirección a la que debe mirar, bien pintando una linea recta sobre el mapa, bien ofreciéndole una brújula que apunte a La Meca.

Con respecto al segundo requisito seguiré las pautas del anterior artículo, Arquitectura de aplicaciones Android, ya que creo que siguiendo esas pautas me aseguro robustez, versatilidad y facilidad de mantenimiento. 

Creación del proyecto y repositorio

Repositorio

Tengo cuenta en GitHub y tengo pendiente mostrar cómo se gestiona un respositorio con GitHub pero para mi proyecto, por comodidad, voy a utilizar un repositorio local svn utilizando Tortoise SVN (como ésto carece de interés hoy aquí podemos decir que he seguido estos mismos pasos o muy parecidos para crear el respositorio, creo el repositorio, creo una carpeta para el proyecto, hago checkout sobre el repositorio  y ya tengo lista esa carpeta para trabajar sobre ella).

Ahora voy a crear un nuevo proyecto desde Eclipse que trabaje sobre la carpeta anterior, también lo podía haber hecho al revés y haber creado primero el proyecto y luego haber hecho checkout sobre el respositorio,, es lo mismo, mientras sepas lo que estás haciendo...

 Proyecto

Crear un proyecto de aplicación de Android no tiene ningún misterio si tienes el eclipse bien configurado. Abres eclipse, File -> New -> Android Project, elegimos un nombre para el proyecto, por ejemplo La_Meca, y seleccionamos una ubicación, nuestra carpeta de SVN, en mi caso D:\WORK\La Meca y pulsamos Next, después elegimos un SDK, en mi máquina tengo el 2.1, el 4.0 y el 4.3 y creo que voy a optar por el 2.1 ya que hay muchos dispositivos antiguos que aún utilizan esa versión de Android y como no voy a hacer grandes virguerías no creo que me haga falta nada de lo nuevo que hay en el 4.x... Selecciono entonces Google API 2.1 y pulso Next. La aplicación ya hemos dicho que se llama La Meca, al paquete le he puesto por nombre com.jgc.lameca he cambiado el nombre a la actividad que quería crear y la he llamado EntryPointActivity y he marcado como Mínimum SDK el 7 (que coincide con el API level seleccionado en la pantalla anterior).
Podría crear un proyecto de tests pero en esta ocasión no lo voy a hacer porque no estoy demasiado puesto en tests con java y para Android (es una de mis tareas pendientes que también intentaré compartir con los lectores por aquí). Y ya podemos pulsar Finish, eclipse nos avisa de que vamos a crear un proyecto en un directorio no vacío, ningún problema, es lo que queremos, dentro de D:\Work\La Meca se crearán una serie de carpetas y ficheros que son nuestro proyecto, era justo lo que queríamos y es momento de ponernos manos a la obra.

Inserción del mapa

Antes de ponernos expresamente con el mapa voy a aplicar una serie de cambios al proyecto, para empezar voy a crear una clase BaseActivity de la que heredarán muchas o todas mis activities como ya expliqué en el anterior artículo para abrir mi aplicación a la extensión, y una clase MapActivity que será la que contenga el mapa.

BaseActivity:
package com.jgc.lameca;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public abstract class BaseActivity extends Activity 
{
 protected void onCreate(Bundle savedInstanceState) 
 {
  super.onCreate(savedInstanceState);
  // Esto lo hará cada Activity con su vista:
  // setContentView(R.layout.activity_default);
 }
 

 protected void onDestroy ()
 {
  super.onDestroy ();
 }
 
 protected void onPause ()
 {
  super.onPause ();
 }

 protected void onRestart ()
 {
  super.onRestart ();
 }

 protected void onResume ()
 {
  super.onResume ();
 }

 protected void onStart ()
 {
  super.onStart ();
 }

 protected void onStop ()
 {
  super.onStop ();
 }
 
 // Click Methods HERE:

 
 public void onClickFeature (View v)
 {
  int id = v.getId ();
  switch (id) {
  case R.id.ep_map_button:
   lanzarMapa();
   
   break;
  case R.id.ep_gps_button :   
   lanzarLocationSettings();
  
  default: 
   break;
  }
 }

 private void lanzarMapa() {
  Intent i = new Intent(this, MapActivity.class);
  i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_SINGLE_TOP);
  startActivity(i);
 }  

 private void lanzarLocationSettings() {
  Intent i = new Intent(android.provider.Settings.ACTION_LOCATION_SOURCE_SETTINGS); 
  startActivity(i);
 } 

 public void lanzarEntryPoint(Context context) 
 {
  final Intent intent = new Intent(context, EntryPointActivity.class);
  intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
  context.startActivity (intent);
 }

 public void setTitleFromActivityLabel (int textViewId)
 {
  TextView tv = (TextView) findViewById (textViewId);
  if (tv != null) tv.setText (getTitle ());
 } 


 public void toast (String msg)
 {
  Toast.makeText (getApplicationContext(), msg, Toast.LENGTH_SHORT).show ();
 }

 public void trace (String msg) 
 {
  Log.d("La Meca :: ", msg);
  toast (msg);
 }

} 

El código de BaseActivity es mas o menos auto-explicativo, se trata de una clase abstracta que extiende Activity y que además tiene una serie de métodos para lanzar distintos Intents, quizá tenga que refactorizarla dentro de un rato para añadir o quitar alguno pero he puesto métodos para lanzar el mapa, para lanzar las settings de ubicación (habilitar/deshabilitar GPS desde ajustes del sistema) e ir a EntryPointActivity.

Si ahora vamos al código de EntryPointActivity y hacemos que en vez de extender de Activity extienda BaseActivity entonces EntryPointActivity podrá hacer todo lo que acabamos de ver que puede hacer BaseActivity (simple, ¿no?) y así sucesivamente...

EntryPoitnActivity:
package com.jgc.lameca;

import android.os.Bundle;

public class EntryPointActivity extends BaseActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Al crear la EntryPointActivity se llama al create de BaseActivity y después se establece la vista (layout) main, que es la que se ha creado por defecto al crear el proyecto. Vamos a crear también MapActivity, que será muy similar a EntryPointActivity, antes de ponernos a darle un toque a las vistas...

MapActivity:
package com.jgc.lameca;
import android.os.Bundle;

public class MapActivity extends BaseActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map_layout);
    }
}

Tan simple como eso, dos actividades, una que será el punto de entrada y otra que será el mapa. Si has seguido estos pasos hasta aquí tu proyecto tendrá errores igual que los tiene el mío ya que en BaseActivity estamos referenciando a botones que todavía no existen y en MapActivity a un layout que ni siquiera hemos creado:


Pues vamos a crear esos botones y ese layout para quitarnos esos errores. Sin preocuparnos de momento por el aspecto visual a main.xml (en res/layout/) le añadimos dos botones los cuales se llamarán ep_map_button y _ep_gps_button respectivamente. Voy a dejar el texto que había por defecto, hello y mi main.xml quedaría así.

main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <Button
        android:id="@+id/ep_map_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lanzar Mapa" />

    <Button
        android:id="@+id/ep_gps_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lanzar Configuración GPS" />

</LinearLayout>

Bien, ya han desaparecido los errores de BaseActivity, vamos a crear map_layout.xml para que no haya errores en MapActivity y que compile el proyecto, una vez creado ese fichero en res/layout la estructura del proyecto queda así:


Aún no podemos probarlo porque hay que modificar AndroidManifest.xml para que incluya las actividades y los permisos necesarios. Muchas veces me ha sucedido que he creado una actividad, un activity, y que luego no la he incluído en en fichero Manifest y, durante un largo rato, me he vuelto loco porque no sabía por qué la aplicación "petaba" al abrir dicha actividad... Recuerda que AndroidManifest.xml es una parte fundamental de tu aplicación. Voy a dejarlo "decente" antes de empezar con los mapas propiamente hablando... (mientras escribo y leo alguna noticia estoy ojeando éste tutorial). Una primera versión de AndroidManifest.xml puede ser como ésta:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jgc.lameca"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="7" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".EntryPointActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MapActivity" />
    </application>

</manifest>

Bueno, pues vamos a probarlo, enchufo mi móvil, y en eclipse pulso Debug... Se abre, es feo y al pulsar en los botones no funciona, ¿por qué no funciona? pues porque no le he dicho al botón qué es lo que tiene que hacer. Hay varias maneras de hacerlo y como en BaseActivity ya tenía un método OnClickFeature lo que tengo que haacer es añadir la siguiente línea a cada botón:
android:onClick="onClickFeature"

Así cuando se pulse el botón se ejecutará el método onClickFeature, en el cual dependeindo de qué botón lo haya llamado, se ejecutará una acción u otra... Guardo y vuelvo a probar a ver qué pasa... Y como era de esperar ( o_0 ) todo funciona como esperaba, aparece EntryPoint y si pulso en configuración GPS se me abren las settings de localización, desde ahí si pulso atrás vuelvo a entryPoint y si pulso en Mapa se me abre una ventana vacía. No tiene más, es el momento de empezar a "crecer".

Mapas propiamente hablando

Hasta ahora he creado una estructura para la app pero no he tocada nada de mapas. Sinceramente, llevo bloqueado una hora o así leyendo documentación, empecé con el tutorial de mapview que puse antes pero ya hay una versión dos y una versión tres del api de google maps y estoy peleándome con la versión dos... No voy a liaros con pasos infructuosos pues de lo que se trata es de facilitar el aprendizaje a los posibles lectores y no liarlos ni cansarlos con mis cábalas y pruebas-errores...

Una de las cosas que he tenido que hacer ha sido actualizar el plugin de eclipse, y mientras se descarga e instala todo estoy leyendo las noticias y tomándome un pequeño descanso... y como se hace eterno me he puesto a leer un poco éste artículo sobre mapas en Android con Google Maps  Android API v2 (gran entrada en +sgoliver.net blog, gracias +Salvador Gómez )

Y bueno, después de muchas vueltas mi error (tengo que leer con más detenimiento a veces) era que para utilizar fragments en una actividad ésta debe extender FragmentActivity en vez de Activity a secas... Una vez modificado BaseActivity para que extienda FragmentActivity y habiendo añadido a nuestro proyecto las librerías y dependencias necesarias como tan bien se explica en el artículo de sgoliver.net ya se carga un mapa al lanzar MapActivity, ahora sólo nos queda que ese mapa nos localice y mostrar la dirección a La Meca, cosa con la que me pondré ésta tarde o ya el domingo... Así ha quedado AndroidManifest.xml, con todo lo necesario para utilizar Google Maps Android API v2.

AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jgc.lameca"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="7" />

    <permission
        android:name="com.jgc.lameca.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="com.jgc.lameca.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

   <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:allowBackup="true" >
        <activity
            android:name=".EntryPointActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MapActivity" />

        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="AQUÍ VA TU CLAVE" />
    </application>

</manifest>


Se me ha hecho un poco tarde, para terminar por hoy voy a dejar una última captura de pantalla de cómo ha quedado el proyecto y seguiré con él la próxima vez que tenga algo de tiempo libre.


[To be continued...]