Curso Android: Trabajado con imágenes (cámara y galería)

Curso Android: Trabajado con imágenes (cámara y galería)
Inicio
Temas
Perfiles
Guías
Acerca de
Contacto
Búsqueda
Sobre el Autor
Adrian Catalán
Ingeniero en Sistemas,
catedrático universitario,
educador y desarrollador de
software, fundador del grupo de tecnologías de
Curso Android: Trabajado con imágenes (cámara y
galería)
Google en Guatemala (GTUG), apasionado por
aplicaciones web (Ruby On Rails) y móviles
(Android) desde el 2011 un Elemental Geek.
Últimos artículos:
En el primer capítulo del curso aprendimos a construir un lector de feeds simple; el segundo
capítulo fue sobre UI en Android y aumentar la funcionalidad de un lector de feeds; en el
tercer capítulo trabajaremos con el hardware de los teléfonos y empezaremos con el manejo
Curso Android: Conectándonos con APIs de
Google
de la cámara.
Curso Android: Trabajando con APIs (Facebook
y Twitter)
Mostrar una imagen de la cámara o de la galería
Curso Android: Envío de emails utilizando
Android
La aplicación que realizaremos nos permitirá mostrar una imagen, podemos obtenerla desde
Curso Android: Reproducción de sonido en un
ciclo infinito
la cámara o desde la galería del teléfono. Queremos que al finalizar se vea así:
Más artículos de Adrian Catalán
50.269 Lecturas
9 Comentarios
Archivado en: Tecnologías móviles, Android, code,
curso
Burt Herman fundador de Storify
Es viernes: Cuando las metas ponen el ritmo
Notas importantes
Mexico y América Latina se prepara para recibir
a Geeksonaplane
Crear contenido para Twitter
El libre licenciamiento de obras
Herramientas analíticas para Redes Sociales
Herramientas para crear y organizar contenido
en Redes Sociales
Autogestión o gestión colectiva
Con una imagen cargada se verá de la siguiente forma:
¿Qué debe saber un Community Manager
sobre la marca?
La función del Community Manager
http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/[22/07/2013 01:58:57 p.m.]
Curso Android: Trabajado con imágenes (cámara y galería)
Limitaciones y excepciones al derecho de autor
En Argentina y Colombia, curso de desarrollo
rápido de apps web con Python y Django
Disposición inicial
Empezaremos descargando el código que debe importarse hacia un proyecto nuevo.
Trabajaremos sobre un teléfono con Android y cámara para desarrollar el ejemplo de este
artículo. Para el deployment hacia el teléfono es necesario que el sistema operativo lo
reconozca y además 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
En la parte de diseño vamos a empezar con un
/res/layout/main.xmldebe
1
?
<application android:icon="@drawable/icon" android:label="@string/app_name" android:debuggable="true">
RelativeLayout,
el archivo
estar así:
?
<!--?xml version="1.0" encoding="utf-8"?-->
Diseño
Trabajaremos con otra disposición de elementos para el diseño llamado
RelativeLayout
y
agregaremos otros elementos de interfaz de usuario.
RelativeLayout: con este esquema los elementos se colocan en posición relativa a otros
elementos o hacia el padre.
RadioButton: es un botón de dos estados (marcado y des-marcado) a diferencia del
CheckButton 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 diseño tendrá un botón para adquirir la imagen un RadioGroup que contendrá a 3
botones y un ImageView. Los 3 botones serán seleccionar de donde proviene la imagen ya
sea de la cámara (como vista previa o como imagen completa) o de la galería.
http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/[22/07/2013 01:58:57 p.m.]
Curso Android: Trabajado con imágenes (cámara y galería)
El código completo del layout es el siguente:
1
2
3
?
<!--?xml version="1.0" encoding="utf-8"?-->
<button>
</button>
Hemos orientado el botón hacia la derecha y el RadioGroup hacia la izquierda. Luego el
ImageView abajo del RadioGroup.
El diseño 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 diseño en eclipse, además tiene ejecutables para
Windows, Linux y OS X.
Agregando código para funcionalidad
Definimos 3 constantes, con dos de ellas vamos a identificar la acción realizada (tomar una
fotografía o bien seleccionarla de la galería) y con la otra estableceremos un nombre para el
archivo donde escribiremos la fotografía de tamaño completo al tomarla.
1
2
3
?
private static int TAKE_PICTURE = 1;
private static int SELECT_PICTURE = 2;
private String name = "";
La forma más sencilla de tomar fotografías es utilizar un intent con
que pertenece al Media Store y luego sobrecargar el método
ACTION_IMAGE_CAPTURE,
onActivityResult
acción
para realizar
algo con el archivo recibido de la cámara.
Dentro del método
onCreate
asignaremos a la variable de instancia name y luego vamos a
trabajar sobre la acción al click del botón. Este nombre, inicializado con una llamada a
getExternalStorageDirectory()
guardará un archivo en la tarjeta SD del teléfono y el archivo se
llamará test.jpg cada vez que grabemos una fotografía de tamaño completo se sobre escribe.
1
2
3
4
5
6
7
8
9
?
name = Environment.getExternalStorageDirectory() + "/test.jpg";
Button btnAction = (Button)findViewById(R.id.btnPic);
btnAction.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
...
}
}
}
Primero obtenemos los botones de imagen completa y de galería para revisar su estatus más
adelante. Luego construimos un intent que es necesario si accesamos la cámara con la
acción
ACTION_IMAGE_CAPTURE,
si accesamos la galería con la acción
ACTION_PICK .
En el caso de la
vista previa (thumbnail) no se necesita más que el intent, el código e iniciar la Activity
correspondiente. Por eso inicializamos las variables intent y code con los valores necesarios
para el caso del thumbnail así de ser el botón seleccionado no validamos nada en un if.
http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/[22/07/2013 01:58:57 p.m.]
Curso Android: Trabajado con imágenes (cámara y galería)
1
2
3
?
RadioButton rbtnFull = (RadioButton)findViewById(R.id.radbtnFull);
RadioButton rbtnGallery = (RadioButton)findViewById(R.id.radbtnGall);
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
Asignamos el código a tomar fotografía, este código junto al intent se utilizarán adelante para
iniciar la Activity.
1
?
int code = TAKE_PICTURE;
Si el chequeado es el botón de vista previa no necesitamos agregar nada más. Si el
chequeado es el botón de imagen completa, además del intent y código agregamos un URI
para guardar allí el resultado. Si el chequeado es el de la galería necesitamos un intent y
código 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);
Además, es necesario sobrecargar la función
onActivityResult
para indicar que queremos
hacer con la imagen recibida (ya sea de la cámara o de la galería) una vez ha sido
seleccionada. Es necesario revisar si la imagen viene de la cámara
TAKE_PICTURE
o de la
galería SELECT_PICTURE.
1
2
3
4
5
6
7
@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == TAKE_PICTURE) {
…
} else if (requestCode == SELECT_PICTURE){
…
}
}
?
Si viene de la cámara, verificamos si es una vista previa o una foto completa:
1
2
3
4
5
if (data != null) {
…
} else {
…
}
?
En el caso de una vista previa, obtenemos el extra “data” del intent y lo mostramos en el
ImageView :
1
2
3
4
if (data.hasExtra("data")) {
ImageView iv = (ImageView)findViewById(R.id.imgView);
iv.setImageBitmap((Bitmap) data.getParcelableExtra("data"));
}
?
En el caso de una fotografía completa, a partir del nombre del archivo ya definido lo
buscamos y creamos el bitmap para el ImageView :
1
2
ImageView iv = (ImageView)findViewById(R.id.imgView);
iv.setImageBitmap(BitmapFactory.decodeFile(name));
?
Si quisiéramos incluir esa imagen en nuestra galería, utilizamos un
MediaScannerConnectionClient.
01
02
03
04
05
06
07
08
09
10
11
new MediaScannerConnectionClient() {
private MediaScannerConnection msc = null; {
msc = new MediaScannerConnection(getApplicationContext(), this); msc.connect();
}
public void onMediaScannerConnected() {
msc.scanFile(fileName, null);
}
public void onScanCompleted(String path, Uri uri) {
msc.disconnect();
}
};
?
Si viene de la galería recibimos el URI de la imagen y construimos un Bitmap a partir de un
stream de bytes:
1
Uri selectedImage = data.getData();
http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/[22/07/2013 01:58:57 p.m.]
?
Curso Android: Trabajado con imágenes (cámara y galería)
2
3
4
5
6
7
8
9
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 cámara la vista será de la siguiente forma:
Si estamos capturando de la galería será así:
Descarga:
Puedes descargar el código de la aplicación completa y funcional en: Trabajado con
http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/[22/07/2013 01:58:57 p.m.]
Curso Android: Trabajado con imágenes (cámara y galería)
imágenes (cámara y galería).
Conclusión
RelativeLayout, RadioButton y RadioGroup:
aprendimos cómo pueden acomodarse
componentes ubicándolos en el diseño con
posiciones relativas con respecto a otros
componentes y también los controles
necesarios para el manejo de radio buttons y su
agrupación.
Utilización de intents para utilizar la cámara y accesar la galería: se utilizaron intents
para realizar acciones específicas, la existencia de intents para acciones comunes
predefinidas nos facilitan muchas tareas, en este caso no fue necesario accesar
directamente el hardware de la cámara si no pudimos tomar una fotografía de una
manera más sencilla. Algo similar sucede con el acceso a la galería de fotos.
Utilización de la cámara de fotos: a través de un ejemplo sencillo, aprendimos como
utilizar parte del hardware del teléfono. A partir de aquí podemos trabajar los imagénes
guardadas y modificarlas o utilizarla para lo que nos interese.
Siguiente capítulo: Grabación y reproducción de vídeo →
El logotipo de Android es compartido por Google bajo licencia Creative Commons por Atribución.
Twittear
4
Me gusta Me gusta
Ya no me gusta Me gusta
A ti y a 11 personas más les gusta esto.A 11
personas les gusta esto. Regístrate para ver
qué les gusta a tus amigos.
Capitulos de la Guía Android
1. Todo lo que necesitas para empezar
2. Construir un lector de feeds simple
3. UI en Android y aumentar la funcionalidad de un lector de feeds
4. Trabajado con imágenes (cámara y galería)
5. Grabación y reproducción de vídeo
6. Geolocalización y utilización de mapas de Google
7. Trabajar con el acelerómetro
8. Reproducción de sonido en un ciclo infinito
9. Envío de emails utilizando Android
10. Trabajando con APIs (Facebook y Twitter)
11. Conectándonos con APIs de Google
12. Descarga el Curso Android y aprende a desarrollar aplicaciones móviles
+ Ver todos los contenidos
Adrian Catalán para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo
http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/[22/07/2013 01:58:57 p.m.]
Curso Android: Trabajado con imágenes (cámara y galería)
Síguenos en:
@maestros |
8
Fan page
Comentarios
Pedro
1
Muchas gracias por esta aportación, la verdad que es muy interesante
esta parte del tratamiento de imagenes y uso de camara.
29.05.2011 - 07:08
cristy
2
esta muy bien gracias por estos aportes que nos hacen son muy
buenos.
16.07.2011 - 16:06
patrulleroo
3
Buenas!! muchas gracias por los manuales son muy intuitivos y
perfectamente explicados. Mi comentario viene a una duda que me
surge y no se si me pasa sólo a mí o a todo el mundo, he realizado
toda la tarea tal como se explica, pero a mi no me crea la foto con el
nombre “test.jpg”, sino que pone el nombre que por defecto en mi
caso IMAG0039.jpg, antetodo decir que soy un novato en
programación android y no se si es una duda o directamente mi
ignorancia en el tema.
Saludos y muchas gracias de antemano
01.09.2011 - 05:42
Martin
4
Muchas gracias por el articulo, el ejemplo es simple y claro.
Me quedan 1 duda, luego de tomar al foto la aplicacion cambia su
orientacion y no puedo volver a la inicial.
Desde ya muchas gracias
10.09.2011 - 16:14
calabacita
5
Hola, lo primero agradecerte por tu artículo.
Quería comentarte que sólo me aparece la imagen en el ImageView
cuando la selecciono de la galería, si selecciono las otras dos
opciones no, a menos que vuelva a iniciar la cámara y vuelva a atrás.
¿La única diferencia entre las dos primeras opciones es que al tomar
la imagen completa se te guarda? Porque al tomar la foto me da
opción de guardarla igualmente.
Saludos y gracias de nuevo
07.10.2011 - 09:42
florencio
SAUDOS.
SI ME PODRIAS ENVIAR EL CODIGO FUENTE DE ESTOS
EJEMPLOS A MI CORREO.
TE LO AGRADECERIA.
SALUDOS Y GRACIAS
16.10.2011 - 13:00
http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/[22/07/2013 01:58:57 p.m.]
6
Curso Android: Trabajado con imágenes (cámara y galería)
7
Kapitan_Pirula
Hola, muchas gracias por tus ejemplos, no veas el bien que haceis
para los que estamos empezando.
A los que tienen dudas, seguno lo que he visto yo:
patrulleroo: a mi me pasaba lo mismo. Lo que he hecho, ha sido
cambiar la ruta donde guarda las imagenes. En vez de cogerla de la
variable de entorno, la pongo yo “/sdcard/DCIM/camara/test.jpg” y asi
aparece.
Martin: cuando cambias la orientacion de la pantalla, creo que la
activity se inicia otra vez, asi que las variables donde estan las
imagesnes desaparecen.
florencio: lee un poco….
26.10.2011 - 16:57
8
paulo
hola y felicitaciones por el tutorial, tengo una duda, si yo kiero tomar
una foto y kiero ke el tamanio de la foto sea de 125X125 px como se
podria hacer??? gracias por tu tiempo
01.11.2011 - 04:18
Los comentarios de este post están cerrados. Si quieres seguir la discusión,
debatir, criticar, sugerir o expandir el tema te invitamos a hacerlo en tu propio
blog, en twitter o donde puedas publicar. No olvides enlazar a este post para que
sigamos la conversación y se genere un trackback.
1
Trackbacks
Curso y algunos tips para programar en Android | Tux Files
← Burt Herman fundador de Storify
Es viernes: Cuando las metas ponen el
ritmo →
Acerca de
Maestros del Web nace cuando intentamos traducir Webmaster
al Español. Nacimos orientados al diseño y desarrollo web. Hoy
somos un espacio de apoyo para los entusiastas que participan
en proyectos en la red.
Nosotros
Preguntas Frecuentes | Créditos | Contacto | Feed RSS
Proyectos Foros del Web | 120 Segundos
Legal
CMS
Licencia CC del contenido | Política de privacidad
WordPress
Leer más de Maestros del Web
http://www.maestrosdelweb.com/editorial/curso-android-trabajando-con-imagenes/[22/07/2013 01:58:57 p.m.]