Curso Android: Trabajado con imgenes (cmara y galera)

En el primer captulo del curso aprendimos a construir un lector de feeds simple; el segundo captulo fue sobre UI en Android y aumentar la funcionalidad de un lector de feeds; en el tercer captulo trabajaremos con el hardware de los telfonos y empezaremos con el manejo de la cmara.

Mostrar una imagen de la cmara o de la galera

La aplicacin que realizaremos nos permitir mostrar una imagen, podemos obtenerla desde la cmara o desde la galera del telfono. Queremos que al finalizar se vea as:

Con una imagen cargada se ver de la siguiente forma:

Disposicin inicial
Empezaremos descargando el cdigo que debe importarse hacia un proyecto nuevo. Trabajaremos sobre un telfono con Android y cmara para desarrollar el ejemplo de este artculo. Para el deployment hacia el telfono es necesario que el sistema operativo lo reconozca y adems debe colocarse en el manifest como una propiedad de la etiqueta<application> el valor android:debuggable="true". La etiqueta debe lucir de la siguiente forma:
?

1 android:label="@string/app_name" android:debuggable="true">
En la parte de diseo vamos a empezar con un RelativeLayout, el archivo/res/layout/main.xmldebe estar as:
?

<application android:icon="@drawable/icon"

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

Diseo
Trabajaremos con otra disposicin de elementos para el diseo llamado RelativeLayout y agregaremos otros elementos de interfaz de usuario.

RelativeLayout: con este esquema los elementos se colocan en posicin relativa a otros elementos o hacia el padre.

RadioButton: es un botn de dos estados (marcado y des-marcado) a diferencia delCheckButton este no permite des-marcarlo y cuando se encuentra en grupo solo uno de los botones del grupo puede estar marcado a la vez.

RadioGroup: permite agrupar un conjunto de RadioButtons para que solo uno a la vez est seleccionado.

Nuestro diseo tendr un botn para adquirir la imagen un RadioGroup que contendr a 3 botones y un ImageView. Los 3 botones sern seleccionar de donde proviene la imagen ya sea de la cmara (como vista previa o como imagen completa) o de la galera. El cdigo completo del layout es el siguente:
?

1 <!--?xml version="1.0" encoding="utf-8"?--> <button> 2 </button> 3

Hemos orientado el botn hacia la derecha y el RadioGroup hacia la izquierda. Luego elImageView abajo del RadioGroup. El diseo de interfaces de usuario en ocasiones se vuelve complicado con eclipse por ello utilizaremos la herramienta gratuita DroidDraw que permite exportar e importar archivos XML para luego solo colocarlos en el archivo de diseo en eclipse, adems tiene ejecutables para Windows, Linux y OS X.

Agregando cdigo para funcionalidad

Definimos 3 constantes, con dos de ellas vamos a identificar la accin realizada (tomar una fotografa o bien seleccionarla de la galera) y con la otra estableceremos un nombre para el archivo donde escribiremos la fotografa de tamao completo al tomarla.
?

1 private static int TAKE_PICTURE = 1; 2 private static int SELECT_PICTURE = 2; 3 private String name = "";
La forma ms sencilla de tomar fotografas es utilizar un intent con ACTION_IMAGE_CAPTURE, accin que pertenece al Media Store y luego sobrecargar el mtodo onActivityResultpara realizar algo con el archivo recibido de la cmara. Dentro del mtodo onCreate asignaremos a la variable de instancia name y luego vamos a trabajar sobre la accin al click del botn. Este nombre, inicializado con una llamada agetExternalStorageDirectory() guardar un archivo en la tarjeta SD del telfono y el archivo se llamar test.jpg cada vez que grabemos una fotografa de tamao completo se sobre escribe.
?

1 2 name = Environment.getExternalStorageDirectory() + "/test.jpg"; Button btnAction = (Button)findViewById(R.id.btnPic); 3 btnAction.setOnClickListener(new OnClickListener() { 4 @Override public void onClick(View v) { 5 ... 6 } 7 } 8 } 9
Primero obtenemos los botones de imagen completa y de galera para revisar su estatus ms adelante. Luego construimos un intent que es necesario si accesamos la cmara con la accin ACTION_IMAGE_CAPTURE, si accesamos la galera con la accin ACTION_PICK. En el caso de la vista previa (thumbnail) no se necesita ms que el intent, el cdigo e iniciar laActivity correspondiente. Por eso inicializamos las variables intent y code con los valores necesarios para el caso del thumbnail as de ser el botn seleccionado no validamos nada en un if.
?

1 RadioButton rbtnFull = (RadioButton)findViewById(R.id.radbtnFull); 2 RadioButton rbtnGallery = (RadioButton)findViewById(R.id.radbtnGall); 3 Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
Asignamos el cdigo a tomar fotografa, este cdigo junto al intent se utilizarn adelante para iniciar la Activity.
?

1 int code = TAKE_PICTURE;

Si el chequeado es el botn de vista previa no necesitamos agregar nada ms. Si el chequeado es el botn de imagen completa, adems del intent y cdigo agregamos un URI para guardar all el resultado. Si el chequeado es el de la galera necesitamos un intent y cdigo distintos que asignamos en la consecuencia del if.
?

1 2 3 4 5 6 7
?

if (rbtnFull.isChecked()) { Uri output = Uri.fromFile(new File(name)); intent.putExtra(MediaStore.EXTRA_OUTPUT, output); } else if (rbtnGallery.isChecked()){ intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.INTERNAL_CONTENT_URI); code = SELECT_PICTURE; }

Luego, con todo preparado iniciamos la Activity correspondiente.

1 startActivityForResult(intent, code);
Adems, es necesario sobrecargar la funcin onActivityResult para indicar que queremos hacer con la imagen recibida (ya sea de la cmara o de la galera) una vez ha sido seleccionada. Es necesario revisar si la imagen viene de la cmara TAKE_PICTURE o de la galera SELECT_PICTURE.
?

1 @Override protected void onActivityResult(int requestCode, int 2 resultCode, Intent data) { if (requestCode == TAKE_PICTURE) { 3 4 } else if (requestCode == SELECT_PICTURE){ 5 } 6 7 }
Si viene de la cmara, verificamos si es una vista previa o una foto completa:
?

1 if (data != null) { 2 3 } else { 4 } 5

En el caso de una vista previa, obtenemos el extra data del intent y lo mostramos en elImageView:
?

1 if (data.hasExtra("data")) { 2 ImageView iv = (ImageView)findViewById(R.id.imgView); iv.setImageBitmap((Bitmap) data.getParcelableExtra("data")); 3 } 4

En el caso de una fotografa completa, a partir del nombre del archivo ya definido lo buscamos y creamos el bitmap para el ImageView:
?

1 ImageView iv = (ImageView)findViewById(R.id.imgView); 2 iv.setImageBitmap(BitmapFactory.decodeFile(name));

Si quisiramos incluir esa imagen en nuestra galera, utilizamos unMediaScannerConnectionClient.
?

01 new MediaScannerConnectionClient() { 02 private MediaScannerConnection msc = null; { 03 msc = new MediaScannerConnection(getApplicationContext(), 04 this); msc.connect(); } 05 public void onMediaScannerConnected() { 06 msc.scanFile(fileName, null); 07 } public void onScanCompleted(String path, Uri uri) { 08 msc.disconnect(); 09 } 10 }; 11
Si viene de la galera recibimos el URI de la imagen y construimos un Bitmap a partir de un stream de bytes:
?

1 2 3 4 5 6 7 8 9

Uri selectedImage = data.getData(); InputStream is; try { is = getContentResolver().openInputStream(selectedImage); BufferedInputStream bis = new BufferedInputStream(is); Bitmap bitmap = BitmapFactory.decodeStream(bis); ImageView iv = (ImageView)findViewById(R.id.imgView); iv.setImageBitmap(bitmap); } catch (FileNotFoundException e) {}

Si estamos utilizando la cmara la vista ser de la siguiente forma:

Si estamos capturando de la galera ser as:

Descarga:
Puedes descargar el cdigo de la aplicacin completa y funcional en: Trabajado con imgenes (cmara y galera).

Conclusin

RelativeLayout, RadioButton y RadioGroup:aprendimos cmo pueden acomodarse componentes ubicndolos en el diseo con posiciones relativas con respecto a otros componentes y tambin los controles necesarios para el manejo de radio buttons y su agrupacin.

Utilizacin de intents para utilizar la cmara y accesar la galera: se utilizaron intents para realizar acciones especficas, la existencia de intents para acciones comunes predefinidas nos facilitan muchas tareas, en este caso no fue necesario accesar directamente el hardware de la cmara si no pudimos tomar una fotografa de una manera ms sencilla. Algo similar sucede con el acceso a la galera de fotos.

Utilizacin de la cmara de fotos: a travs de un ejemplo sencillo, aprendimos como utilizar parte del hardware del telfono. A partir de aqu podemos trabajar los imagnes guardadas y modificarlas o utilizarla para lo que nos interese.

http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/

Procesamiento de imgenes en android

Saludos gente, ya tiene rato que no venia por estos lados; acabo de regresar a clases y puros exmenes pendientes y la tesis en camino , pero bueno aun as aqu estamos.

Me gustara saber a cuantas personas les gustara empezar con un mini grupito haciendo publicaciones sobre procesamiento de imgenes en android, algo as como tener una aplicacin en baja escala de las funciones clsicas de algunos programas comerciales de manipulacin de imgenes. Para iniciar ya hice algunas aplicaciones en este foro sobre la lectura del RGB de una imagen si necesitan ayuda digan por favor y les explicare mas detalladamente ya que es parte de mi vida el procesamiento de imgenes en mi maestra. Empezare con ensearles como cambiar una imagen normal que tengamos por ah y le cambiaremos a una escala de grises. Para entender como se hace ese cambio debemos sacar sus valores RGB de una imagen y manipularlos para cambiarlo a un tono gris; ya se que existen otras maneras de hacer los cambios por manipulacin de funciones en android pero aqu quiero explicarles desde el punto de vista como dice mi asesor "caminando descalzo". Existe una ecuacin muy particular que usaremos:
Cita:

(0.299*r + 0.587*g + 0.114*b) Las variables r, g y b son los valores de los canales correspondientes para la escala en Rojo, Verde y Azul; juntos crean la gama de colores que se conocen y por lo mismo si los manipulamos con dicha ecuacin podremos sacar un resultado que sera como un promedio de los 3 canales. Pero!!! solo tenemos un resultados y 3 canales por

llenar

lo que hace falta es copiar ese resultados en los 3 canales y

nuestra imagen quedara en una tonalidad gris. Empecemos con el cdigo de inicio (libreras cargadas):
Cita:

import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; El main.xml quedara de esta forma:
Cita:

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" android:id="@+id/tex" /> <ImageView android:layout_width="wrap_content" android:src="@drawable/icon" android:id="@+id/Image" android:layout_height="wrap_content"></ImageView> <Button android:text="GrayScale" android:id="@+id/Butt" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>

Al inicio de nuestro activity podemos cargar las variables que vamos a usar yo las defin de la siguiente manera:
Cita:

Bitmap Imag; ImageView view; Button But; TextView text; int picw, pich; int pix[]; De donde: Imag = Nuestra variable donde tendremos nuestra imagen cargada. view = Donde cargaremos nuestra imagen modificada. But = Nuestro boton. text = Nuestro texto a desplegar. picw = La variable donde cargaremos la dimensin de nuestra imagen en Width. pich = La variable donde cargaremos la dimensin en Heigth. pix[] = La variable donde estaremos guardando los valores de los pixeles. Despus de eso llenamos nuestras respectivas variables de la siguiente manera:
Cita:

Imag = BitmapFactory.decodeResource(getResources(), R.drawable.rgb); picw = Imag.getWidth(); pich = Imag.getHeight(); view = (ImageView)findViewById(R.id.Image); But = (Button)findViewById(R.id.Butt); view.setImageBitmap(Imag); text = (TextView)findViewById(R.id.tex); pix = new int[picw*pich]; Despus de tenerlas llenas con los valores a manipular crearemos un setOnClickListener a nuestro boton. Donde tendremos nuestra funcin GrayScale que cambiara nuestros valores de pix[] y desplegarlos en el view. Dentro del mismo evento tambin crearemos

un nuevo Bitmap para no modificar nuestra imagen original solo por seguridad; de esta manera:
Cita:

Bitmap bm = Bitmap.createBitmap(picw, pich, Bitmap.Config.ARGB_4444); Nuestra funcin que va a hacer el cambio a escala de grises lo declaramos del siguiente modo:
Cita:

public int[] GrayScale(Bitmap mBitmap) { int picw, pich; picw = mBitmap.getWidth(); pich = mBitmap.getHeight(); int[] pix = new int[picw * pich]; mBitmap.getPixels(pix, 0, picw, 0, 0, picw, pich); for (int y = 0; y < pich; y++) for (int x = 0; x < picw; x++) { int index = y * picw + x; int r = (pix[index] >> 16) & 0xff; int g = (pix[index] >> 8) & 0xff; int b = pix[index] & 0xff; int R = (int)(0.299*r + 0.587*g + 0.114*b); pix[index] = 0xff000000 | (R << 16) | (R << 8) | R; } return pix; } Aqu nuestra funcin recibe un Bitmap, sacamos sus valores de pixeles, leemos el RGB y aplicamos la ecuacin que dijimos al inicio, guardamos de nuevo en la variable pix y cuando termine de leer todo lo que contiene pix lo regresamos.

De nuevo en nuestro evento del boton solo nos queda leer lo regresado y llenar nuestra nueva imagen con los pixeles modificados de la funcin.
Cita:

pix = GrayScale(Imag); bm.setPixels(pix, 0, picw, 0, 0, picw, pich); view.setImageBitmap(bm); view.invalidate(); Y listooo!!! aqu esta la clsica imagen de muestra del resultado

espero les sirva y comenten o mnimo dejen algo de puntos jeje.

http://www.forosdelweb.com/f165/procesamiento-imagenes-android-933993/

Manejo de varios idiomas en una aplicacin Android

Escrito por Condesa | Wednesday, August 17, 2011 a las 2:46 pm | 26 Comentarios

Dando respuesta a una consulta que nos hizo un lector, el da de hoy vamos a conocer cmo es que podemos crear nuestras aplicaciones con soporte a varios idiomas. En algunos otros entornos de desarrollo, esta caracterstica resulta tediosa porque es necesario hacer uso de libreras, scripts extras o archivos dedicados a indicar cules cadenas de texto sern las que se traducirn segn la configuracin de idioma que defina el usuario. Afortunadamente, en Android es algo muy sencillo de implementar, as que pasemos a explicar cmo conseguirlo. As como vimos en un post anterior acerca del uso de Strings en Android, utilizar el archivo strings.xml del directorio res > values nos trae muchas ventajas de flexibilidad y en este caso ser un paso clave para lograr que nuestra aplicacin sea traducible a varios idiomas. Si por ejemplo en el archivo res > values > strings.xml estamos manejando las Strings en idioma ingls y queremos tambin manejar el idioma espaol, ser necesario agregar un directorio llamado res > values-escon un archivo llamado strings.xml en el que las mismas Strings del otro archivo se incluyan pero esta vez con sus traducciones respectivas al idioma espaol. As pues, si requerimos traducir la aplicacin a otros idiomas, tendremos que incluir tantos directoriosvalues-[cdigoDelIdioma] como sean necesarios. Y cmo s cul es el cdigo de cada idioma? Googleando, he encontrado un listado de la ISO 639-1 que nos proporciona 136 cdigos de dos letras usados para identificar los idiomas principales del mundo. Como siguen un estndar respetado por varias plataformas informticas, podemos utilizarlo para nombrar nuestros directorios y dotar a nuestra aplicacin de la caracterstica de la internacionalizacin.

Por ltimo, cabe mencionar que si el idioma del telfono en el que se instale nuestra aplicacin coincide con el cdigo de alguno de los directorios de idioma que anexamos, ese ser tomado por default para desplegar la aplicacin. Como puedes ver es algo bastante til y sencillo de implementar. Si t tambin tienes dudas concretas de algn tema en especial en el desarrollo de Android te invito a que nos contactes para que publiquemos material de referencia en nuestro blog. http://androideity.com/2011/08/17/manejo-de-varios-idiomas-en-una-aplicacionandroid/