Este curso te permitirá construir tu primer aplicación móvil profesional. Serás capaz de crear y controlar la vida de tus Activities y aprovechar el espacio en pantalla de los diferentes dispositivos Android implementando Fragments en tus aplicaciones. Dale persistencia a tu información utilizando todas las formas de almacenamiento que hay en Android desde un único archivo hasta una Base de Datos. Podrás evaluar lo aprendido por medio de ejercicios prácticos que te permitirán ir desarrollando tu aplicación.
Snackbar
Loading...
来自 墨西哥国立自治大学 的课程
Desarrollo de aplicaciones con Android
191 评分
从本节课中
Activities
Aquí descubrirás por completo el concepto de Activity. No es sólo una pantalla más de nuestra aplicación, también aprenderemos a controlarla desde su ciclo de vida, podremos producir todos los eventos posibles con los botones de acción back y home.
与讲师见面
Anahi SalgadoAnahi Salgado. Android Certified Application Developer, programadora, capacitadora y conferencista.
Universidad Nacional Autónoma de México
Okey, a nuestro botón FloatingActionButton le he colocado un mensaje
que dice favorito, un mensaje que cuando lo pulsas aparece así.
Estos mensajes se llaman Toast o Toast, así también son conocidos.
Aquí también lo podemos ver en nuestro emulador aquí dice favorito,
favorito porque es un ícono de una estrellita.
Y aquí esta el código, este es el código que he utilizado para definir un mensaje
de tipo Toast, básicamente seleccionamos la clase, definimos la clase.
Utilizamos un método makeTest, posteriormente colocamos el contexto
y el siguiente parámetro que nos recibe es el mensaje,
el mensaje a mostrar o el mensaje que he definido está en mi archivo string
y si vamos para el string aquí esta una variable que se llama mensaje que contiene
el texto, favorito, carita feliz y acá en mi,
lo estoy obteniendo a partir de la instrucción getResources.getString,
de esta forma es como obtenemos recursos desde código Java.
Okey, getResources.getString y gracias a nuestro
archivo R.string obtenemos el mensaje.
El siguiente parámetro es nuestro, la duración del mensaje.
Aquí estamos definiendo una duración del mensaje de tipo short,
una duración corta que, simplemente aparece y desaparece.
Esos tipos de mensaje es que son muy útiles,
son muy comunes, cuando manejamos notificaciones.
Notificaciones cuando queremos notificarle al usuario que algo sucedió exitosamente.
Y entonces finalmente you que hemos hecho todo esto,
colocamos el método show, sin este método
no se muestra el mensaje aunque lo hayamos configurado a la perfección.
Sin show, no vamos a mostrar el mensaje.
Pero te tengo una mala noticia, estos mensajes llamados Toast you no
están disponibles o you no entran dentro del material
design sino que ahora ha llegado un nuevo elemento,
un nuevo widget, que ha venido a reemplazar estos mensajes Toast.
Este widget se llama Snackbar, Snackbar.
Entonces simplemente voy a comentar esta línea de código que tenemos
en Toast makeTest y bueno cabe mencionar que me encuentro
dentro del método que definimos en el video anterior.
Agregar FAB y estoy dentro de mi método onClick y ahí es donde
cuando alguien de clic a este botón pues debe aparecer nuestro mensaje.
En este caso aparecerá un mensaje, elemento Snackbar
que esos aparecen en la parte inferior de nuestro teléfono, en la parte inferior
y aparecen también a modo de notificación, simplemente entran de abajo hacia arriba
o simplemente aparecen y están en esta zona de nuestro teléfono.
Este Snackbar viene a reemplazar los mensajes Toast y
para hacer esto, vamos a hacer uno sencillo.
Previamente yo debo tener you integrada en Gradle, mi librería
de soporte Android.support.design que lo vimos en el video anterior.
Si te saltaste el video anterior, por favor revísalo
para que puedas utilizar la clase Snackbar.
Entonces voy a colocar Snackbar y es muy similar
su utilidad como el anterior, los Toast.
Vamos a hacer aquí, .make y lo primero que nos está pidiendo es un view,
okey, un view que voy a poder estar recolectando en mi método onClick,
este que está aquí, este objeto v, puedo colocarlo aquí, v, lo
siguiente que debemos mostrar aquí es el texto que se va a mostrar en el Snackbar.
Puedo obtener el texto como lo hice en el ejemplo anterior, getResources.
getString y voy a poner R.id.mensaje.
Perdón es R.string porque es un string,
un recurso de tipo string al que voy a accesar .mensaje
y finalmente colocamos la duración de nuestro Snackbar.
Para esto pues, como observas es similar a lo que tenemos
acá en el Toast pero lo haré a través de la clase Snackbar.
Y lo vamos a decir que también sea un length short,
length short, y también aquí al final, debe llevar su método show.
¿Okey? Esto
es todo para hacer un Snackbar sencillo,
muy simple y entonces pues vamos a guardar nuestro archivo y vamos a correr esto.
¿Okey?
Vamos a correr esto, vamos a decirlo que lo corra primeramente en nuestro teléfono
y posteriormente le diremos que lo corra en nuestro emulador, nuestro emulador,
okey.
Entonces, vamos a esperar un poco que luego compile esto nuevamente [AUDIO
EN BLANCO] you ha terminado, you
simplemente se está preparando para lanzar okey, ha lanzado you la aplicación, vamos
a darle clic y aquí aparece ahora nuestro mensaje, está en esta parte de aquí.
Simplemente entra de abajo hacia arriba aquí se muestra.
Listo, Snackbar son los que han venido a reemplazar a los Toast.
Vamos a correrlo nuevamente para verlo en nuestro emulador.
[RUIDO] Vamos a verlo
en nuestro emulador, you ha terminado.
Esta preparándose para instalarlo y correrlo en mi emulador.
Aquí está, you está lanzando ahí Aquí está,
aquí aparece nuestro mensaje, favorito.
¿Okey?
Este Snackbar lo puedo personalizar mucho más, puedo añadirle más cosas
y puedo añadirle por ejemplo pues que tenga a lo mejor una acción.
Puedo decirle que cuando aparezca aquí favorito, tenga de este lado un botón o un
texto que funcione como un botón que sea una acción, okey, que sea algo a realizar.
Entonces vamos primeramente a nuestro archivo strings a definir el texto
que va a estar aquí y voy a poner acá strings.
Vamos a poner texto de acción,
perfecto y voy a poner acción tal cual, acción así listo.
Voy a regresar a mi mainActivity.java
donde estoy trabajando y tengo aquí mi Snackbar donde está el
.show voy a darle un enter para que esta línea de código no se me haga tan larga,
tan larga, y entonces voy a darle un enter y nuevamente voy a darle un enter.
¿Okey?
Entonces lo primero que voy a colocar es la instrucción setAction.
SetAction y lo primero que recibe es el nombre o el texto que
va a aparecer como el texto indicador de la acción.
En este caso el texto pues lo tenemos, en nuestro archivo string,
getString R.string, se llama texto accion, texto accion.
Y este va a recibir un listener también un listener que va a estar pues atento,
que va a estar escuchando cuando le demos clic a ese texto que dice acción, ¿okey?
Entonces, podemos colocar Podemos colocar
por aquí nuestro objeto
new View, new,
y recibe un onClickListener,
vamos a ponerle view.on,
onClick y no nos está sugiriendo.
Vamos a ver qué esta pasando, new View.
Me parece que you.
[RUIDO] [AUDIO
EN BLANCO] [AUDIO
EN BLANCO] [AUDIO
EN BLANCO] Creo que no
puedo tener un clic dentro de otro.
[RUIDO]
[RUIDO]
[AUDIO EN BLANCO]
[AUDIO EN BLANCO]
[AUDIO EN BLANCO]
[AUDIO EN BLANCO]
[AUDIO EN BLANCO]
[AUDIO EN BLANCO]
[INAUDIBLE]
[INAUDIBLE]
[INAUDIBLE]
you.
Sí. Continuamos.
Bien, el siguiente elemento que nos va a recibir es
un OnClickListener, okey, entonces ahí lo tenemos, lo tenemos ahí.
Simplemente todo esto me lo sugiere el id,
entonces pues lo vamos a quitar y vamos a ver detenidamente qué pasa.
Le doy new y automáticamente me sugiere la interfaz a OnClickListener, entonces puedo
traérmela y todo el código se completa por sí solo.
Perfecto. Aquí adentro pues yo puedo decir qué pasa,
qué suceda cuando esté, cuando alguien le de clic a mi elemento, okey.
Entonces vamos a ver aquí los paréntesis, que todo coincida perfectamente,
que nada sobre, uno de estos nos está sobrando, este está sobrando, ahí está.
Perfecto. Entonces yo puedo decir que cuando alguien
le de clic, bueno en este caso que utilice el log y que nos muestre un mensaje, ¿no?
Yo lo puedo poner snackbar,
y le puedo decir click en Snackbar,
click en Snackbar y finalmente .show.
Okey.
Vamos a poner aquí punto y coma y vamos a correr esto,
vamos a correrlo en nuestro emulador para verlo en acción.
Le he cambiado además la duración del mensaje, lo hemos puesto en long,
lo hemos puesto en long, para que el mensaje pues dure más.
¿Okey?
Listo, aquí lo tenemos, está corriendo.
Y aquí en nuestro emulador
todavía no termina el Gradle, y you está
lanzando la aplicación, y podemos darle clic y you se ve que nuestra acción
cuando le damos clic, esto de el log lo vamos a ver reflejado aquí en nuestro iii.
Okey, nuestro iii vimos reflejado, vamos a nuevamente
a darle clic para que se vea y aquí está, dice click en Snackbar, okey.
Este es un mensaje de información y dimos click en Snackbar.
Vamos a lanzarlo ahora en nuestro teléfono,
vamos a quitar esto, y de esta forma es cómo podemos estar añadiendo acciones.
Okey.
Vemos y damos clic, y vemos aquí you el botón opción, y de este lado,
de este lado en, podemos ver que se registra el evento click en el Snackbar,
se registra nuestro mensaje que hemos enviado.
Okey, podemos personalizar esto de una forma que
no sé, si quisiéramos cambiar el color del Snackbar, pues simplemente lo
podemos hacer
con la instrucción después de setAction o antes de setAction cómo gustes,
setActionTextColor podemos decir de qué color queremos que se vea por acá.
En este momento está tomando el color de accent, pero si te gustaría tomar otro,
podemos definir aquí que
getResources.getColor y vamos a darle R.color.
a lo mejor le decimos que queremos el color primario,
un color primario que habíamos definido.
GetColor ahora vamos a correrlo, [AUDIO
EN BLANCO] Lo estamos corriendo primeramente en nuestro emulador,
vamos a esperar, voy a salir de lo que teníamos antes y ahora vamos a ver si
cambia el color de nuestro texto, por default está tomando el color de
acentuación, queremos que ahora tome otro color.
Y bueno,
aquí you está tomando el color azul, que fue nuestro color primario que definimos.
Vamos a correrlo en nuestro teléfono, aquí está el color azul,
se está registrando el evento.
Entonces puedes personalizar con material design tanto tu aplicación como
la identidad de tu empresa como la identidad de tu marca.
Aquí también you se ve que tenemos otro color,
que podemos estar registrando cosas.
Bien, entonces otra cosa que podemos hacer en el Snackbar es que cuando está activo,
pues podemos, podríamos eliminarlo de esta forma pero como observas, no es posible,
okey, no es posible esto porque nos falta colocar un elemento.
Entonces vamos a colocar un elemento adicional para que podamos aquí nosotros
simplemente dando un swipe, quitar el Snackbar.
Y entonces esto no está funcionando de esa forma porque
el Snackbar tiene que estar corriendo sobre un elemento,
un layout que se llama layout coordinador o coordinator layout.
Entonces, simplemente vamos a ir a nuestro archivo activity main,
ahí nuestro activity main.xml y vamos a definir un archivo
una etiqueta coordinator layout, okey, una etiqueta coordinator layout.
Esta también está en la librería de diseño, okey,
entonces vamos a escribir antes de relative layout,
android.support.design.widget y coordinator layout.
Aquí está, voy a cerrar las etiquetas, ahí, okey.
Entonces tengo la etiqueta abierta y la etiqueta cerrada.
Acá abajo está mi relative layout.
Lo que voy a hacer a continuación pon mucha atención,
para que no te llegue, no vayas a tener problemas más adelante.
Simplemente todos los atributos que tiene new RelativeLayout,
todos los vamos a cortar, okey, los vamos a cortar así,
cortar, y se lo vamos a asignar al coordinator layout.
Okey, bien, you está el coordinator layout.
Y ahora nuestro relativeLayout,
todo lo que teníamos dentro de nuestro relativeLayout lo vamos a quitar,
lo vamos a cortar y lo vamos a meter en el coordinator layout.
Así.
Perfecto.
Como observas, pues en relativeLayout nos está apareciendo aquí,
el mensajito es porque simplemente necesita sus atributos obligatorios.
Okey, vamos a ponerle match parent, en width y en height,
match parent y match parent.
Okey.
Listo. Perfecto.
En un coordinator layout, es un nuevo elemento de material design,
también una nueva etiqueta, vamos a poder hacer este efecto,
que cuando nosotros hagamos swipe la notificación se elimine o se quite.
Okey.
Entonces, y esto va a suceder automáticamente.
Bien, pues vamos a correrlo para probarlo.
Vamos a correrlo en nuestro teléfono.
you ha terminado. Okey, y
you puedo quitar la notificación
simplemente dando swipe en ella de esta forma.
Vamos a hacerlo de nuevo,
ahí está.
Perfecto. De esta forma es cómo podemos
estar manejando nuestro Snackbar y podemos personalizarlo tanto como querramos.
