A la par de aprender a dominar alguna plataforma de desarrollo, considero que la experiencia que tengas utilizando un IDE también es parte fundamental para agilizar las tareas diarias de codeo y debugueo de tus proyectos.

Por esa razón considero importante ir recopilando en una serie de posts, los errores más comunes con los que nos podemos encontrar en un día normal de desarrollo y tratar de explicar las razones por las que ocurren y mejor aún, cómo es que se resuelven. Esto puede ayudarte a que no termines desperdiciando valiosas horas en estas cuestiones y puedas seguir enfocándote al desarrollo de tu proyecto.

¿Alguna vez te has encontrado con el siguiente error?

Estoy segura que tu respuesta es un “Sí”. Y bueno, ¿este error por qué razón surge? Regularmente viene asociado con los siguientes escenarios:

1. Cuando existe un error explícito dentro de una de las clases que estás manejando en tu proyecto. Es decir, algún error de sintáxis en tu código Java. Este escenario es el más fácil de identificar ya que posterior a este cuadro de diálogo, Eclipse nos indicará por medio de una “x” de color rojo en el Package Explorer la clase y paquete que contiene el error.

Solución: Obviamente corregir el error sintáctico cometido y volver a ejecutar nuestro proyecto.

2. Cuando en algún layout que hemos creado hemos cometido algún error sintáctico al momento de nombrar una etiqueta. Por ejemplo, el hecho de escribir “<linearlayout…>” en lugar de “<LinearLayout…>” es suficiente para que este error se presente. En ocasiones no resulta tan obvio el error pues Eclipse no lo marca como tal, pero a la hora de compilar no nos permitirá ejecutar el proyecto.  (Yo he visto que las personas que recién empiezan cometen este error de forma recurrente, o al menos eso he notado en los talleres básicos que he dado… #TrueStory).

Solución: Sigue las convenciones, respeta el nombre de las clases tal como lo indica el SDK y la documentación.

3. Hay veces en las que la clase R.java del directorio gen se daña y deja de generar automáticamente las referencias a nuevos recursos que agreguemos al proyecto. En estos casos, aunque hayamos agregado un widget con un ID asignado en algún archivo de layout, desde el código Java no podremos llamarlo pues no se encontrará la referencia.

Solución: Utiliza la opción Project > Clean… de Eclipse, eso en la mayoría de los casos permite reconstruir el proyecto y con ello la clase R.java

4. El último escenario en el que me ha tocado estar es cuando tu Debug Certificate ha expirado. Cuando estamos creando una aplicación se firma con un certificado que indica que la app es de “pruebas”. Este certificado tiene una duración de 1 año y cuando llegamos al cumplimiento de ese plazo es cuando es necesario renovarlo.

Solución: Debemos borrar un archivo llamado debug.keystore. Para conocer su ubicación en nuestro equipo, nos vamos a la opción Window > Preferences > Android > Build y en el campo Default debug keystore encontramos la ruta.

Procedemos a borrar el archivo y para generar un nuevo certificado, bastará con elegir la opción Project > Clean... Con esto puedes volver a trabajar sin problemas.

La última recomendación es que te auxilies de la pestaña Problems que podemos agregar en la opción Window > Show View > General, y que nos indica los warnings y problemas que presenta nuestro proyecto. Entre la información que nos muestra está:

• Description del error/warning
• Resource que indica el nombre del archivo en donde se encuentra el error/warning
• Path que es la ruta del archivo que contiene el error/warning en el proyecto
• Location que nos indica la línea en la cual se encuentra el error/warning
• Type que nos indica el tipo de problema que es

Las herramientas que nos brinda Eclipse son precisamente para facilitarnos algunas tareas así que en la medida de lo posible sácales jugo.

Si te has encontrado con este error en algún otro escenario que no mencioné en este post, platícanos cuál fue y cómo resolviste el problema.

También te invito a que si te has enfrentado a otro tipo de dificultades con Eclipse nos comentes para que podamos armar un post que le ayude a todos los lectores a encontrar las soluciones aquí en la comunidad.

¿Te fue útil este post? ¡Compártelo!

 Cuando estás desarrollando una aplicación en Android u otra plataforma el diseño estético es muy importante, es la primera impresión que se lleva el usuario cuando usa tu desarrollo, por eso  las animaciones son una de esas armas que debes saber usar. Hoy te traemos una manera muy práctica de generar animaciones a los Views de Android sin que llevemos el  procesador del dispositivo a las llamas y sin que tengamos que usar la última versión de OpenGL para que se vea un efecto agradable en tus aplicaciones.

Si en algún momento mientras programas tus aplicaciones para Android sientes que les hace falta un no sé qué o un no sé dónde y sientes que los colores e imágenes estáticas no te son suficientes  para darle ese toque propio y sientes que para hacer una animación es necesario el manejo especial de OpenGl 2.0 o una librería específica para tal objetivo, tenemos que decirte que no busques más ya que hoy te traemos una herramienta muy útil para darle ese toque mágico a tus líneas de código y hacer que te sientas mejor con el resultado de tu trabajo.

 A lo que estamos haciendo referencia es de la posibilidad que puedas animar por ejemplo los View de Android como los TextView y las imágenes que cargas a tu desarrollo, a las cuales puedes generarles efectos de transparencia, rotación, translación y zoom dentro del área de visión del móvil así como controlar las características de la animación, control de inicio y fin de la misma. Así que hoy te mostraremos las 4 características a las que te hacemos referencia en una sencilla aplicación que con solo un botón puedas ver cada una de las animaciones, y te mostraremos en un video como se ven estas aplicaciones en plena ejecución, así que manos a la obra.

Como primera instancia te dejamos el link de la página oficial de Android en donde encontrarás con lujo de detalles, http://developer.android.com/guide/topics/resources/animation-resource.html y el cual te ayudará a despejar las dudas que no te podamos aclarar con este tutorial. El objetivo es que detectes las posibilidades que tienes en Android y tu puedas profundizar en los detalles que más se ajusten a tu necesidad, así que por nada dejes de consultarlo y ver como puedes darle un mejor aspecto visual a tu aplicación.

 Si te sigues preguntando como puedes hacer que tu textos cambien su tamaño y vuelvan al original, como hacer para que esos botones se muevan y retornen a su punto original y como hacer para que esa imagen rote cada vez que el usuario pulse sobre mi app; la respuesta es que solo con generar un archivo .xml con las propiedades que quieras aplicar y después con solo hacer referencia al archivo dentro del código puedes generarlo. Así que empecemos a ver como hacer ese archivo .XML:

Lo primero que debes hacer es crear una carpeta llamada “anim” la cual debes guardar en la carpeta principal “res” dentro del proyecto en el cual estés trabajando; con la carpeta ya lista vas a crear un nuevo archivo con extensión .XML y al cual puedes darle el nombre que desees y así pasamos a editar cualquiera de las 4 propiedades para aplicar en nuestras animaciones las cuales son las siguientes:

<alpha> esta propiedad hace referencia a la transparencia que le puedes dar al View al cual vallas a aplicar la animación, básicamente lo que puedes hacer es un efecto fantasma, hacer que desaparezca o se vuelva visible un objeto dependiendo de los tiempos que quieras.

<scale> esta propiedad hace referencia al “zoom” que puede tomar la aplicación sobre un determinado objeto, esto hará que por ejemplo tu imagen sea mas grande o menos que la que originalmente definiste.

<translate> con esta característica defines un movimiento del objeto que quieras manipular, por ejemplo puedes hacer un efecto de créditos como los que aparecen al final de una película, haciendo que se desplace de abajo hacia arriba u n determinado texto.

<rotate> por último con esta propiedad puedes hacer por ejemplo que una imagen rote determinados grados sobre un determinado eje.

Cada una de las anteriores características de las animaciones tiene determinados atributos para que la animación pueda llevarse a cabo, no te explicaremos todos porque en el enlace que te dejamos arriba están todos muy bien explicados pero con los que usaremos te harás una idea del efecto que produce cada atributo y los puedas acomodar a tu código.

Aquí te dejamos el código genérico de las 4 diferentes características de las animaciones, en donde “float” en un valor de tipo flotante que tu definirás para el efecto deseado, el cual podrás ver mucho mejor de manera experimental y acomodar mucho mejor para generar una animación única y propia tuya:

 Cabe mencionar que puedes generar cuantos archivos de animación desees con diferentes números de animaciones y combinaciones que imagines ya que a no todos los objetos se les ajusta correctamente la misma combinación. En nuestro código de ejemplo tendremos 6 botones con los cuales podrás apreciar el efecto de las animaciones aplicadas a un texto y a una imagen, 4 de los cuales hacen referencia a las propiedades principales y con los otros 2 podrás ver el efecto de las propiedades sumadas y haciendo una efecto mucho mejor. Dejemos tanta explicación y vamos al código:

1. Creamos un proyecto en Eclipse con el nombre que deseemos, en nuestro caso lo llamamos AnimacionView, con la versión que deseemos como por ejemplo la 2.3, le damos el nombre a nuestro paquete, nosotros escogimos com.androideity.animacion, y por último creamos la actividad principal, nosotros la llamamos MainActivity.
2. Vamos ahora a modificar nuestro layout “main.mxl” de tal manera que nos muestre una imagen a la cual le aplicaremos las diferentes animaciones, debajo 3 botones que actuarán como ejecutores de las animaciones, debajo de estos botones colocamos un TextView para ver que las animaciones también tienen efecto en este tipo de recursos; por último colocamos 3 botones más que servirán para lo mismo que los 3 anteriores pero con diferentes efectos. Vemos una imagen para que sea más claro todo:

 El código del layout main.xml que dispone los elementos de esta manera es el siguiente:

 3.  Como ya tenemos los elementos que van en nuestro layout vamos a crear otro archivos a los cuales vamos a hacer referencia cuando queramos aplicar las animaciones. Para esto creamos una carpeta llamada “anim” dentro del folder principal “res”. Aquí dentro de la carpeta “anim” creamos 6 archivos con extensión .xml que los pueden llamar como deseen, nosotros los llamamos como se ven en la siguiente imagen:

 El contenido de cada archivo es el siguiente:

Para el archivo “escalar.xml” podremos crear una animación que haga una especie de zoom, a nuestro View y el código es el mostrado en la siguiente imagen:

 Para el archivo “rotar.xml” podremos crear una animación rote nuestro View, y el código es el siguiente:

 Para el archivo “mezcla1.xml” podremos crear una animación que suma la aplicación de rotar y escalar nuestro View, y el código es el siguiente:

 Para el archivo “transladar.xml” podremos crear una animación que desplaza nuestro View en un area de la pantalla y el código es el siguiente:

 Para el archivo “transparencia.xml” podremos crear una animación que modifica el atributo alpha de nuestro View, el cual genera un efecto de transparencia, y el código es el siguiente:

 Para el archivo “mezcla2.xml” podremos crear una animación que suma el código del archivo de translación y transparencia y genera un mejor efecto a nuestro View, y el código es el siguiente:

 4.  Por último creamos el código de nuestra actividad principal que será encargada de darle la lógica a nuestra aplicación, cuyo código es muy sencillo y no necesita mucha explicación, tan solo instanciamos el texto y la imagen a las cuales vamos aplicarle las animaciones esto en el método “onCreate”. Como vemos a continuación:

package com.androideity.animacionsimple;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    private TextView texto;
	private Button btnRotar,btnEscalar,btnTrans,btnMover,btnMezcla1,btnMezcla2 ;
	private ImageView logo;
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        texto = (TextView)findViewById(R.id.txt_anim);
        logo = (ImageView)findViewById(R.id.logo);
        logo.setBackgroundResource(R.drawable.ic_launcher);
    }

5.  Por último creamos el método “accionAnimar” que ya habíamos digitado en cada uno de los botones dentro del archivo “main.xml”. Dentro de este método vamos a evaluar que botón fue pulsado y que acción debe realizar. Todo esto con un “switch” como se ve en el siguiente código:

logo.setBackgroundResource(R.drawable.ic_launcher);
    }
 
	public void accionAnimar(View view){
 
        Animation rotar = AnimationUtils.loadAnimation(this, R.anim.rotar);
        rotar.reset();
		switch (view.getId()){
 
		case R.id.btn_escalar:
			Animation escalar = AnimationUtils.loadAnimation(this, R.anim.escalar);
	        escalar.reset();
			logo.startAnimation(escalar);
		break;
 
		case R.id.btn_rotar:
			Animation rotacion = AnimationUtils.loadAnimation(this, R.anim.rotar);
	        rotacion.reset();
			logo.startAnimation(rotacion);
		break;
 
		case R.id.btn_mezcla1:
			Animation mezcla1 = AnimationUtils.loadAnimation(this, R.anim.mezcla1);
			mezcla1.reset();
			logo.startAnimation(mezcla1);
		break;
 
		case R.id.btn_mover:
			Animation mover = AnimationUtils.loadAnimation(this, R.anim.transladar);
			mover.reset();
			texto.startAnimation(mover);
		break;
 
		case R.id.btn_trans:
			Animation transparente = AnimationUtils.loadAnimation(this, R.anim.transparencia);
			transparente.reset();
			texto.startAnimation(transparente);
		break;
 
		case R.id.btn_mezcla2:
			Animation mezcla2 = AnimationUtils.loadAnimation(this, R.anim.mezcla2);
		    mezcla2.reset();
		    texto.startAnimation(mezcla2);
		break;    
 
		}
	}
}

Perfecto, con este sencillo pero muy práctico código podremos aplicarle una animación a nuestros “Views” y darles ese toque personal y estético que queremos a nuestras aplicaciones, logrando que los usuarios de las mismas vean algo diferente y quieran cada vez mas sus dispositivos móviles.

Y como no iba a ser la excepción, te mostramos en video como funciona este código usando el emulador de Eclipse; en este caso ya no te mostraremos el desarrollo porque como habrás notado dejamos el código listo para que solo llegues lo copies y lo pegues.

Espero que te sea de ayuda este tema para tus futuras aplicaciones, espera pronto nuevos temas sobre esta fabulosa plataforma Android.

Nota: Si detectas algún error en el código, en la explicación, escrito o en el video, por favor escríbenos y con mucho gusto la corregimos. Agradecemos tu ayuda.
Nota 2: A partir de esta entrega dejare la mayor parte de código porque las próximas entregan serán cada vez mas extensas, además me han pedido mucho el código para copiarlo directamente en Eclipse, asi que ustedes son los que mandan.

Hola el dia de hoy les traigo la tercera parte del tutorial sobre widgets.

Con las cosas que aprendimos en las entregas anteriores (1 y 2) y con algunas cosas nuevas haremos un widget un poco mas complejo que mostrara el estado del clima, la temperatura actual, maxima y minima.
La idea es que con lo que veamos hoy y en las proximas entregas
este widget se valla volviendo mas complejo.

Básicamente la idea es que se parezca al widget del clima del Nexus One.

Una vez terminado debería verse así el texto mostrado dependera de cada caso:

Nuestra app el dia de hoy hara lo siguiente se conectara atravez de internet al servicio de Yahoo Weather obtendra el RSS que nos devuelve en formato XML, parsearlo y obtener los datos que nos interesaran a nosotros, también posee un boton el cual al oprimirlo actualiza el contenido del widget en proximas entrega haremos que se actualice automáticamente cada cierto tiempo.

Antes de ver el codigo les comentare rapidamente como funciona este servicio de Yahoo:
Este servicio permite tener informacion del clima de la ubicacion que se le pase como parametros
Pueden consultar la documentacion sobre el api desde:

http://developer.yahoo.com/weather/

No voy a explicar como funciona todo el servicio por que para esto esta la documentacion de Yahoo pero voy a aclarar alguno detalles.

Podemos obtener el RSS del clima de la ciudad autonoma de buenos aires atravez de este Link
http://weather.yahooapis.com/forecastrss?w=12813136&u=c

Basicamente hay 2 parametros

http://weather.yahooapis.com/forecastrss?w=location&u=unit_temp

w para WOEID este se puede obtener desde http://weather.yahoo.com/ la misma se encuentra en la URL
por ej para la ciudad de mar del plata Argentina la url que nos manda es
http://weather.yahoo.com/argentina/buenos-aires/mar-del-plata-466863/ entonces el WOEID seria 466863.

Luego el otro parametro es la unidad de temperatura en la que queremos los resultados.
&u=unit_temp
si queremos que este en grados Celsius o Centigrados debemos usar &u=c
para Grados Farenheit podemos poner f si no colocamos este parametro tomara esta unidad por defecto.

Antes de continuar les recomiendo ver con detenimiento cual es el XML y los datos que nos procopiona este servicio.
Ahora si manos a la obra:

Al proyecto lo llamare  widgetdelclima.

Tendra esta estructura:

Constara de 2 Clases Miwidget  que es la encargada de realizar todas las acciones y MyWeather que tendra la estructura de los nodos del XML que vamos a usar.

El diseño del Layout se lo define en main.xml

Clase Myweather

package test.widgetdelclima;
public class MyWeather {
String city; //ciudad
String unit_temp; //unidad de temperatura ºF / ºC
String conditiontemp; //Temperatura
String YahooWcode; //Codigo de Clima
String MaxT; //Temperatura Maxima
String MinT; //Temperatura Minima
 
public String toString(){ //retorna un string compuesto por todos los datos anteriores.
 
return "\n- "
+ "city: " + city + "\n"
+ "unit_temp: "+unit_temp+"\n\n"
+"YahooWcode"+YahooWcode+ "\n"
+ "Condition: " + conditiontemp ;
}
}

Archivo AndroidManifest.xml

XML widget_provider.xml

A continuaciòn veremos el contenido de la otra clase colocare comentarios para explicar el funcionamiento:

/******************************************************************
*
* WIDGET DEL CLIMA
*
* AUTOR: SEBASTIAN CIPOLAT
* BUENOS AIRES ARGENTINA 2012
*
* VERSION PARA ANDROIDEITY
*
*******************************************************************/
public class Miwidget extends AppWidgetProvider{
 
Document weatherDoc ;
MyWeather weatherResult;
String weatherString ;
 
private static final String ACTION_update = "force_update";
@Override
public void onUpdate(Context context, AppWidgetManager appWidgetManager,
int[] appWidgetIds) {
 
/*Cada vez que se ejecute onUpdate ejecuta get_data qeu se encargara de tomar los datos de internet
* y devolverlos como un objeto Document.
*/
 
get_data(context , appWidgetManager);
 
}
 
public int get_data(Context ctx , AppWidgetManager appwidg){
weatherString= QueryYahooWeather("468739"); //WOEID de Buenos Aires 468739
 
/*Si weatherString retorna un String diferente a null
significa que QueryYahooWeather devolvio algun dato por lo que podemos continuar en caso de que fuese null
mostrara error y pasara a actualizarWidget un parametro 0 para que muestre error
*/
 
if (weatherString!=null){
//convertimos weatherString a Document
weatherDoc = convertStringToDocument(weatherString);
 
if (weatherDoc!=null){//si todo estuvo bien parseamos el documento
 
weatherResult= parseWeather(weatherDoc);
 
if (weatherResult!=null){
/*Si llegamos hasta aca significa que todo funciono bien y
* pasamos a actualizarWidget las variables a mostrar.
*/
actualizarWidget(ctx, appwidg, weatherResult.city,weatherResult.conditiontemp,weatherResult.unit_temp
,weatherResult.MaxT,weatherResult.MinT,weatherResult.YahooWcode,1);
//actualizarWidget(ctx, appwidg, ciudad,temp,unit_temp,1);
 
}
}
 
}else{
Log.e("Error obteniendo informacion", ":X");
 
//si no muestro error
//actualizarWidget(ctx, appwidg, "Error","E","r",0);
//como hubo algun error no pasamos ningun parametro excepto el erro_flag
actualizarWidget(ctx, appwidg,null,null,null,null,null,null,0);
}
 
return 0;
}
 
/* Realiza una peticion mediante GET al servicio de Yahoo pasando los parametros de la ciudad woid
* y unidad de temperatura.
* Retorna un String con todo el XML que luego se utilizara para extraer los datos.
*/
private String QueryYahooWeather(String woid){
 
String qResult = "";
String queryString = "http://weather.yahooapis.com/forecastrss?w="+woid+"&u=c";
 
HttpClient httpClient = new DefaultHttpClient();
HttpGet httpGet = new HttpGet(queryString);
 
try {
HttpEntity httpEntity = httpClient.execute(httpGet).getEntity();
 
if (httpEntity != null){
InputStream inputStream = httpEntity.getContent();
Reader in = new InputStreamReader(inputStream);
BufferedReader bufferedreader = new BufferedReader(in);
StringBuilder stringBuilder = new StringBuilder();
 
String stringReadLine = null;
//imprime todo el xml en qResult
while ((stringReadLine = bufferedreader.readLine()) != null) {
stringBuilder.append(stringReadLine + "\n");
}
qResult = stringBuilder.toString();
}
 
} catch (ClientProtocolException e) {
e.printStackTrace();
Log.e("error! QueryYahooWeather", " :/");
return null;
} catch (IOException e) {
e.printStackTrace();
Log.e("error! QueryYahooWeather", " :/");
return null;
}
 
return qResult;
}
 
/* En base al parametro src el cual es todo el xml devuelto por yahoo
* se lo pasa a un objeto del tipo Document que luego se utilizara para poder
* parsear del xml lo que nos interesa
*/
private Document convertStringToDocument(String src){
Document dest = null;
 
DocumentBuilderFactory dbFactory = DocumentBuilderFactory.newInstance();
DocumentBuilder parser;
 
try {
parser = dbFactory.newDocumentBuilder();
dest = parser.parse(new ByteArrayInputStream(src.getBytes()));
} catch (ParserConfigurationException e1) {
e1.printStackTrace();
 
} catch (SAXException e) {
e.printStackTrace();
 
} catch (IOException e) {
e.printStackTrace();
 
}
 
return dest;
}
 
/* Este metodo es el mas importante se encargara de 'parsear' el objeto Document y extrae lo que nos interesa
* y asignarlo a las variables correspondientes.
* retorna un objeto weatherResult del cual extraeremos los datos necesarios.
*/
 
private MyWeather parseWeather(Document srcDoc){
//creamos un objeto myWeather
MyWeather myWeather = new MyWeather();
 
/* XML <yweather:location city="Buenos Aires" region="" country="Argentina"/>
* Del nodo yweather:location extrae el valor del atributo city
*/
Node locationNode = srcDoc.getElementsByTagName("yweather:location").item(0);
myWeather.city = locationNode.getAttributes().getNamedItem("city").getNodeValue().toString();
 
/* XML <yweather:units temperature="C" distance="km" pressure="mb" speed="km/h"/>
* Del nodo yweather:units extrae el valor atributo temperature
*/
Node unittempNode = srcDoc.getElementsByTagName("yweather:units").item(0);
myWeather.unit_temp= unittempNode.getAttributes().getNamedItem("temperature").getNodeValue().toString();
 
/*XML <yweather:condition text="Cloudy" code="26" temp="16" date="Sat, 19 May 2012 7:00 pm ART"/>
* Obtiene el valor de atributo temp el cual es la temperatura actual y el codigo code que utilizaremos luego
* Tambien se observa que en text se encuetra la descripcion del clima en este caso nublado */
 
Node conditionNode = srcDoc.getElementsByTagName("yweather:condition").item(0);
myWeather.conditiontemp = conditionNode.getAttributes().getNamedItem("temp").getNodeValue().toString();
myWeather.YahooWcode= conditionNode.getAttributes().getNamedItem("code").getNodeValue().toString();
 
/*XML <yweather:forecast day="Sat" date="19 May 2012" low="14" high="17" text="Showers Late" code="45"/>
*
* Toma los valores low y high el cual son las temperaturas maxima y minima del dia.
*
* */
 
Node forecastNode = srcDoc.getElementsByTagName("yweather:forecast").item(0);
myWeather.MinT = forecastNode.getAttributes().getNamedItem("low").getNodeValue().toString();
myWeather.MaxT = forecastNode.getAttributes().getNamedItem("high").getNodeValue().toString();
/* A modo de control imprimo en el Logcat el contenido del objeto myWeather.toString*/
 
Log.e("-------", "---------------");
Log.e("XML yw", myWeather.toString());
 
//Devolvemos myWeather el cual se utilizara luego.
return myWeather;
}
 
/* Este es el metodo que se encargara de actualizar el widget de la misma forma que vimos en el segunda parte del tutorial
* se les pasan por parametros los valores que mostrara el temperatura , ciudad, temperatura maxy , min y un ultimo parametro
* error_flag el cual se utiliza para mostrar error.
* Tambien se define el PendingIntent que utilizaremos para actualizar el contenido el widget.
**/
public static void actualizarWidget(Context context,AppWidgetManager appWidgetManager, String city,String temp,
String unit_tmp,String tmp_max,String tmp_min,String yahoowcode,int error_flag)
{
int img_var;
/****************************
* int error_flag
* 1 OK
* 0 Error
*****************************/
RemoteViews remoteViews;
 
ComponentName thisWidget;
 
remoteViews = new RemoteViews(context.getPackageName(), R.layout.main);
 
thisWidget = new ComponentName(context, Miwidget.class);
 
if(error_flag==1){// Todo estuvo bien
/*En base al yahoo code determineimg2use nos retorna el id de la imagen a mostrar*/
img_var=determineimg2use(Integer.valueOf(yahoowcode));
 
if(img_var!=-1)
remoteViews.setImageViewResource(R.id.clima_img,img_var);
else//img var=-1 hubo algun error mostramos la imagen unknown
remoteViews.setImageViewResource(R.id.clima_img,R.drawable.unknown);
 
//Asignamos a cada elemento del lyput el texto correspondiente
remoteViews.setTextViewText(R.id.temp,temp+"º"+unit_tmp);
remoteViews.setTextViewText(R.id.max_min,maxT+"º"+unit_tmp+" "+minT+"º"+unit_tmp);
remoteViews.setTextViewText(R.id.city,city);
 
}else{//error_flag=0 mostramos mensaje de error
 
Toast.makeText(context,"Error: \n"+"Verifique su conexion a internet \n"+"Presione actualizar para intentarlo de nuevo.", Toast.LENGTH_LONG).show();
 
remoteViews.setImageViewResource(R.id.clima_img,R.drawable.unknown);
remoteViews.setTextViewText(R.id.temp,"- - -");
remoteViews.setTextViewText(R.id.city,"ERROR");
remoteViews.setTextViewText(R.id.max_min,"No se obtuvieron datos");
 
}
 
//Creamos un intent a nuestra propia clase como vimos en la entrega anterior
Intent intent = new Intent(context, Miwidget.class);
 
//seleccionamos la accion ACTION_cambiarlayout
intent.setAction(ACTION_update);
 
PendingIntent pendingIntent = PendingIntent.getBroadcast(context, 0, intent, 0);
remoteViews.setOnClickPendingIntent(R.id.update, pendingIntent);
 
appWidgetManager.updateAppWidget(thisWidget, remoteViews);
 
}
 
@Override
public void onReceive(Context context, Intent intent) {
//Controlamos que la accion recibida sea la nuestra
if (intent.getAction().equals(ACTION_update)) {
Log.e("MANUAL UPDATE"," ACTIVATED");
//actualizamos el widget.
AppWidgetManager widgetManager =AppWidgetManager.getInstance(context);
 
get_data(context , widgetManager);
 
}
 
super.onReceive(context, intent);
}
 
//Este metodo  lo que hace es en base al yahoowcode retorna el id de la imagen a mostrar.
private static int determineimg2use(int yahoowcode){
int finalcode;
switch(yahoowcode){
 
case 0: finalcode= -1;
break;
case 1: finalcode= -1;
break;
case 2: finalcode= -1;
break;
case 3: finalcode= R.drawable.img03;
break;
case 4: finalcode= R.drawable.img03;
break;
case 5: finalcode= R.drawable.img07;
break;
case 6: finalcode= R.drawable.img06;
break;
case 7: finalcode= R.drawable.img06;;
break;
case 8: finalcode= R.drawable.img10;
break;
case 9: finalcode= R.drawable.img12;
break;
case 10: finalcode= R.drawable.img10;
break;
case 11: finalcode= R.drawable.img12;
break;
case 12: finalcode= R.drawable.img12;
break;
case 13: finalcode= R.drawable.img12;
break;
case 14: finalcode= R.drawable.img15;
break;
case 15: finalcode= R.drawable.img15;
break;
case 16: finalcode= R.drawable.img15;
break;
case 17: finalcode= R.drawable.img18;
break;
case 18: finalcode= R.drawable.img10;
break;
case 19: finalcode= R.drawable.img21;
break;
case 20: finalcode= R.drawable.img22;
break;
case 21: finalcode= R.drawable.img22;
break;
case 22: finalcode= R.drawable.img21;
break;
case 23: finalcode= R.drawable.img26;
break;
case 24: finalcode= R.drawable.img24;
break;
case 25: finalcode= R.drawable.img25;
break;
case 26: finalcode= R.drawable.img26;
break;
case 27: finalcode= R.drawable.img27;
break;
case 28: finalcode= R.drawable.img28;
break;
case 29: finalcode= R.drawable.img29;
break;
case 30: finalcode= R.drawable.img30;
break;
case 31: finalcode= R.drawable.img31;
break;
case 32: finalcode= R.drawable.img32;
break;
case 33: finalcode= R.drawable.img33;
break;
case 34: finalcode= R.drawable.img34;
break;
case 35: finalcode= R.drawable.img18;
break;
case 36: finalcode= R.drawable.img36;
break;
case 37: finalcode= R.drawable.img03;
break;
case 38: finalcode= R.drawable.img03;
break;
case 39: finalcode= R.drawable.img03;
break;
case 40: finalcode= R.drawable.img40;
break;
case 41: finalcode= R.drawable.img15;
break;
case 42: finalcode= R.drawable.img13;
break;
case 43: finalcode= R.drawable.img15;
break;
case 44: finalcode= R.drawable.img26;
break;
case 45: finalcode= R.drawable.img40;
break;
case 46: finalcode= R.drawable.img07;
break;
case 47: finalcode= R.drawable.img39;
break;
case 3200: finalcode= -1;
break;
 
default:
finalcode= -2;
break;
 
}
 
return finalcode;
}
}

Algunas aclaraciones:

Cuando halla algun error y a actualizarWidget() le pasemos el parametro 0 a error_flag  el widget se vera de esta forma

Si presionamos la flecha realizaremos una nueva peticion por lo que si todo funciona bien debera mostrar los datos de la forma normal

El metodo que utilizo para obtener los datos del xml puede no ser el optimo para todos los casos.

El tiempo que tarde en obtener los datos dependerá de la conexión a Internet.

En el metodo determineimg2use lo que hice  es tratar de resumir los 48 codigos de condicion y tratar de agruparlos a los mas comunes por lo que puede ser que

no sea de todo exacto.

Respecto de las imagenes las he sacado de esta pagina http://iconbest.com/2009/01/07/waether-iconset/.

En este caso he colocado las imagenes en el directorio res drawable ya que las que estaban en el xml que nos devuelve yahoo no son muy lindas.

Otra cosa nueva que hay en el codigo es el de poder cambiar la imagen que mostrara un imageview

remoteViews.setImageViewResource(R.id.clima_img,R.drawable.unknown);

al cual hay que suministrarle el id de un Imageview y el id de la imagen a mostrar.

Para ir terminando hoy hemos hecho un app widget bastante complejo como los que se pueden encontrar en el market (google play store)  este puede variarse y mostrar cualquier dato proveniente de un webservice siempre que devuelva la informacion en xml por lo que les puede ser de ayuda para futuros proyectos.

Pueden descargar el proyecto para realizar sus propias pruebas desde aqui.

Espero que les halla gustado en proximas entregas veremos como hacerlo mas complejo.

Como siempre si tienen alguna consulta o sugerencia utilizen el cuadro de comentarios de bajo.

Hasta la proxima!.

Sebastian.

En esta ocasión es para mí un placer invitarlos a una reunión que tendremos este sábado 19 de mayo en Ciudad de México con apoyo de la comunidad de Cocoa Heads México que se dedican al desarrollo en iOS y nuestra comunidad.

Con la finalidad de invitar a los chavos interesados en el desarrollo de aplicaciones móviles y ser parte de este nuevo mercado emergente en nuestro país, estamos organizando varias charlas que te ayuden a dar el salto que necesitas para aprender y para la gente que ya está haciendo cosas pueda obtener un feedback con el contenido que venimos a compartir.

Lo genial de la modalidad de estas reuniones es que si bien se organizan charlas, también tendrás un espacio para platicar con otros desarrolladores acerca de los proyectos en los que te encuentras trabajando y aclarar dudas que tengas, intercambiar experiencias, etc.

El enfoque no es totalmente Android, sin embargo, creo conveniente también mirar hacia otras plataformas y conocer en qué se programa, quién quita y también estás interesado en aprender de iOS. ;D

Este evento será el Sábado 19 de mayo de 10:00 AM a 5:00 PM en la ciudad de México, en las Oficinas Raku ubicadas en Paseo de la Reforma 107, piso 5 despacho 502.

Por cuestiones de las instalaciones, el cupo es limitado a un número específico de personas por lo que si estás interesado en asistir no esperes más y regístrate aquí.

Espero que aproveches al máximo el evento para aprender más sobre desarrollo móvil.

¡Corre la voz!

]]> http://androideity.com/2012/05/15/asiste-a-la-reunion-mayo-2012-cocoaheads-y-androideity/feed/ 1 http://androideity.com/2012/05/15/asiste-a-la-reunion-mayo-2012-cocoaheads-y-androideity/#utm_source=rss&utm_medium=rss&utm_campaign=asiste-a-la-reunion-mayo-2012-cocoaheads-y-androideity http://feedproxy.google.com/~r/androideity/~3/TC-dMTPpn3s/ http://androideity.com/2012/05/15/administra-tus-repositorios-con-subeclipse/#comments Tue, 15 May 2012 15:56:27 +0000 Condesa http://androideity.com/?p=3411 Si ya llevas tiempo en esto del desarrollo, sin importar la plataforma, sabrás la importancia de trabajar con herramientas que nos ayuden a llevar el control de las versiones de un proyecto (cuestión muy importante cuando trabajamos en equipo). La … Sigue leyendo →]]>

Si ya llevas tiempo en esto del desarrollo, sin importar la plataforma, sabrás la importancia de trabajar con herramientas que nos ayuden a llevar el control de las versiones de un proyecto (cuestión muy importante cuando trabajamos en equipo).

La herramienta con la que he trabajado en muchas ocasiones es SVN que viene del término Subversion y se trata de un software (open source) de sistema de control de versiones. Dentro de sus características podemos mencionar:

• Un repositorio remoto donde se alojan las copias y revisiones comunes.
• Contamos con una copia local donde podemos trabajar de forma independiente y cuando creamos conveniente, podemos mandar esta copia al repositorio remoto y el sistema se encargará de verificar que no existan conflictos entre las diferentes copias y así tener siempre la “versión estable y final” cada vez que un miembro del equipo actualice.
• Permite ver una muestra de cambios entre diferentes versiones, esto en los archivos de clases y archivos similares.

Si bien podemos utilizar SVN como cualquier otro programa en nuestra computadora, también existe un plugin que nos permite vincularlo a nuestro Eclipse y trabajar de forma más cómoda con las versiones. Esto es precisamente lo que vengo a compartirte en este post.

El plugin en cuestión se llama Subeclipse, un proyecto de Tigris.org que dota a nuestro Eclipse IDE con la capacidad de soportar las funciones de SVN directamente sobre los proyectos que tengamos en nuestro Workspace.

En el sitio del proyecto podrás checar qué versión de Subversion, de Eclipse y del plugin puedes utilizar en conjunto para que no tengas ningún problema de compatibilidad.

Para conocer la versión de tu Eclipse basta con ir a la opción Help > About Eclipse SDK:

En mi caso, he elegido la versión 1.6 de Subeclipse.

Para instalarlo, me voy a la opción Help > Install new software de Eclipse y damos clic sobre el botón Add… donde colocaremos la URL que corresponde a Eclipse update site URL de la imagen anterior y de preferencia un nombre que haga referencia a lo que estamos instalando:

Posteriormente elegiremos las herramientas que necesitemos de las que nos da la opción de instalar. Al momento de seleccionar alguna de ellas se nos muestra la información detallada del feature para que nos sea más fácil elegir. Yo he seleccionado las tres y doy clic en Next >. Cuando la instalación haya finalizado es necesario reiniciar Eclipse.

Siempre que instalemos un nuevo plugin o herramienta a nuestro IDE, es importante hacer un test rápido para saber que todo salió bien.

Con este plugin tendremos la opción de abrir la perspectiva de SVN para ver nuestros proyectos y administrar nuestros repositorios de forma más cómoda. Para irnos a esta perspectiva damos clic en Window > Open perspective > Other > SVN Repository Exploring.

Dentro de la pestaña SVN Repositories se irán enlistando los repositorios que vayamos agregando. En la pestaña SVN Annotate podemos accesar a los comentarios o anotaciones que se le haya hecho a alguno de los archivos del repositorio que nos hayamos descargado previamente.

Para agregar un repositorio nuevo basta con dar clic sobre el área blanca de SVN Repositories > New > Repository Location, escribimos la URL y damos clic en Finish.

Una vez teniendo un repositorio agregado podemos navegar entre su contenido para ahora sí descargarnos directamente proyectos Android (u otro tipo de proyectos) a nuestro Workspace. Sobre el directorio de nuestro interés damos clic derecho y seleccionamos la opción Checkout… que nos llevará a un wizzard en dónde escribiremos el nombre con el que se descargará ese proyecto dentro del Workspace.

Al dar clic en Finish nos descargará el proyecto dentro de la ubicación por default de nuestro Workspace. Si necesitas descargarte el proyecto dentro de otro directorio, da clic en Next ya que en la siguiente ventana es en donde podrás cambiar la ubicación.

Al finalizar la descarga, cambia de perspectiva a la de Java y en tu Package Explorer podrás ver ya el proyecto descargado del repo. De esta forma nos es bastante sencillo empezar a trabajar sobre el código, hacer modificaciones y actualizar el proyecto en el repositorio que compartimos con nuestros miembros de equipo.

En la web suelo encontrar algunos proyectos de librerías que liberan su código fuente proporcionándote una URL de su repositorio. Con este plugin podrás descargarte dichos proyectos de forma rápida y sencilla y poder navegar entre el código.

Hay veces en las que estos proyectos se liberan únicamente bajo permisos de lectura, así que no te será posible mandar los cambios que puedas llegar a hacerles a las clases del proyecto.

Por ejemplo, a continuación te muestro cómo se ve el proyecto que corresponde al código fuente de la librería OpenYouTubeActivity del cuál platiqué en mi post anterior.

Las carpetas que ves con un icono de color amarillo son aquellos archivos que están tal cuál se encuentran en el repositorio remoto. En cambio, aquellos archivos que se encuentran con un icono de color café con un asterisco son aquellos que yo he modificado.

En un entorno colaborativo en el que estés trabajando sobre un proyecto propio podrás subir estos últimos archivos que modifiques para que el proyecto remoto vaya teniendo tus actualizaciones.

Algo importante es que siempre que subas actualizaciones hagas pruebas exhaustivas de que el módulo o cambios que estés implementando no tenga errores y funcione de lo mejor para que siempre se tenga en el repositorio la versión final y estable en cada iteración.

Ahora bien, para subir estas actualizaciones basta con dar clic derecho sobre el nombre de tu proyecto y elegir la opción Team > Commit. Dependiendo de las acciones que necesites aplicar a un proyecto que estés compartiendo con otros miembros de tu equipo, será en este menú Team donde las encontrarás.

Por último, si has estado trabajando en algún proyecto de forma local y de repente se unen a ti otros desarrolladores, puedes subir tu código a un repositorio que previamente hayas levantado dando clic derecho Team > Share Project y configurar en el wizzard la URL de dónde se encuentra el respositorio remoto que lo albergará. Con esto damos paso a que cualquier otra persona a la cuál le proporcionemos la URL pueda empezar también a trabajar sobre nuestro proyecto.

Si hasta ahora es la primera vez que planeas utilizar este plugin, te comparto un par de referencias que te pueden ayudar a despejar las dudas básicas de cómo utilizarlo:

• How to use subversion with Eclipse
• Subeclipse usage: Tips & Tricks

Como lo dije al inicio del post, un software de control de versiones es una de las herramientas básicas para trabajar en equipo, espero que te sirva y que te agilice muchos procesos.

¿Te fue útil este post? ¡Compártelo!

En alguna ocasión abordamos el tema de los Intents y de cómo nos permiten en ocasiones utilizar las aplicaciones que el usuario ya tiene instaladas en su smartphone para lanzar algunas acciones como reproducir audio o video, abrir un link en un browser, compartir información a través de una red social, etc. sin tener que reinventar la rueda.

Este método nos permite entonces, de manera muy sencilla y con una línea de código, reproducir videos de Youtube a partir de una URL.

Con algo como esto:

startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(“http://www.youtube.com/watch?v=_JkkkdH6zTQ”));

Obtendría este resultado:

Mediante este método, el usuario es quien decidirá qué aplicación desea utilizar para ver el contenido multimedia de nuestra aplicación. Pero, ¿qué pasaría si lo que necesitamos es reproducir ese video dentro de nuestra aplicación y no a través de un Intent?

Existe una librería que me encontré en estos días y que me ha parecido bastante útil para lograr esto que te comento. ¿List@ para conocerla?

La librería en cuestión se llama android-youtube-player, un proyecto open source que puedes encontrar en este link. El equipo detrás de esta librería es KeyesLabs. Básicamente, el objetivo de este proyecto es proporcionar una Activity que nos permita reproducir un video de Youtube en cualquier dispositivo sin necesariamente tener instalada alguna otra aplicación que reproduzca video.

Para implementar la funcionalidad de la librería es necesario descargarnos el archivo openyoutubeactivity-1.1.jar desde este link.

1. Para efectos demostrativos de cómo utilizar la librería, he creado un nuevo proyecto Android con la versión 2.2 llamado YoutubePlayer.

2. En la carpeta raíz de mi proyecto he creado un directorio llamado lib en dónde he copiado el archivo .jar que me descargué previamente.

3. En Eclipse, es necesario dar clic derecho sobre el nombre de mi proyecto y seleccionar Refresh para que me actualice los cambios que le hice a esta carpeta desde el explorador de archivos de mi computadora.

4. Posteriormente tendré que agregar la referencia de la librería en mi proyecto, por lo cuál doy clic derecho nuevamente sobre el nombre del proyecto y selecciono la opción Properties > Java Build Path > Add JARs… y elijo el archivo .jar del directorio lib.

Con esto, ya tendré todo listo para utilizar las clases de la librería con el proyecto que esté desarrollando.

5. Este proyecto cuenta con su propia documentación que puedes consultar aquí. Se nos explica claramente los casos en los que la librería sería una opción válida a utilizar, entre los cuáles están:

• Cuando necesites reproducir contenido de video sin incluir dicho recurso en tu aplicación ya que eso haría pesado tu proyecto y no es lo más óptimo.
• Cuando necesites que el usuario pueda volver rápidamente a tu aplicación después de haber reproducido el video.
• Cuando quieras ahorrarte el trabajo de construir una aplicación especializada en reproducir videos de Youtube.

Partiendo de esto, el siguiente paso es conocer qué parámetros necesita la librería para poder hacer su trabajo. Como lo dije líneas arriba, la librería consta de una activity que mandaremos a llamar a través de un Intent pero con la particularidad de que no nos dará la opción de elegir una aplicación externa, sino que el usuario verá que el video lo reproduce la propia aplicación. El parámetro que necesita esta activity es el ID del video. En las URL’s de Youtube podemos identificar este atributo como la cadena que sigue de “v=”. Por ejemplo, en esta URL: “http://www.youtube.com/watch?v=_JkkkdH6zTQ“, la ID corresponde a: “_JkkkdH6zTQ“.

Por esa razón, vamos a diseñar una pantalla que nos pida un ID válido para que podamos mandar a llamar a la activity de la librería y podamos verla en acción.

6. Modifico entonces el archivo res > layout > main.xml para que tenga el siguiente código:

Las cadenas de texto que utilizo en esta pantalla son las siguientes y las he agregado en el archivo res > values > strings.xml:

 7. En la actividad principal de nuestro proyecto vamos a llamar a OpenYouTubePlayerActivity, que es la actividad que se encarga de reproducir los videos. Esta actividad es la que viene incluida en la librería; el resto de las clases se utilizan para darle forma al funcionamiento de la misma. Entonces, nos resulta realmente sencillo construir la llamada. Mi código es el siguiente:

Aquí lo único que estoy haciendo es instanciar mi EditText que es en dónde escribo directamente el código del video que quiero reproducir, y el Button que me ayudará a mandarle ese ID a OpenYouTubePlayerActivity. La parte importante del código son estas dos líneas:

Intent lVideoIntent = new Intent(null, Uri.parse(“ytv://”+videoId), MainActivity.this, OpenYouTubePlayerActivity.class);

startActivity(lVideoIntent);

En dónde creo el Intent utilizando el constructor que recibe cuatro parámetros: action, uri, packageContext y cls. (Ver documentación oficial).

8. Para que todo salga bien, necesito agregar algunos datos al AndroidManifest.xml tales como el registro de la actividad OpenYouTubePlayerActivity y los permisos de acceso a internet y a la información del estado de la WiFi. De tal forma que tu archivo manifest deberá verse como este:

Es importante resaltar que dado que la actividad que estamos registrando no pertenece a ninguno de nuestros paquetes, es necesario escribir el nombre completo con los espacios de nombres de la librería para que nuestra aplicación no nos lance un error al ejecutarla.

Otro detalle es que le hemos habilitado la orientación landscape para que el usuario vea de forma más cómoda el video.

9. Procedemos a ejecutar la aplicación y tendremos como resultado lo siguiente:

Leyendo en la parte de la Wiki de este proyecto, vi que varios usuarios han tenido problemas para agregar la librería y utilizarla directamente del archivo Jar. Si llegas a tener algún problema también o bien, quieres personalizar los controles del reproductor te recomiendo descargarte el código fuente del proyecto a través de SVN. La sección Source del proyecto la puedes encontrar aquí junto con el link del repo para poder tener las clases que conforman las librerías.

La clase OpenYouTubeActivity es la que tendrás que modificar para personalizar los controles y otras cosas que necesite tu proyecto. Por último, te recomiendo que cuando agregues estas clases a tu proyecto lo hagas asignándoles un paquete propio para que te sea siempre más sencillo identificar el código correspondiente a un “módulo” específico de funcionalidad.

Espero que el uso de esta librería te sea de utilidad, recuerda también siempre agradecer y reconocer el trabajo de los demás cuando utilices una librería de terceros.

¿Te gustó este post? ¡Compártelo!

Estás iniciándote en el desarrollo móvil y te preguntas: “¿Por dónde empiezo? ¿Qué debo saber? ¿Cómo debo programar?”.

Yo parto de una primera premisa “El desarrollo móvil NO es fácil pero tampoco es imposible”. Lo más importante al inicio, aparte de irte familiarizando con las herramientas y con los lenguajes que puedes utilizar del abanico de opciones disponibles, es estar al tanto de las arquitecturas que te permitirán crear buenas aplicaciones no sólo desde el enfoque de performance sino también desde un enfoque técnico.

El día de hoy vengo a platicarte de la arquitectura que se utiliza en el desarrollo móvil, su importancia y por qué si aún no la conoces debes considerar seriamente empaparte de ella para cambiar tus prácticas de programación.

En Android utilizamos el patrón de arquitectura llamado Modelo Vista Controlador (MVC) cuya principal bondad consiste en separar los datos de una aplicación, la interfaz de usuario y la lógica de negocios en tres componentes distintos que se relacionarán para al final tener como resultado nuestra aplicación.

De esta forma podemos seccionar de forma más fácil nuestro equipo de trabajo y dedicarnos a desarrollar nuestros componentes de tal forma que construyamos módulos o librerías con funcionalidades específicas que incluso podríamos reutilizar en proyectos posteriores y no simplemente en el proyecto actual. Para lograr esto, el diseño de la arquitectura de nuestra aplicación juega un papel importante y la capacidad de abstracción que tengamos desarrollada.

Por ejemplo, yo me podría dedicar a desarrollar una librería que me permita hacer conexiones con la API de Twitter. En mis clases puedo diseñar todas las funciones que me ayudarán a lograr las llamadas al protocolo OAuth, aquellas que me permitan twittear, recuperar información de tweets, followers, trending topics, etc. Esta librería, con un buen diseño y abstracción podría ser útil para todos los proyectos que necesiten conectarse con Twitter.

Volvámonos un poco teóricos y expliquemos de qué se tratan los componentes de este modelo:

• Modelo. Nos referimos con modelo a las representaciones que construiremos basadas en la información con la que operará nuestra aplicación. En Java, el modelo viene siendo análogo a los beans que tienen la particularidad de ser reutilizables y nos ayudan a cumplir con el proverbio de oro “Don´t Repeat Yourself” (DRY) haciendo a nuestras aplicaciones escalables. En esta parte del modelo también juega la decisión de qué modelo para almacenar información utilizaré. ¿Base de datos? ¿Web services? El modelo que elijas depende obviamente de las necesidades de información de tu aplicación. Actualmente tenemos tutoriales de SQLite y WebServices que te pueden ayudar.
• Vista. La vista no es más que la interfaz con la que va a interactuar el usuario. En Android, las interfaces las construimos en XML. Suelo utilizar mucho la analogía de que esta parte es realmente parecida a lo que hacemos en el desarrollo web con los CSS. Contruimos nuestro esqueleto en XML que equivale al HTML de un sitio. Posteriormente, con ayuda de estilos, que también los escribimos en XML, podemos empezar a darle formato de colores, posiciones, formato, etc. a nuestro esqueleto. Esto equivale a los CSS. Si vienes de un ambiente web, aprovecha ese conocimiento para aplicarlo a crear aplicaciones Android. Si quieres saber más acerca de estilos, checa este tutorial.
• Controlador. Finalmente nos topamos con el controlador que son todas esas clases que nos ayudarán a darle vida a esas interfaces bonitas que ya construimos y nos permitirán desplegar y consumir información de/para el usuario. Estos controladores se programan en lenguaje Java y son el core de la aplicación.

¿Puedes ver la ventaja? Así es, podemos tener perfiles especializados en construir cada uno de estos componentes y tener un resultado de calidad en cada uno y al final obtener una buena aplicación. El truco para que todo salga bien es ser disciplinados para poder ser programadores ordenados, eso es vital en la aplicación de esta arquitectura. Por experiencia, te puedo decir que si te esfuerzas en construir una buena arquitectura de aplicación te ahorrarás muchos dolores de cabeza después y te evitarás tener que duplicar líneas de código que hacen lo mismo, podrás escalar fácilmente tu aplicación, agregar funcionalidades nuevas sin tanto embrollo y ¿por qué no?, facilitar el comienzo de nuevos proyectos.

Para empezar a aplicar esta arquitectura debes saber también su flujo:

1. Todo parte cuando el usuario interactúa con tu aplicación, el jugador actual es la vista. (El usuario quiere mandar un Tweet).
2. El controlador recibe la notificación de la acción solicitada. (Por medio de un handler verificará si el usuario está logueado o no en su cuenta de Twitter).
3. El modelo es llamado para ser modificado. (Podemos accesar al caché de tweets que se tenían desde la última vez que el usuario abrió la aplicación y se conectó a Internet y agregar el nuevo tweet).
4. Una vez que tenemos los nuevos tweets y la publicación que quiere hacer el usuario, el controlador nuevamente toma partida para llamar a la vista correcta que desplegará el Timeline actualizado.
5. ¡Listo! El usuario ya tiene la nueva interfaz para seguir interactuando con la aplicación y volver a iniciar el ciclo cuando solicite otra acción.

Otra de las cosas que te ayudan a seguir este modelo es tener ordenado tu proyecto. Utiliza las convenciones de los lenguajes que utilices y las buenas prácticas para que sea más fácil acoplar a tus compañeros de equipo (no siempre uno solo se echa el paquete de hacer una aplicación y menos aún si es una compleja). Te aconsejo empezar con cosas tan sencillas como el nombramiento de paquetes, clases y variables, y después organizar los recursos que vayas a utilizar delegando siempre a cada componente lo que le corresponde.

En la web puedes encontrar muchos recursos que puedes leer para ver ejemplos de la aplicación de esta arquitectura. No es algo nuevo pero algunos no la conocen.  Sin importar que encuentres un ejemplo para web, recuerda que en la programación únicamente cambia el lenguaje, la lógica y la metodología es la que se preserva.

Si aún no utilizas esta arquitectura para construir tus aplicaciones Android creo que es un buen momento para tomarlo en cuenta y empezar a aplicar.

¿Te fue útil este post? ¡Compártelo!

Referencia teórica: Wikipedia

Siguiendo con los tutoriales que les pueden ayudar a agregar widgets muy atractivos y funcionales en sus aplicaciones, el día de hoy les vengo a platicar de SlidingDrawer, un componente nativo del SDK de Android. Para que te des una idea del widget del que estoy hablando, aquí te va una imagen:

El menú que aparecía en las primeras versiones de Android se puede “duplicar” en funcionalidad con el componente que conoceremos el día de hoy. Para empezar a ver cómo implementar este componente he creado un nuevo proyecto llamado SlidingDrawerTest con la versión 2.2 de Android.

1. El primer paso es conocer qué necesitamos para armar la parte visual del SlidingDrawer y para ello resulta bueno echarle siempre un vistazo a lo que nos dice la documentación oficial. Este componente puede tener un scroll vertical u horizontal, nuestra selección dependerá obviamente del resultado visual que queramos obtener.

Este widget se compone de dos partes importantes: un handle y un content. El primero corresponde a la imagen/pestaña que dispara los eventos de ocultar y mostrar el contenido; el segundo es el contenido que se mostrará cuando el componente se encuentre en su estado “abierto”. Sabiendo esto, podemos empezar a bosquejar qué recursos de imagen y de widgets en XML necesitaremos agregar a nuestra aplicación.

El caso que me llevó a utilizar este componente fue que necesitaba desplegar un Scroll de imágenes que en su estado normal estuviera oculto y que al dar clic sobre una pequeña pestaña se mostraran las imágenes. A continuación te comparto un borrador de lo que al final tendremos con nuestro ejemplo:

Así que para empezar voy a agregar los recursos de imagen necesarios para poder concluir mi ejemplo. Los recursos que voy a utilizar los puedes descargar desde este link.

Una vez que descomprimas el archivo, estas imágenes deberás pegarlas en el directorio res > drawable de tu proyecto.

2. Para ir armando la interfaz de usuario te aconsejo que siempre trates de descomponer tu bosquejo en partes sencillas para que puedas trabajar de forma más cómoda el diseño en XML. De acuerdo al bosquejo que te compartí arriba, vamos a empezar por crear el layout de cada una de las imágenes que quiero mostrar en el scroll. Para ello, he creado un archivo llamado imagen_scroll.xml que tiene el siguiente código:

El resultado visual de este layout es darle formato a cada una de las imágenes que me interesen agregar a un scroll horizontal que se mostrará cuando el SlidingDrawer se abra. El código de arriba debe darte algo como esto:

3. El siguiente paso será diseñar la parte del layout que corresponde al SlidingDrawer. Para ello he modificado el archivo main.xml para que contenga el siguiente código:

 He definido primero un LinearLayout que abarque todo el espacio de la pantalla y le he definido un atributo android:gravity con bottom|fill_horizontal para que el SlidingDrawer se vaya hasta la parte inferior de la pantalla como lo bosquejé en un principio. El componente SlidingDrawer tiene asignado una ID para que pueda manipularlo desde mi activity y también tiene declarados dos ID’s más que corresponden al handle y al content que anidará más adelante.

4. Para la parte del handle voy a definir un LinearLayout que contenga la imagen que corresponde al tab que yo quiera según el diseño de mi aplicación. En este paso utilizaremos una de las imágenes que agregamos en el primer paso. Por lo tanto el código que te muestro a continuación lo escribirás dentro de las pestañas <SlidingDrawer>…</SlidingDrawer>:

Como podrás observar, es al LinearLayout el componente al cuál le mando a llamar el ID handle que ya había definido el componente. Posteriormente le asigno un ID al ImageView para poder manipularlo desde el código.

5. Para terminar esta parte, voy a agregar, seguido del código anterior, la declaración de los componentes que corresponden al content del slidingDrawer. El código es el siguiente:

En este caso, es un HorizontalScrollView el que llevará la referencia al ID content. Un HorizontalScrollView únicamente puede contener un elemento hijo de forma directa, por lo que le anido un LinearLayout que me ayudará a agregar todas las imágenes que necesite mostrar en el scroll. Como este simplemente es un demo, insertaré de forma “manual” las imágenes. En un caso real, estas imágenes podrían agregarse en tiempo de ejecución a través de un Web Service, una Base de datos o cualquier otro método que estemos utilizando para recuperar una serie de imágenes.

Como en un paso anterior hicimos el layout de cada una de las imágenes que contiene el scroll, podemos insertar este diseño dentro de otro con la etiqueta <include…>. Esta práctica es muy parecida a la utilizada en diseño web en dónde puedes trabajar trozos de la interfaz que se repetirá en más de una página y así no tener que escribir el mismo código muchas veces. En el desarrollo móvil es igual y resulta muy útil y mantenible esta práctica.

6. Ahora que ya tenemos nuestra interfaz lista podemos ejecutar nuestro ejemplo y ver el resultado visual que es el siguiente:

7.  Pues al parecer casi todo quedó bien. El detalle que nos falta trabajar es la imagen de la pestaña. Regularmente queremos que la imagen de la pestaña cambie para indicar su estado. Para ello, contamos con tres métodos que podemos implementar en nuestro componente SlidingDrawer y son los siguientes:

• OnDrawerCloseListener. Que se ejecuta cuando el contenido del componente está oculto.
• OnDrawerOpenListener. Que se ejecuta cuando el contenido del componente se muestra y pasa a estar abierto.
• OnDrawerScrollListener. Que se ejecuta cuando el scroll está en proceso.

8. Entonces, para cambiar la imagen de la pestaña tenemos que implementar los métodos OnDrawerCloseListener y OnDrawerOpenListener. Para ello, nos vamos a nuestra activity y escribimos el siguiente código:

Para poder implementar los métodos es necesario tener una referencia al componente SlidingDrawer; por esa razón, he declarado una variable de esta clase llamada mySlidingDrawer. Después, como nuestro interés se centra en cambiar la imagen de la pestaña, entonces debemos crear otra variable de tipo ImageView que apunte a la imagen que representa la pestaña.

En el método onCreate() simplemente recuperamos las referencias según los Id’s que les hayas asignado a tus componentes. Por último, implementamos los métodos aplicando los listeners a la variable mySlidingDrawer. Cuida mucho que tengas las sentencias import necesarias para que tu código no marque errores. Ahora simplemente utilizamos el método setImageResource de la ImageView para cambiar la imagen de la pestaña. Con esto, volvemos a correr el ejemplo y veremos que este detalle ya está resuelto:

 Por último, si quieres que adicional al efecto de deslizar que ya presenta este componente quisieras que también se habilitara mostrar el contenido del SlidingDrawer al dar un clic sobre la pantalla puedes agregarlo sin problemas agregando el atributo android:allowSingleTap=true.

Este componente es muy útil y vistoso, espero que te sea de utilidad este tutorial para mejorar cada vez más los diseños de tus aplicaciones.

¿Te gustó este post? ¡Compártelo!

 En Androideity queremos traerte solo los mejores juegos para Android, aquellos que están esperando que sean jugados y llevados a su máxima capacidad, es por eso que hoy te acercamos esta recomendación que fue uno de los mejores juegos en el momento de su estreno ya que no tenía muchos competidores en el ecosistema Android y los dispositivos en los que podía correr no llenaba una lista muy larga, pero con el avance de la tecnología y la gran oferta de dispositivos con sistema operativo Android que hay hoy en el mercado, Modern Combat es una experiencia de juego que no debes dejar pasar. Es cierto que ya tenemos la entrega 3 de este juego, la cual analizaremos en su debido momento, pero queremos mostrarte porque se habló tanto de este juego cuando salió al mercado.

Los juegos que están hoy en día llenando nuestros televisores con personajes de acción, misiones a cumplir y enemigos a derrotar, tienen una historia que nos llena de nostalgia cuando recordamos aquellos momentos en donde las gráficas no eran lo importante, sino las emociones que despertaban estos juegos tipo FPS o también llamados tipo “Shooter”. Tal vez si eres muy joven no tuviste la oportunidad de ver como eran los juegos en 3 dimensiones anteriormente, los cuales fueron la base para juegos como Modern Combat, así que te invitamos a que veas un poco de Wolfenstein, un juego que ya tiene sus años, pero que levantaba muchas emociones en su momento:

Si viste el video que te invitamos, te podrás dar cuenta que la temática es muy similar al juego que hoy te traemos, Modern Combat 2 de la empresa Gamelof que presenta en su página oficial el juego de la siguiente manera:

Termina lo que comenzaste.

En Modern Combat 2: Black Pegasus, completa la misión desvelada en la primera parte de uno de los FPS más aclamados para Android, esta vez con frentes por todo el mundo.

Modern Combat 2: Black Pegasus mejora el juego ya ejemplar del primer juego de Modern Combat con una asombrosa inmersión en una experiencia de guerra moderna y con uno de los modos multijugador FPS más completos para Android.

Y el video de presentación oficial del juego es el siguiente:

No necesita mucha explicación este juego, cuentas con diferentes armas para luchar en diferentes misiones que te plantean a lo largo de los diferentes continentes, pero si eres de Colombia, el último capitulo te será muy familiar, así que si sabes a que nos referimos compártelo en los comentarios a ver si acertaste. Pero no solo se queda en las misiones, también tienen la posibilidad de jugar en línea tanto por internet como en red WiFi con amigos que tengas cerca, creando tus propios sesiones en los diferentes escenarios.

 En la pantalla principal del juego encontrarás el joystick para desplazar al personaje principal por los diferentes escenarios, el botón de disparar, el de apuntar, el de agacharse, el de pausa, así como las diferentes opciones de armas, y las granadas o los gases lacrimógenos para dispersarse y distraer a tus oponentes. Para mover la vista principal debes desplazar tu dedo en la parte derecha de la pantalla y cuando te encuentras muy cerca a un oponente aparece la opción de acuchillar a tu oponente. Así que tienes mas de 7 controles que debes tener en cuenta para jugar y cumplir todas las misiones.

 Lo que es más destacable de este grandioso juego es su modo multijugador en el cual puede jugar en línea hasta con 10 usuarios compañeros, y 10 oponentes, en diferentes misiones como rescata la bandera, batalla por equipos y desactivar la bomba. Sencillamente debes crear una cuenta en Gameloft, en donde en primera instancia tienes nivel 1 y a medida que vallas derrotando oponentes,  y ganando misiones, vas subiendo tu nivel y ganando mejores armas, de las 15 diferentes que tienes disponibles. No puedes dejar de probar este modo on-line porque es lo mejor de este juego, y siempre encontraras una sesión activa, o sino puedes crear la propia e invitar a tus amigos para que se unan. Mi nombre de usuario es JaimeYesidLeon, si nos encontramos y luchamos juntos.

 El juego está calificado en la Play Store en 4.0, juego que lo pone entre los mejores de su categoría; hay que tener en cuenta que los problemas van a surgir si no tienes tu teléfono libre de cache, y si no tienes un buen espacio de memoria libre, además la memoria RAM del móvil debe estar libre en su mayor medida, y con esto nos referimos a que no estén muchas aplicaciones corriendo al tiempo. Para que tu juego funcione ok debe tener por lo menos Android 2.1, y al menos 600MB en memoria libre para la descarga de los datos adicionales. Los comentarios en las calificaciones en general son muy buenos, aunque también se encontrarán problemas inevitables:

 Observaciones personales

Después de comprar este genial juego, haber cumplido todas las misiones y estar jugando en línea por un muy buen tiempo, tengo que decir que es un juego excepcional, tan solo el intro hace que quieras cumplir todas las misiones a cabalidad lo más pronto posible; entras directamente en la historia que traes desde la primera entrega, además la manera en que se desarrolla el juego hace que te enfoques en la acción pura, te ponen de una vez en el campo de batalla y nada de entrenamientos aburridos, de una a lanzarte a cumplir tus misiones.

Los gráficos son magníficos no tienen nada que discutir, son muy realistas y acordes a cada misión que te es asignada, además el ambiente es bastante bueno animado con buenos efectos de guerra en vivo, y enemigos muy bien diferenciados. Y que tal el modo multijugador que te mostramos:

Como te decíamos, lo mejor del juego es su modo multijugador, eso sí es la guerra en vivo, no tienes chance alguno, es salir al campo a ayudar a tu equipo a derrotar a los malosos del equipo contrario, o rescatando la bandera que te han capturado, o cuando estás solo debes luchar contra cualquiera que se te aparezca en frente; y que decir cuando te reúnes con tus amigos y formas un grupo especial, es una locura completa que no quieres dejar de jugar.

Así que no dejes de vivir una experiencia de un juego muy bien logrado que te hará derrochar adrenalina y vencer al que se te pase por el frente, te dejamos el enlace para lo vayas directo a descargarlo.

Descargalo directamente:

El SDK de Android nos proporciona muchas herramientas que nos ayudarán a hacer más fácil la tarea de crear aplicaciones Android. La mayoría de las veces me he encontrado con las dudas comunes de “¿Cómo mejoro el diseño de mis aplicaciones?”. Esta es una pregunta compleja porque involucra muchos skills y conocer cómo darle ese look&feel que vaya con la idea de lo que hace nuestra aplicación.

En el desarrollo de cualquier aplicación móvil hay que tomar en cuenta siempre tener un diseñador en nuestro equipo que nos construya el arte de la aplicación y quien nos genere también los recursos (imágenes en su mayoría) que utilizaremos en las interfaces. Si bien esto es básico, también lo es conocer cómo preparar esas imágenes para que se muestren lo mejor posible en las distintas resoluciones y tamaños de pantalla de los dispositivos Android en donde correrá nuestra aplicación.

Por esa razón, hoy te presento una herramienta del SDK de Android que te ayudará a que tus imágenes puedan conservar su calidad sin importar el tamaño de pantalla de tus dispositivos.

Esta herramienta se llama draw9patch y nos ayudará a generar archivos 9-patch a partir de imágenes PNG. Pero, ¿qué son los archivos 9-patch? Un gráfico 9-patch es básicamente es una imagen de mapa de bits extensible, es decir, un tipo de imagen que Android puede cambiar de tamaño automáticamente para ajustarse a la vista a la que se le ha sido asignado como background.

Para que esto vaya quedando más claro, pasemos al ejemplo para que puedas aterrizar los alcances de esta herramienta.

1. Actualmente tengo un un proyecto llamado Imagen9Patch con la versión Android 2.1.

2. En la carpeta drawable he agregado dos imágenes que me servirán como fondo para un botón (para cuando se encuentre en su estado normal y cuando sea presionado por el usuario). Estas imágenes las puedes descargar desde este link. (En caso de no tener la carpeta drawable, tendrás que crearla en tu proyecto).

3. Para definir la imagen que se desplegará como fondo del botón según el estado del mismo, he creado un archivo XML dentro de la misma carpeta de drawable cuyo nombre es fondo_boton.xml y cuyo código puedes ver a continuación:

4. Una vez definido esto, he agregado un archivo de estilos dentro de la carpeta values. Mi archivo se llama styles.xml y su contenido es el siguiente:

5. Por último, he modificado el archivo main.xml de la carpeta res > layout para agregar los cuatro botones en la interfaz de usuario. El código de este archivo es el siguiente:

**Cada uno de los botones tiene un texto, por ello, por cada botón hay un elemento de cadena de texto dentro del archivo strings.xml del directorio res > values.

6. El resultado es el siguiente:

Como puedes ver, los bordes de las imágenes se ven borrosas porque al parecer la imagen es más chica para el tamaño de los botones. La solución “más sencilla” sería pedirle a nuestro diseñador una imagen más grande para que el fondo de los botones mejorara su calidad en la pantalla pero hay otra solución: Utilizar imágenes 9-patch.

Para crear estas imágenes será necesario abrir la herramienta Draw9Patch que se encuentra en el directorio /tools del SDK de Android. Se trata de un archivo .bat. Lo ejecutas y enseguida verás la siguiente pantalla:

El primer paso es cargar la imagen que queremos convertir. Para ello, podemos arrastrar y soltar la imagen dentro de la ventana o bien ir a la opción File > Open 9-patch… y elegir la imagen deseada.

Yo he elegido cargar la imagen button.png del ejemplo arriba mencionado. Cuando carguemos la imagen la pantalla se nos mostrará como sigue:

En la parte principal tenemos nuestra imagen y nuestra área de trabajo donde aplicaremos los cambios necesarios. En la parte derecha se nos muestra la vista previa de cómo reaccionará nuestra imagen cuando el elemento se “estire” a lo ancho o a lo largo de la pantalla. Recuerda que estas imágenes las estamos ocupando como fondo de un botón, pero también pueden ser el fondo de un TextView o de cualquier otro elemento. En la parte inferior tenemos algunas herramientas como el zoom que nos permitirán tener mayor precisión al trabajar la imagen que hemos cargado.

Ahora bien, el chiste de la herramienta consiste en marcar líneas fuera del elemento y sobre un espacio que necesitemos que se expanda para ayudar a que la imagen no se vea pixelada. Cada vez que agreguemos una línea sobre la imagen podemos ver el resultado en la vista previa de la herramienta. Por ejemplo:

 En este caso he agregado cuatro líneas que representan el espacio que se repetirá para que las esquinas no se tengan que pixelear cuando el fondo se estire en un componente. Para poder visualizar las zonas que estará repitiendo Android cuando redimensione la imagen bastará con presionar el botón Show bad patches/Hide bad patches como te muestro a continuación:

Cabe mencionar que las líneas negras que dibujamos son de un pixel, cuando queramos borrar alguna presionamos Shift y damos clic sobre la porción de la línea a borrar que se representa por cada uno de los cuadros que conforman nuestra área de trabajo. Sencillo, ¿cierto?.

Cuando ya estemos satisfechos con el resultado que se muestra en la vista previa podemos pasar a guardar la imagen con la opción File > Save 9-patch… En este caso yo las llamaré tal cuál se llama la imagen original en PNG. Esta primera imagen entonces llevará el nombre de button.9.png.

Haré exactamente el mismo procedimiento para la segunda imagen para obtener button_over.9.png.

Cuando ya tenga las dos imágenes pasaré a agregarlas a mi proyecto. Para ello, deberás eliminar primero las imágenes que tienes actualmente en la carpeta drawable y posteriormente agregar las imágenes 9-patch.

Ahora volvemos a ejecutar la aplicación y veremos cómo nuestra interfaz ya ha mejorado notablemente. Los botones ahora no se ven deformes y los bordes de los mismos tienen un mejor aspecto.

Pues bien, este es el funcionamiento básico del uso de esta herramienta y que podemos utilizar en escenarios mucho más complej0s para lidiar con el rollo de las resoluciones de pantalla y también cuando tenemos elementos que variarán su tamaño según el contenido que tengan.

Espero que te sirva este tip, ya tienes una herramienta más para mejorar el aspecto de tus aplicaciones.

¿Te gustó este post? ¡Compártelo!