Crea una aplicación de chat en Android con Java y Firebase

1. Introducción a la clase: Hola a todos. Gracias por mostrar interés en mi clase. En esta clase vamos a aprender cómo se construyen aplicaciones como aplicaciones de chat en general. Antes de continuar, debo señalar que estas clase II diseñadas para las personas que ya están familiarizadas con el desarrollo de aplicaciones para Android en Android Studio. Entorno de desarrollo integrado, o lenguaje de programación Java, al menos. Y si no te resulta familiar, posible que encuentres algunas partes difíciles de entender al principio. Ahora veamos una vista previa rápida de la app que vamos a construir y cosas que vamos a aprender. Aquí tenemos dos emuladores. En el derecho, ya estamos conectados y podemos ver una lista de todos los usuarios. Y en la izquierda, se puede ver que aquí no tenemos nombre de usuario porque no lo necesitamos. Estaremos iniciando sesión con correo electrónico y contraseña. Entonces vamos a crear un nuevo usuario. Vamos a llamarlo John. Pondremos algún correo electrónico aleatorio y pondremos algún tipo de contraseña aquí. Cuando hacemos click en inscribirte. Una vez que el registro sea completo y exitoso, se nos presentará con la pantalla. Y la pantalla en realidad es pantalla donde se mostrarán todos los usuarios de nuestra app. Entonces aquí está John, y al lado derecho, aún no lo tenemos. Pero si hacemos algo así, tendremos también a John. Entonces veremos cómo implementar esta cosa aquí mismo. Ahora, si hacemos clic en este ícono aquí, podemos ver la actividad del perfil donde podemos aplaudir imagen de perfil. Por lo que usaremos uno de la galería. Y cuando hacemos click en subir foto, podemos ver estos avances. Y luego imagen subida mensaje. Si ahora volvemos atrás, se puede ver que estas imágenes aún no están actualizadas. Podemos fácilmente modificar eso también, pero veremos cómo hacerlo con refrescante, con la implementación de la función de deslizamiento o actualización. Entonces ahora aquí si lo hacemos una vez más, también veremos esta imagen. Ahora se iniciará la conversación con este usuario. Entonces aquí abriremos a John porque a la izquierda o dispositivo estamos registrados como John. Ahora, enviaré algún tipo de mensaje desde aquí. Y se puede ver que estamos recibiendo un mensaje ahí mismo. Por lo que ahora enviaré algunos smileys. Y está funcionando muy bien. Por lo que se puede ver que una vez que enviamos el mensaje, se registra automáticamente aquí. Entonces ahora, si volvemos y si volvemos a abrir este chat, se puede ver que los mensajes siguen ahí. Después de completar esta clase, aprenderás habilidades que son muy populares y las ampliamente utilizadas cuando se trata del desarrollo de aplicaciones móviles. Por lo que no sólo aprenderás a construir aplicación de chat, sino que también aprenderás tecnologías que puedes aplicar en tus otros proyectos. Entonces, por ejemplo, aprenderemos a usar Firebase como base de datos en línea. Ya veremos por qué lo usamos. Aprenderemos una vista de reciclador, vistas rayadas y muchas otras cosas. Entonces eso es todo. Empecemos y te estoy viendo en el siguiente video. 2. Diseña la pantalla de la Signación /Login: Hey todos, ahora es el momento de empezar a crear nuestra aplicación de chat. Entonces vamos a crear en primer lugar nuevo proyecto Android Studio. Escojamos actividad vacía. Y por el nombre de la app. Vamos a poner chat arriba. Puedes cambiar el nombre del paquete como quieras y dar click en terminar. Edificio ya está terminado y estamos listos para proceder. Entonces, en primer lugar, vamos a cambiar los colores que estaremos usando en nuestra app. Entonces vamos a abrir carpeta de valores y abrir colores. Entonces cambiemos el color primario al 33 a2 OFF. Ahora cambiemos la oscuridad primaria al 3.3.1 uno FF. Cambia este por el f, f, a, f, f. Y vamos a añadir un color más, que se llamará color secundario. Y el color será F cuatro, 33 a F, F. Así que tenemos aquí algún tipo de transparencia. Por lo que ahora cuando hayamos cambiado de color, comenzaremos a crear nuestra actividad principal donde un usuario pueda iniciar sesión e iniciar sesión. Por cierto, puedes usar los colores que te gusten. Puedes hacer sin embargo creas que eso es lo mejor. Entonces vamos a abrir la actividad principal y dar click en Split. Eliminaremos este TextView. Pondrá texto de edición con matriz de coincidencia como el ancho para la altura. Usaremos el contenido de envoltura. Cerremos esta etiqueta. Este será utilizado para el nombre de usuario. Por lo que vamos a poner pista para ser nombre de usuario. Ahora vamos a añadir ID, que será ADT nombre de usuario. Y lo trasladaremos a algún lugar de aquí. Ahora vamos a dar click en esto fue a la restricción, este texto de edición. Ahora vamos a añadir un EditText más, que también será el contenido parent y wrap correspondiente. Pero éste será para el correo electrónico. Entonces pongamos ID, correo electrónico ADT. Vamos a constreñir así a éste. Por lo que será por debajo de nombre de usuario editar texto. Ahora vamos a añadir el último texto de edición para la contraseña. Por lo que aquí vamos a poner pista contraseña. Id será contraseña EDTA. Además, queremos cambiar el tipo de entrada para que sea contraseña de texto para que tengamos nuestra contraseña oculta cuando el usuario escriba. Por lo que queremos tener esos puntos cuando el usuario inicia, empieza a escribir su contraseña. Ahora podemos mover esto un poco como aquí. También podemos poner manualmente aquí algunos valores, pero me quedaré con esos. Ahora vamos a agregar un botón donde el usuario presentará este formulario. Este botón será Wrap Content. Id será btn presentar. dará de alta el texto inicial. Y lo vamos a constreñir aquí. Pero estará centrada. Y vamos a sumar algún margen aquí. Será margen superior y será de diez dB. Debajo de este botón. Queremos este texto el cual dirá ya tiene login de cuenta. Por lo que será vista de texto. Contenido de Envoltura. Id será dx t info de inicio de sesión. Y el texto inicial será I. Ya tener un inicio de sesión de cuenta. Y moveremos este por debajo de estos botones. Por lo que podemos constreñirlo así también. Para que se centre de acuerdo a estos botones. Entonces si movemos este botón despierto aquí , estará relacionado con estos Botón. Ahora cambiaremos este margen superior al 24, y agregaremos margen a este TextView a diez d p. Ahora necesitamos cambiar el fondo aquí así como la forma de nuestro botón. Entonces vamos a crear un archivo dentro de carpeta dibujable. Vamos a llamarlo gradiente. Aquí en lugar de selector, queremos tener forma. Y ahora declararemos gradiente, que tendrá color inicial. Acento, y el color final será. Color secundario como este. Ahora vamos a aplicar estos gradientes a nuestro diseño raíz, que es el diseño de restricciones. Ahora pongámoslo para el atributo de fondo así. Y ahora necesitamos cambiar el color del texto al blanco y el blanco droide. Y necesitamos cambiar la forma de estos botones. Por lo que crearemos un archivo más dentro de esta carpeta dibujable. Lo llamaremos forma redonda azul. Entonces aquí vamos a cambiar esto a la forma. Se coloreará en color secundario, y las esquinas tendrán un radio de 90 db. Simplemente aplicaremos esto al atributo de fondo del botón. Y tenemos nuestro botón. Por lo que ahora también cambiemos el color del texto a blanco aquí. Y creo que tenemos nuestra pantalla principal diseñada. Entonces ejecutemos la app para ver cómo se ve. Ahora, se puede ver que este ángulo del color está un poco equivocado. Por lo que tenemos este color rosa a la izquierda y azul a la derecha. Entonces es por problema de renderización en Android Studio, estamos obteniendo imagen falsa. Por lo que cambiaremos el ángulo de este color al 270 para lograr estos color de gradiente exacto. Por lo que aquí puedes probar cosas diferentes. Entonces, por ejemplo, si ponemos 19, tendremos al fondo. Si ponemos 135, tendremos desde la esquina inferior derecha. Entonces básicamente podemos establecer ángulos a los números los cuales se pueden dividir por 45. Entonces si pones 5454, por ejemplo, ves que no tenemos nada. Por lo que puedes probar con 4726 y similares. Usaremos 270. Ahora volveremos a ejecutar la app para ver si ahora tenemos el color correcto. Entonces ahora está funcionando muy bien. Ahora vayamos en actividad principal a declarar esos puntos de vista. Entonces, vamos a declarar editar textos. Tendremos nombre de usuario de EDTA, contraseña, y correo electrónico de ADT. Tendremos. Botón. Y tenemos una vista de texto, que se trata de la información de registro. Ahora los inicializaremos. Él aquí dentro. Ahora inicializaremos botón. Y finalmente TextView, así. Por lo que ahora queremos diferenciar de alguna manera si el usuario va a registrarse o a iniciar sesión. Por lo que tendremos variable la cual será de tipo booleano. Y se llamará facilidad registrándose. Por lo que por defecto, será igual a lo verdadero porque al ir a abrir nuestra app, queremos presentar la página de registro al principio. Y cuando el usuario hace clic en la vista de texto aquí, queremos cambiar esta pantalla a la de inicio de sesión, por lo que queremos actualizar texto dentro de botón. Queremos actualizar estos textos aquí. Y queremos ocultar campo de nombre de usuario. Entonces, ¿cómo hacer eso? Pondremos onClickListener a la vista de texto aquí en primer lugar, así que hagámoslo así. Y cuando hacemos click si la pantalla era para registrarte, queremos ahora cambiarla a la pantalla de inicio de sesión y pondremos esta variable en false. Y si estuviéramos en la página de inicio de sesión, ahora queremos cambiarla a la página de registro, y esta variable será ahora cierta. Ahora también necesitamos actualizar el texto. Ahora, botón necesita tener texto el cual será login. Y aquí dentro queremos decir inscribirte. También queremos cambiar texto. Aquí dentro. El texto será no tener un registro de cuenta. Y aquí dentro, queremos poner el texto al ya tener una cuenta. Iniciar sesión. También actualizará este texto aquí. Al igual que esto. Y también lo que queremos lograr es ocultar este texto de edición. Por lo que vamos a entrar aquí establecer la visibilidad de estos nombre de usuario EDTA a ido. Y aquí dentro queremos ser visibles. Ahora ejecutemos la app y veamos si funciona. Si le damos click en este texto, ahora tenemos esta pantalla la cual nos dirá iniciar sesión. Y si no tenemos cuenta y queremos inscribirnos, podemos dar click aquí y se nos presentará este campo. Entonces ahora si te preguntas ¿por qué tenemos esta variable? Variable se utiliza para determinar cuándo hacemos clic en el botón Registrarse, si queremos iniciar sesión en proceso o registrarnos. Por lo que verás eso cuando empecemos a implementar lógica para la autenticación de usuarios. Entonces eso es para este video. Y en la siguiente conectaremos esta app a la Firebase y registraremos a nuestros primeros usuarios. Entonces nos vemos en el siguiente video. 3. Autenticación de usuario: Hey todos, en esta conferencia integraremos Firebase con nuestro proyecto. Así que la forma más fácil de implementar Firebase en nuestro proyecto es hacer clic en Herramientas, Firebase, y hacer clic en autenticación, correo electrónico y autenticación de contraseña. Y luego conectemos a Firebase. Ahora tal vez no veas este tipo de pantalla si no estás ya conectado, en Android Studio. Pero como estoy conectado con esta cuenta, me presentan la pantalla. Y ya conoce algunos de mis proyectos que están en Firebase que están asociados a esta cuenta. Entonces si no ves algo como esto, creo que se te pedirá con firmar en forma. Y le sugiero que se identifique. Por lo que será mucho más fácil integrar Firebase de esa manera. Entonces aquí ves que ya me han sugerido con el nombre del proyecto, que es el mismo del proyecto en Android Studio. Por lo que ahora voy a dar click en conectarme a Firebase. Conectarse está ahora en curso. Ahora abriré mi navegador de internet. Abrir Firebase. Ahora abriré mi consola Firebase, pero con la cuenta que está asociada a Android Studio. Y ahora voy a dar click en ir a la consola. Mei. Se puede ver que tengo app de chat, que se acaba de crear. Aquí dentro. Dice que se crea el proyecto Firebase y ahora estamos conectados. Por lo que aquí ahora es el momento de integrar la autenticación a nuestra app. Así que pinchemos aquí y aceptemos cambios. Ahora inyectará las dependencias en nuestros scripts de Gradle en el archivo Gradle de acumulación para ser más exactos. Pero debido a que las versiones más nuevas de la autenticación Firebase de Android están disponibles, cambiaremos a la más reciente y pincharemos en sincronización. Ahora. Ahora podemos cerrar este asistente y abrir actividad principal. Por lo que para poder autenticar usuarios, primero debemos habilitar la autenticación en nuestro proyecto. Por lo que abriremos proyecto en la consola. Y vamos a ir a la autenticación y vamos a configurar el método de firma. Habilitaremos la contraseña de correo electrónico. Y ahora podemos crear usuarios. Dado que esta actividad se utilizará tanto para registrarse como para iniciar sesión, crearemos dos métodos aquí. uno se le llamará inicio de sesión de manejo, y al segundo se le llamará manija. Date de alta. Handle login se llamará al hacer click en el botón. Y no estamos inscribiéndonos. Entonces aquí y aquí dentro, nos encarguaremos de la inscripción porque significa que actualmente estamos, digamos, en modo de registro. Ahora, implementemos este método. Por lo que llamaremos autenticación Firebase. Punto instancia punto crear usuario con correo electrónico y contraseña. Se tomará correo electrónico de este texto de edición y contraseña. De éste. También añadiremos onCompleto oyente. Y aquí comprobaremos si la tarea fue exitosa. Crearemos dosificado, lo que dirá inscrito con éxito. De lo contrario, diremos el Ask dot get exception que obtiene mensaje localizado. Entonces nos dirá qué salió mal. Y eso es todo para el método de registro. Y en el método de inicio de sesión de mango. Queríamos decir algo similar, pero ahora en lugar de crear usuario con correo electrónico y contraseña, queremos usar el inicio de sesión con correo electrónico y contraseña. Usaremos los mismos textos de edición para este y el mismo oyente OnComplete. Y si salió mal, queremos recibir el mensaje. Entonces eso es todo. Ahora, queremos asegurarnos de que el usuario tenga la entrada correcta. Entonces si el usuario, por ejemplo, deja vacíos algunos de los campos, no queremos manejar el registro o el inicio de sesión. En primer lugar aquí comprobará si el correo electrónico. Está vacía o la contraseña está vacía. Y aquí, si estamos en modo de inscripción, necesitamos comprobar también el nombre de usuario. Por lo que no queremos dejar que el usuario se registren sin poner nombre de usuario. Entonces aquí debemos comprobar si estamos en modo de registro y el nombre de usuario de EdD está vacío. Pondremos los que dirán entrada inválida. Y escucharemos el regreso. Por lo que el código a continuación no se ejecutará. Ahora vamos a explicar esto con más detalles. Entonces si estamos en actividad de inicio de sesión, por ejemplo, en modo de inicio de sesión, realidad esta es la misma actividad. No tenemos campo de nombre de usuario, y estará vacío por defecto. Entonces, por eso necesitamos separar de aquí la declaración del CIF. Por lo que no pudimos decir o el nombre de usuario EDTA está vacío porque el nombre de usuario debe estar vacío si estamos mirando. Entonces por eso escuchamos específicamente comprobar si el estamos en modo de registro, sólo entonces comprobar si el nombre de usuario está vacío. Entonces, ejecutemos la app y veamos cómo se comporta. Entonces aquí dice que el archivo Google services.js o falta. Para obtener este archivo, necesitamos abrir Chrome. Necesitas abrir también nuestro proyecto y dar click en esta configuración del proyecto aquí. Y ese archivo se puede descargar desde aquí. Y lo haremos. Ahora copiaremos este archivo. Ya lo he copiado, y lo voy a pegar en esta carpeta de aplicaciones. Entonces, en primer lugar, elijamos proyecto para que quede más claro. Abre esta carpeta de aplicaciones y pegarla aquí. Por lo tanto, asegúrate de que se le llame así. Entonces por qué necesitamos este archivo es porque contiene clave, contiene básicamente información sobre Project y sobre Firebase para que nuestro proyecto pueda comunicarse con éxito con la Firebase. Ahora intentemos ejecutar de nuevo la aplicación. También se asegura de agregar permiso de internet dentro del archivo manifiesto. Porque a veces no va a funcionar. Si no tenemos permiso de Internet ya que nuestra aplicación está usando Internet para hacer operaciones con la Firebase. Por lo que ahora necesito ejecutar esta aplicación una vez más para que se apliquen estos permisos de internet. Ya lo ejecutaré. Si ahora empezamos a escribir algo aquí y hacemos clic en registrarse, obtendremos mensaje de entrada inválido. Si creamos algún usuario como este, y si hacemos clic en registrarse, tenemos un mensaje que dice que el usuario está inscrito con éxito. Y vamos a refrescar esta consola aquí. Y tenemos a nuestro usuario autenticarse con éxito. Entonces ahora vamos a comprobar si funciona el Login. Por lo que ahora vamos a dar click en iniciar sesión. Si ahora damos click en Iniciar sesión, dice que estamos logueados con éxito. Entonces eso es lindo. Entonces eso es para esta conferencia. 4. Diseño de actividad de perfil: En esta conferencia, aprenderemos a subir foto de perfil a la Firebase y asociada con el usuario. Pero en primer lugar, vamos a crear la actividad Friends, que será actividad donde todos los usuarios se mostrarán aquí. Por lo que en primer lugar crearemos estas actividades porque queremos ir a la actividad del perfil donde queremos aplaudir foto de la actividad del amigo, amigo. Además en primer lugar, crear esa actividad. Necesitan actividad de amigos. Y dar click en terminar. Ahora vamos a dar click en esto. Estoy dando click en Mostrar interfaz de usuario del sistema. Y básicamente lo que queremos tener aquí, algún tipo de ícono donde podamos tocar e ir al perfil. Entonces para hacer eso, necesitamos crear menú. Para crear un menú, vamos a hacer clic derecho en la carpeta de descanso. Y ahora vamos a ir a nuevo y directorio de recursos de Android. Cambie esto al menú y haga clic en Aceptar. Ahora aquí, vamos a crear un nuevo archivo de recursos de menú. Y pongámosle el nombre. Perfil de menú divide. Y aquí dentro queremos agregar ítem, el cual tendrá ID de perfil de ítem de menú. Se curará ícono, que se creará en este momento. Entonces sigamos dibujable y creemos un activo vectorial. Empecemos a buscar la cuenta. Así que elegí este. Por lo que podemos dejarlo tal como está. Simplemente cambia el nombre a la imagen de la cuenta, y agrégalo aquí. Y queremos demostrarlo como acción siempre. Entonces ahora estamos aquí teniendo advertencia, que es que deberíamos tener un título, pero no queremos ningún título ya que siempre se pondrá aquí. Ahora vamos en la actividad de amigo e inflemos ese menú. Por lo que vamos a llamar a crear menú de opciones en realidad, vamos a anular ese método, que será llamado por el sistema automáticamente. Obtendremos inflador de menú y vamos a inflar menú que acabamos de crear. Y aquí queremos ponerlo dentro de estos menú, que es parámetro aquí. Y volveremos verdaderos. Por lo que queríamos ir a diferentes actividades una vez que hayamos iniciado sesión con éxito. Y abriremos la actividad principal para eso. Y cuando manejemos el login, si se completa con éxito, iniciaremos la actividad desde Actividad Principal hasta la actividad del amigo. También haremos lo mismo cuando nosotros, cuando estemos registrados con éxito. Por lo que no queremos que el usuario esté en la pantalla. Cuando nos inscribimos, queremos traducirlo a la actividad del amigo de inmediato. Ahora ejecutemos la app y veamos qué está pasando. Entonces cambiemos al inicio de sesión. Pongamos credenciales y haga clic en iniciar sesión. Por lo que ahora estamos en la actividad del amigo y tenemos nuestro artículo aquí. Entonces como estamos en actividad principal, hagamos una cosa más. Y será cuando se cree esta actividad. Aquí queremos comprobar si el usuario ya está conectado. Y si lo es, queremos enviarlo. Queremos enviarlo a la actividad del amigo. Entonces para comprobar si el usuario ya está conectado, todo lo que necesitamos hacer es comprobar si el usuario actual no es igual a nulo. Entonces así funciona. Y luego aquí queremos terminar la actividad principal. Entonces ahora si ejecutas app, nuevo, se nos presentará esta actividad de inmediato. Al igual que así. Por lo que ahora pongamos en click oyente a este elemento del menú. Y lo haremos anulando en opciones elemento de menú seleccionado. Y aquí queremos comprobar si el ítem que hemos seleccionado es perfil de ítem de menú. Y si es el caso, entonces iniciaremos nueva actividad, que será desde la actividad Amigos hasta la actividad de perfil. Pero necesitamos crear actividad de perfil ahora ya que no existe. Entonces vamos a hacer eso. Denle perfil, y haga clic en terminar. Entonces ahora si vas aquí, el error se ha ido. Ahora ejecutemos la app para probar si funciona. De acuerdo, ahora, si hacemos click en este ítem de aquí, ahora estamos en la actividad de perfil. Así que ahora diseñemos la actividad de perfil. Aquí queremos tener eso a su alrededor imagen. Queremos tener dos botones para aplaudir y cerrar sesión. Y queremos tener textos aquí los cuales serán utilizados para presentar información sobre el usuario actual, como correo electrónico. Por lo que necesitamos descargar tarjetas usted. En primer lugar, ahora podemos volver al diseño. Te pondremos tarjetas, que serán de 180 DP de ancho y 180 dB de altura. Tendrá Radio de esquina de 90. Y ahora cerraremos etiqueta así para que podamos poner vista de imagen aquí. Será match_parent id de la imagen será imagen de perfil. Y lo podemos constreñir así. Necesitamos algún tipo de soporte de lugar aquí. Y para ello podemos utilizar imagen que hemos creado para el menú Perfil. Por lo que aquí usaremos esa imagen de cuenta como la imagen fuente de esta vista de imagen. Y queremos que el tipo de escala sea centrado en el cultivo. Ahora abramos esta imagen y cambiemos realmente el color al acento de color. Y quitemos este tinte para que podamos, para que tengamos al erudito como aquí. Ahora vamos a agregar botón, que será Wrap Content. Id será btn. Subir imagen. El trasfondo será éste. El texto será subir foto y el color del texto será blanco. Entonces lo pondremos aquí. Al igual que esto. Agregaremos ropa de cama a estos Botón. Ahora añadiremos un botón más para el login o lo siento, para el propósito login OUT. fondo será el mismo, y ID será btn logout. Vamos a mover este aquí. Entonces ahora agreguemos algunos márgenes. Vamos a sumar aquí. También vamos a sumar algún margen aquí. Y podemos mover esta carta hacia arriba cambiando el sesgo vertical a la 0.4. Entonces si pones 0.5. lo tendrás centrado. Si pones uno, será al fondo. Y si pones 0, será en la parte superior. Para que podamos usar algo como esto. Entonces ahora agreguemos TextView. El color será negro. Id será dxdy, info del usuario o correo electrónico del usuario. pondremos ese texto para que estés aquí. Agregaremos margen inferior, dB, 30 dB, así. Entonces ahora ejecutemos la app para ver cómo se ve en nuestro emulador. Por lo que tengo un error porque me olvidé de agregar la P aquí. Vamos a correr de nuevo. Ok, entonces vamos a dar click en este ítem y tenemos nuestra actividad de perfil diseñada. Por lo que este video se hace largo y por eso, seguiremos en el siguiente video donde veremos cómo subir datos de nuestro usuario en base de datos Firebase. Entonces nos vemos. 5. Suba la foto de perfil a Firebase: trabajar con Firebase Storage: Ahora queremos subir datos de usuario, como nombre de usuario, correo electrónico, y foto de perfil en nuestra base de datos. Por lo que en primer lugar tendremos que habilitar la base de datos en tiempo real. Y haremos click en crear base de datos. Y lo iniciaremos en modo test. Ahora abriremos Android Studio. Abriremos este asistente. Y ahora integraremos base de datos en tiempo real. Por lo que haremos clic en guardar y recuperar datos. Ahora, agrega base de datos en tiempo real a la aplicación. Y cerremos por ahora a este asistente. Abre la acumulación Gradle para que podamos actualizar versión de base de datos Firebase a la más reciente, así. Y haga clic en sincronizar. Entonces, básicamente, cuando nos inscribimos aquí, queremos poner algunos datos adicionales en nuestra base de datos. Y que los datos adicionales serán en realidad objeto de usuario. Por lo que crearemos una clase llamada usuario. Objeto de usuario, tendrá nombre de usuario. Si tendremos correo electrónico. Y tendrá foto de perfil. Por lo que la imagen de perfil también es una cadena, que en realidad será una URL a la imagen de perfil que vamos a, vamos a subir más adelante. Por lo que crearemos, en realidad generaremos constructor como este. También crearemos un constructor vacío. Por Firebase. Lo necesita para poder utilizar objetos directamente. En. Base de datos. Las operaciones también generarán getters y setters como este. Entonces aquí, cuando manejamos el registro, si la tarea es exitosa, queremos acceder a la base de datos de Firebase dot instance dot get reference. Y esta referencia será usuario. Entonces, cuando ponemos usuario aquí como referencia , creará nodo de usuario aquí. Y eso sobre eso, establecerá valor, que será un nuevo objeto de usuario con el nombre de usuario que se pasa en este método aquí. Tendrá este correo electrónico. Y para la imagen de perfil, inicialmente será una cadena vacía. Por lo que queremos que el usuario pueda agregar imagen de perfil más adelante. Y inicialmente tendrá uno por defecto como este. Pero aquí, como desreferencia, cada usuario es único. Y así, queremos tener un nodo central que será usuario. Y después de eso, queremos tener algún tipo de rama donde cada usuario será separado de cada uno por algún tipo de identificador. Y el identificador es en realidad uno que podemos obtener del objeto Firebase should con get user actual, get UID. Y ahora si ejecutamos nuestra aplicación, pero en primer lugar, ahora vamos en primer lugar a agregar funcionalidad de cierre de sesión para que podamos cerrar la sesión de nuestro usuario. Por lo que por ahora solo inicializaremos el botón Cerrar sesión. Y una vez que se hace clic en el botón de cierre de sesión, queremos que queramos cerrar sesión. Y también queremos iniciar una nueva actividad, que es actividad principal. Pero también queremos despejar todas las actividades para que podamos, para que no podamos volver en realidad. Y vamos a cerrar este. Entonces, ahora ejecutemos la app para probar esto. Ok, entonces vamos a dar click en este perfil. Vamos a cerrar sesión. Y ahora vamos a crear nuevo usuario. Por lo que algún usuario aleatorio. Y vamos a dar click en inscribirte. Y veamos qué pasará en base de datos. Por lo que tenemos nuevo usuario aquí. Este usuario ahora tiene correo electrónico, nombre de usuario y foto de perfil, cual está vacía por el momento. Ahora entiendes por qué usamos aquí usuario y después hemos anexado con estos UID. Entonces de esta manera, podemos tener múltiples usuarios aquí. Y si estuviéramos a punto de omitir esta parte aquí, sólo estaríamos eliminando a este usuario y creando uno nuevo cada vez. Entonces vamos a cerrar sesión y crear un usuario más. Digamos algo como esto. Da click en inscribirte. Y luego tenemos otro usuario aquí. De acuerdo, así es como funciona. Ahora es el momento de trabajar en aplaudir parte fotográfica. Entonces volvamos a la actividad de código y de perfil abierto. Entonces lo que queremos hacer es que cuando el usuario hace clic en esta imagen, queremos abrir galería con nuestras fotos. Y cuando el usuario seleccione foto en particular, la queremos aquí. Y luego cuando hacemos click en subir, queremos que se suba en Firebase en algún lugar. Por lo que ahora centrémonos en la primera parte donde obtendremos la imagen de la galería aquí dentro. Entonces, en primer lugar, vamos a inicializar esta vista de imagen. Por lo que primero lo declararemos. De acuerdo, así que esto es, esto es todo. Vamos a configurar onClickListener para esta imagen. Y aquí abriremos sólidos de galería, a ver cómo se hace. Necesitamos crear nuevo objeto Intent, que se llamará foto intención. Será igual a la intención. Pero esta vez estamos especificando algo llamado acción. Y esa acción es pico de acción. Por lo que sabrá que queremos escoger algo de este objeto de intención. Y eso será imagen. Debido a eso, necesitamos especificar tipo, cual se imagina. Cortar astérix. Ahora iniciaremos actividad, pero actividad para resultado porque queremos obtener imagen particular con código de solicitud uno. Entonces esta cadena aquí básicamente le dice a nuestro sistema que queremos abrir galería. Entonces vamos a ejecutar la aplicación y probarla. Qué es la actividad de perfil abierto y dar click en la imagen. Se puede ver que nos envía a la galería donde podemos seleccionar una foto. Pero no tenemos ninguna foto en nuestro dispositivo. Y por eso, necesitaremos tomar algunas fotos más tarde. Pero ahora necesitamos manejar estos resultados. Por lo que necesitamos manejar nuestra imagen de pico. Tenemos que meterlo aquí de alguna manera. Para eso anularemos método llamado al resultado de la actividad. Aquí comprobaremos si el código de solicitud es igual a uno. Y el código de resultado está bien. También tenemos que comprobar que los datos no sean iguales a nulos porque estos datos en realidad serán imagen. Y si todo esto es así, obtendremos imagen de estos datos con data.dat. Datos. Y ahora necesitamos almacenarlo en algún lugar. Para eso, necesitaremos tener alguna variable global aquí. Si te preguntas ¿cuál es el tipo de estos datos que estamos obteniendo? Se trata de URI. Por lo que básicamente es pad a algún tipo de archivo en nuestro dispositivo. Y lo declararemos aquí, URI privado, imagen Pat. Y aquí dentro, vamos a asignar estos datos a esta imagen Pat, así. Ahora a continuación, lo que tenemos que hacer es obtener imagen en vista de imagen. Y vamos a crear ese método aquí. Por lo que será nula. Tendremos que tener bitmap. Y ese mapa de bits será básicamente imagen que obtendremos de estas apuesta de imagen. Entonces para hacer eso, necesitamos llamar a media store, images.me, dot get bitmap. Y aquí dentro necesitamos conseguir solucionador de contenidos. Y usaremos nuestra apuesta de imagen para conseguirlo. Por lo que es difícil recordar todos esos. Ni siquiera necesitas recordarlo. Simplemente Google sobre cómo transformar URI en un mapa de bits y encontrarás algo como esto. Y ahora cuando tenemos nuestra imagen aquí, queremos ponerla a nuestro perfil de imagen. Por lo que nos referiremos al perfil de imagen y estableceremos mapa de bits de imagen. Este mapa de bits. Ahora puedes ver esto subyacente aquí. Y esto nos está diciendo que debemos manejar la excepción si básicamente no se encuentra nuestra imagen. Entonces lo que vamos a hacer es simplemente poder seguir más acciones y podemos rodear esto. Intentamos atrapar bloque. Y eso es todo. Entonces si no se encuentra la imagen, nuestra aplicación no se estrellará. Ahora, ejecutemos nuestra aplicación y probemos cómo funciona. En primer lugar, debemos tomar algunas fotos para tenerlas en nuestra galería. Por lo que abriremos la cámara de nuestro emulador. De acuerdo, vamos, vale, vamos a capturar este. Ahora volveremos atrás y abriremos nuestra app. Por lo que cuando abramos perfil y pinchemos en esto, ahora tendremos fotos. Por lo que vamos a elegir uno. Y se puede ver que nuestra foto está aquí. Por lo que hemos resuelto exitosamente primera tarea. Y la segunda es aplaudir estas fotos en Firebase. Entonces cómo hacemos eso, donde lo hacemos realmente aplaudimos estas fotos. Para eso, necesitaremos usar el almacenamiento Firebase. Entonces, en realidad, el almacenamiento es algo donde podemos subir archivos en Firebase. Y para eso tendremos que incluir las dependencias primero. Entonces abramos a nuestro asistente de asistencia de Firebase. Y vamos a dar click en el almacenamiento. Y dar click en esto. Y agreguemos almacenamiento en la nube a nuestro proyecto. Si bien se está construyendo, abramos un navegador web y habilitemos el almacenamiento. Por lo que haremos click en empezar. Demos click en Siguiente. Haga click en Hecho. Y estos serán nuestro almacenamiento de base de datos. Y aquí podemos subir archivos. Entonces ahora volvamos al código y veamos cómo hacerlo a través de la aplicación. Ahora, estableceremos onClickListener a estos botón de subir foto. Pero tendremos que declararlo e inicializarlo en primer lugar. Entonces lo pondremos aquí, y lo inicializaremos aquí. Estableceremos onClickListener a estos botones. Y cuando hacemos clic en este botón, queremos subir imagen. Entonces vamos a crear ese método a continuación. Ahora, cuando empecemos a aplaudir tarea, queremos mostrar algún tipo de progreso de esa tarea al usuario, y eso será ProgressDialog. Por lo que vamos a crear diálogo de progreso. Contexto será esta clase. Pondremos título a ese avance a los aplaudidos tres puntos. Y queríamos mostrar ese diálogo. Por último. Ahora aquí queremos obtener referencia del almacenamiento para que podamos aplaudir estas imágenes y escucharemos llamada Firebase, almacenamiento, dot getInstancia, obtener referencia y referencia. Y serán imágenes con algún tipo de cadena aleatoria la cual se generará de esta manera. Por lo que esto nos dará alguna cuerda aleatoria. Cual será el nombre de la foto que queremos subir. Y de esa manera, podemos poner múltiples fotos sin anular. Por lo que no hay posibilidad de que tengamos el mismo nombre para algún tipo de foto. Y cuando aplaudimos esta foto al almacenamiento, necesitamos asociarla con nuestros usuarios de alguna manera. Y verás en un momento cómo vamos a hacer eso. Entonces aquí ahora digamos poner archivo. Archivo será nuestra imagen PET. Y queremos poner en el oyente completo para que sepamos cuando esté completo, cuando la tarea de carga esté completa. Y si la tarea fue exitosa. Ahora descartaremos nuestro diálogo de progreso. Y luego vamos a dar salida al mensaje doest, que dirá imagen cargada. De lo contrario. Diremos que algo salió mal con el mensaje correspondiente. Pero también tenemos que descartar ProgressDialog de todos modos. Y por eso, simplemente vamos a mover esto aquí para que incluso nuestra tarea fuera exitosa o no. Estaremos seguros de que se desestimará el diálogo de avance. Ahora ejecutemos la app y probemos cómo funciona esto. Ahora vamos a ir actividad de perfil abierto. Pongamos algo de imagen aquí. Y vamos a dar click en subir. Foto. App se estrelló. Y veamos por qué es eso. Por lo que el error es probablemente porque cuando ponemos la dependencia del almacenamiento de Firebase, está anticuado. Y debemos actualizarlo a la última versión posible. Porque se puede ver que dice que no hay un método que se utilice dentro del almacenamiento firebase. Y vamos a cambiar esto a la última versión. Y después de sincronizar proyecto volverá a intentarlo. Entonces ejecutemos la app ahora y veamos cómo vamos a trabajar. Entonces seleccionemos Foto. Una vez más. Demos click en subir foto. Y dice que las imágenes subidas. Entonces vamos a refrescar esta página en nuestro navegador web. Se puede ver que hay imágenes de Carpeta que hemos creado. De cualquier lado, hay una imagen con estas cadenas aleatorias que hemos generado. Por lo que funciona, está funcionando. Está bien. Ahora lo que queremos hacer es que queremos hacer un seguimiento de cuánto de nuestra foto se sube. Por lo que queremos algún tipo de porcentaje de los datos subidos. Entonces para hacer eso, tendremos que poner aquí en el oyente de progreso. Y cuando estos avances cambien, actualizaremos nuestro diálogo de progreso con este texto para que el progreso sea doble variable, que será igual a 100 multiplicado por el punto Snapshot. Obtener bytes transferidos. Dividido por Snapshot dot obtiene el recuento total de byte. Y cuando consigamos este progreso, actualizaremos mensaje a algo como esto. Y vamos a convertir el este progreso en entero. También agregaremos signo porcentual. Entonces, ahora ejecutemos la app y veamos si esto funciona. Bueno, ahora está abierto este perfil. Aplaudimos una vez más algo que se puede ver aquí que tenemos progreso, pero se puede notar que saltó a la derecha, justo al 100%. Esto probablemente porque nuestra imagen es demasiado pequeña, por lo que terminó rápido. Creo que si la imagen es más grande, va a funcionar muy bien. Ahora es la parte en la que queremos asociar esta imagen a un determinado usuario que ha subido esta imagen. Entonces para hacer eso aquí, cuando la tarea sea exitosa, necesitaremos obtener URL de esta imagen. Y luego pondremos esa URL en nuestra base de datos en lugar de esa cadena vacía que tenemos aquí. Entonces aquí tenemos cadena vacía. Actualizaremos ese campo con la URL correspondiente para obtener descarga, descarga URL. Para obtener cargada la URL desde la que se puede hacer esta imagen, nos referiremos a estas tareas. Obtendremos un resultado. Después obtendremos almacenamiento y obtendremos URL de descarga. Por lo que esto también lleva algún tiempo. Básicamente esta URL de descarga estará disponible sólo cuando estos, estas tareas de obtener almacenamiento y obtener esta URL se complete. Por lo que necesitaremos agregar uno más sobre completamente Centro aquí dentro. Y cuando esto se complete, si la tarea es exitosa, actualizaremos la imagen de perfil de nuestro usuario. Y vamos a poner argumento aquí, que será la URL exacta. Y ahora que URL es simplemente resultado de esta tarea, y esta tarea en realidad está consiguiendo URL de descarga. Por lo que ahora vamos a crear un método aquí dentro y veremos cómo funciona. Por lo que estamos pasando cadena URL. Por lo que ahora necesitamos poner esta URL de cadena aquí. Y así se hará. Por lo que debemos conseguir de alguna manera pat en nuestra base de datos a este campo de imagen de perfil. Y ese Pat es éste. Por lo que primero nos referiremos a la Base de Datos Firebase GetInstancia y obtenemos referencia. Aquí dentro. Pondremos pet a esta foto de perfil y ese bate es usuario. Por lo que tenemos usuario slash. Ahora necesitamos obtener el UID de usuario específico. Eso lo obtendremos del objeto antiguo de Firebase y obtendremos usuario actual, obtendrás UID. Y ahora todo lo que tenemos que hacer es escribir foto de perfil. Entonces estamos ahora aquí. Y para poner finalmente esa URL, solo estableceremos valor y escribiremos URL. Entonces ahora ejecutemos la app y veamos si funciona o no. Abramos perfil. Bueno, ahora es subir imagen. Haga clic en subir foto. Y cuando se sube imagen, tenemos nuestra imagen aquí dentro. Entonces, ¿por qué tenemos cuerda aquí, por qué hicimos eso? Eso se debe a que más adelante inflaremos nuestra vista de imagen del perfil de nuestro usuario con esta cadena. Por lo que usaremos la biblioteca glide para inflar nuestra vista con esta imagen. Y si copias este enlace y lo pegas aquí, puedes ver que tenemos la imagen. Entonces ahora aprendes a subir una foto o cualquier archivo prácticamente a la Firebase y asociarlo a nuestro usuario. Por lo que en el siguiente video, veremos cómo buscar una lista de todos los usuarios. Entonces te veo entonces. 6. Diseño de actividad de amigos: encuentra usuarios desde Firebase: Ahora es el momento de diseñar actividad de nuestro amigo y de buscar una lista de todos los usuarios en Firebase. Por lo que necesitaremos reciclador vista donde pondremos a todos los usuarios. Debido a eso, en primer lugar necesitaremos descargar el componente de vista de reciclador. Ahora volvamos a la codificación aquí. Para el fondo de nuestra disposición raíz pondrá gradiente. Aquí queremos barra de progreso, que será de 200 dp alto y ancho, pondrá ID para ser barra de progreso. Y lo trasladaremos al centro. Y eso es todo. Ahora vamos a poner vista recicladora. Vista de reciclador será básicamente partido ID de padre de la misma será reciclador. Pero inicialmente queremos que la vista de reciclador se vaya porque queremos mostrar una barra de progreso lo primero. Y cuando obtengamos datos, ocultaremos esta barra de progreso y mostraremos vista de reciclador. Ahora vamos a ir y crear adaptador para nuestra vista de reciclador creará nueva clase que se llamará adaptador de usuarios. Se extenderá el adaptador de punto de vista de reciclador. Aquí crearemos interclass, que será nuestro soporte de vista. Es usuario holder y extends.edu holder. Aquí necesitamos generar constructor. Y escucharemos en tipo para ser de nuestro usuario Holder. Ahora necesitamos implementar métodos que se requieren para deshacerse de los errores. Dentro de estos adaptadores, necesitaremos ArrayList de los usuarios. Se llamará usuarios. Almacenaremos los usuarios objetos de usuario aquí. Necesitaremos contexto. Y también necesitaremos algún tipo de interfaz para el evento click. Escuchar en realidad están pasando eventos de click a nuestra actividad de amigos para que podamos responder eventos onclick. Y escucharemos crear nueva interfaz la cual se llamará On user click listener. Tendrá método llamado al usuario clicado. Y pasaremos posición del usuario que se hace clic, posición dentro de estos ArrayList. Para que en la actividad de un amigo sepamos en qué usuario se hace clic en realidad. Ahora vamos a añadir esa interfaz aquí. Y ahora crearemos constructor con esos tres parámetros. Ahora vamos a crear portavelas. Será View, que es igual al inflador de diseño de punto de contexto inflar. Y necesitamos crear nuestro titular de usuario dentro de la disposición. Entonces ahora diseñemos una fila que se mostrará en la actividad de nuestro amigo. Diseño de raíz serán tarjetas usted. Será contenido de envoltura. Por la altura. Vamos a dar algunos márgenes aquí dentro. Por lo que el margen horizontal será de diez dB. Margen top será de diez dB. Por lo que queremos tener espacio entre las filas del usuario y el radio de esquina será de 40 DP, 14. En aquí tendremos un diseño lineal el cual será emparejado padrón de trigo de padre apagado 70 b Cerraremos etiqueta de esta manera. Y aquí dentro queremos tener otra vista de tarjeta porque queremos tener nuestra foto de perfil a su alrededor. Por lo que usaremos tarik con vista Descartes y radio de esquina para obtener imagen de tierra. Entonces aquí esa será imagen, que mantendrá nuestro perfil como vamos a buscar de la Firebase. Idea de ello será imagen prof y tipo de escala de esta imagen se centrará el cultivo para que podamos tener nuestra imagen recortada dentro del fondo círculo de estas vista de tarjeta. En realidad el color de fondo será el color primario. Y también necesitamos tener vista de texto aquí, que mostrará un nombre de usuario de nuestro usuario. Por lo que lo pondremos aquí abajo vista de descarte. Será Wrap Content. Id, techs dx, t, nombre de usuario. El color del texto será blanco. Pondremos un poco de margen izquierdo aquí. Y la Gravedad será centro, que ahora vuelva a nuestro adaptador. Escucharemos inflado estos usuario titular pondrá a los padres y no queremos adjuntarlo a escribió. Y le devolveremos un nuevo titular de usuario con esta vista. Aquí, queremos obtener el tamaño punto-punto de un usuario. Y en onBind view holder, estableceremos los datos a nuestro layout que acabamos de diseñar. Entonces, en primer lugar, deja ir en este soporte de vista y pon vista de texto e imagen que acabamos de agregar en nuestro archivo XML. Por lo que aquí inicializaremos esos nombre de usuario TXT. Entonces esta es la vista de texto, y ahora necesitamos inicializar esta vista de imagen. Y al encuadernar se llama método titular cuando queremos inflar los datos en nuestro diseño. Por lo que nos referiremos a estos. El nombre de usuario. Estableceremos texto a los usuarios dot get position, dot get username. Vamos a punto y coma aquí. Si no lo hiciste. Si te preguntas ahora cómo inflarlo, esta vista de imagen con imagen de perfil, necesitamos usar glide. Por lo tanto, abre tu navegador web y busca la dependencia de glide. Por lo que abre este enlace y copia los para volver al estudio de Android. Y aquí, simplemente pegarlo y hacer clic en sincronizar. Ahora, volvamos al adaptador y nos referimos a estos glide twit context dot load. Para obtener la URL de la imagen, necesitamos referirnos a los usuarios ArrayList. Obtendremos usuario específico, la posición y obtendremos foto de perfil. Si tú, si no te acuerdas, este es el metal al que nos estamos refiriendo. Entonces básicamente lo estamos recuperando del objeto de usuario, que está en Firebase. Aquí especificaremos qué imagen se inflará en caso de que ocurra el error. Por lo que esa imagen será esta imagen. Ahora aquí, necesitamos poner un tenedor de lugar. Y lo es, creo que No hay error, pero la imagen no se recupera porque no existe. O si la URL no es válida. Lo pondremos la misma imagen. Y por último, lo inflaremos en la vista de imagen de punto titular. Entonces eso es todo. Nuestro adaptador está terminado. Volvamos a la actividad del amigo y L. En Francia actividad necesitamos declarar vista recicladora. Necesitaremos array una lista de usuarios. Y luego barra de progreso adaptador de usuario que acabamos de crear. Usuarios adaptador punto onClickListener. Entonces nos estamos refiriendo a la interfaz que hemos puesto aquí. Ahora en el método OnCreate, inicializaremos algunos de esos. Por lo que inicializaremos la barra de progreso. Usuarios ArrayList, vista recicladora. Y en el usuario click listener será igual a los nuevos usuarios adapter dot en el nuevo usuario click listener. Nos olvidamos básicamente establecer el oyente de muestreo en nuestro artículo. Y lo haremos aquí en este constructor. Por lo que aquí solo decimos item view dot setOnClickListener, nuevo onClickListener. Y aquí vamos a llamar a estos en el usuario clicado, así. El usuario hizo clic y obtener la posición del adaptador. Por lo que nos referimos a esta interfaz, a estos escucha de clic de usuario. Y debido a que las inferencias actividad, pasaremos este oyente de clics al constructor de nuestro adaptador. Cuando pinchemos aquí algo, esto aquí se activará y sabremos que se hace clic en el usuario. Por lo que vamos a poner por ahora mensaje de tostadas que dirá tocado en usuario. Y vamos a conseguir usuario por esta posición, y obtendremos nombre de usuario de ese usuario. Ahora tendremos que buscar usuarios alguna manera y crearemos un nuevo método para, para ese fin. Nos referiremos a la base de datos Firebase punto getInstancia llegar a referencia usuario. Y vamos a sumar. Un oyente para un solo evento, así. Entonces aquí, usaremos for loop para conseguir a nuestros usuarios. Entonces para la instantánea de datos, en esta instantánea, dot get children. Básicamente conseguir niños nos dará una lista de esos artículos. Entonces esto es, esto serán los primeros hijos, esto será segundos hijos en este for loop. Entonces vamos a sumar a estos niños, pero necesitamos obtener el valor y ese valor será objeto es en sí mismo. Entonces de esta manera, cuando estos First entre en for-loop, Primera vez, tendremos este objeto de usuario. A partir de aquí. La próxima vez tendremos éste, y así sucesivamente. Cuando esto se complete, crearemos usuarios adaptador, trigo, usuarios ArrayList. Hacíamos clic en el oyente que se especifica aquí. Y la actividad es ésta. Entonces, veamos si el orden es correcto. Por lo que necesitamos cambiar de lugar aquí. Será así. Ahora queremos configurar gestor de maquetación de nuestra vista recicladora a gestor de maquetación lineal. Y estableceremos adaptador para que sea éste. Ahora, lo que necesitamos hacer es establecer visibilidad de barra de progreso a arma, y visibilidad de vista recicladora a visible. Entonces cuando abramos nuestra app, cuando abramos esta actividad, llamaremos a obtener usuarios así. Entonces, ejecutemos la app y veamos si funciona. Por lo que ahora la aplicación se está ejecutando y se puede ver que la barra de progreso está girando porque aún no recuperó los datos. Y una vez que se recuperan los datos, progreso desapareció y tenemos dos usuarios de nuestra base de datos. Ahora vamos a ver cómo implementar el deslizamiento para refrescar cosa. Cuando jalamos, cuando llamamos click y pull de arriba a abajo, queremos buscar usuarios una vez más. Por lo que también, se puede ver que cuando hacemos clic en usuario, tenemos mensaje de tostadas que hemos establecido aquí. Por lo que para implementar el deslizar para refrescar, necesitaremos hacerlo, necesitaremos buscar eso en Google porque es biblioteca. Si hacemos click en esto, podemos encontrar fácilmente. Código de implementación y que se pondrá en acumulación Gradle. Actualizaremos esto a la versión más reciente y sincronizaremos. Ahora. Ahora volvamos a la actividad de amigos. Y aquí dentro, necesitamos usar estos deslizar para actualizar el diseño. Y debe ser el diseño de raíz. Entonces, solo empecemos a escribir el diseño de actualización de deslizar. Y necesitaremos mover nuestro diseño de restricción para estar por debajo. Por lo que será match_parent y estará rodeando a todos los que están dentro. Pero el diseño de restricción en sí estará rodeado de deslizamiento para refrescar, con diseño de actualización de deslizar. Entonces aquí tenemos error. Nosotros sí, No tenemos imagen real porque o aquí acaba de inyectar estos 5p refresh layout y Android Studio aún no está listo, pero confía en mí funciona. Vamos a poner alguna ID aquí para que podamos referirnos a ella inferencias actividad, escuchemos declarar, sobrevivir, refrescar diseño. Lo inicializaremos aquí. Y nos pondremos en refrescar al oyente. Básicamente, cuando jalamos de arriba a abajo, este metal de aquí se activará. Y lo que vamos a hacer, vamos a llamar de nuevo conseguir usuarios. Pero vamos a ver qué pasará si ejecutamos la app en este momento. Si tiramos así, empezará a girar indefinidamente. Y el, tenemos valores duplicados aquí. Por lo que para resolver el primer problema con spinning indefinido, después de que se llame a este método, necesitamos establecer el diseño de actualización de deslizar, establecer refrescante en falso. Y ahora dejará de refrescarse después de que lo jalemos. Pero para evitar que estos datos se dupliquen. Aquí dentro, primero debemos borrar todos los datos de nuestra base de datos de usuarios. Porque recordar obtener usuarios le decimos esto es que acabamos de anexar nuestra lista de usuarios con los mismos datos. Por lo que ahora cuando ejecutemos la app, será arreglada. Entonces, vamos a ver. De acuerdo, entonces vamos a tirar ahora y se puede ver que todo está funcionando como se esperaba. En el siguiente video, trabajaremos en la actividad de mensajes, y finalmente veremos cómo enviar mensajes de usuario a usuario. 7. Mensajería: la final de ChatApp: Ahora es el momento de crear actividad de mensajes. Entonces, entremos aquí y creemos una nueva actividad vacía. Vamos a nombrarlo actividad del mensaje. Y haga clic en terminar o presione la tecla Enter. Y primero diseñemos XML. Volver tierra será gradiente. Pondremos disposición lineal aquí, que será padre de coincidencia, y la altura será de 75 dp. Entonces lo que queremos hacer con este LinearLayout, y básicamente queremos que estos layout lineal sean en lugar de esta barra de herramientas aquí. Entonces, en primer lugar, tendremos que quitar estas barras de herramientas aquí. Para ello, tendremos que definir un nuevo estilo aquí. Ese estilo será estilo. Nosotros decimos barra de herramientas. Padres será en realidad éste. Los colores serán los mismos que los colores de este equipo. Pero la diferencia es que no queremos barra de acción. Ahora en el expediente manifiesto, aquí dentro, aplicaremos. Y este equipo que acabamos de crear. Por lo que ahora para actualizar estos layout, todo lo que necesitas hacer es hacer clic aquí y hacer clic en Forzar actualización de diseño. Nuestro diseño aún no se actualiza por alguna razón, probablemente por algunos errores en Android Studio. Pero si volvemos a la actividad de amigos, empecemos esta actividad de mensaje para ver si realmente no tiene ActionBar, o está en esto, o es como en esta vista previa. Por lo que sólo lo abriremos desde aquí cuando hagamos clic en algún usuario. Entonces ejecutemos la app. Si hacemos clic en el usuario, vemos que no hay barra de herramientas como se esperaba. Pero por alguna razón, Android Studio es buggy. Por lo que puedes probar con cerrar y abrir Android Studio. Otra vez si te pasa a ti también. Entonces solo trabajaré como es porque no me molesta demasiado. Sé que va a estar funcionando bien. Por lo que sólo voy a seguir. Estamos trabajando con esto. Por lo que el fondo de estos LinearLayout será de color secundario. Su orientación será horizontal. Y necesitaré cerrarlo de esta manera porque quiero poner algunos artículos aquí. Esos artículos serán vista de tarjeta. Habíamos 55 DP para ancho y alto. La gravedad será centro. Y aquí quiero vista de imagen, que se emparejará padre. Y esta imagen básicamente será imagen de perfil del usuario, que está chateando con nosotros. Agregaremos Radio de esquina a 44 DP, por ejemplo, para que sea redondo. Id de la barra de herramientas de la imagen. Y el tipo de escala será el cultivo centrado. Por defecto, la imagen fuente será ésta. Por lo que podemos hacerlo de esta manera. También. Junto a estas imágenes de perfil, queremos tener texto para ti, cual mostrará nombre de usuario del usuario que estamos chateando con ella. Por lo que podemos ser envueltos contenido. Vamos a sumar un margen a la izquierda, y vamos a hacer que esté en el centro. También se puede ver en este plano, dónde se colocará. Ahora necesitamos agregar ID fiscal, que será TXT, chateando con, por ejemplo. Ahora necesitamos diseñar esta parte aquí. Por lo que vamos a poner una barra de progreso que será de 200 dp. Estará centrado en el medio. Lo vamos a constreñir. Lo vamos a constreñir así. Id del mismo serán mensajes de progreso. Tenemos que poner la vista recicladora aquí también, que será 0 dP. Amplio y alto porque lo vamos a constreñir más adelante a algún ID de componente del mismo serán mensajes de reciclador. Y por debajo de ese reciclador, queremos tener texto de edición. Vamos a poner algo de ancho aleatorio por ahora porque también vamos a constreñir es algo ID será texto EdD. Y por ahora será una restricción como esta. Tenemos que dar algún fondo, algún fondo personalizado a este texto de edición. Y lo crearemos aquí. Por lo que vamos a poner, lo llamaremos entrada de mensajes, fondo. Será en forma. Habríamos color sólido del erudito. Agregaremos un radio para ser 13 dp. Aplicaremos esto. Por lo que también necesitaremos vista de imagen aquí, que se utilizará para enviar mensajes. Por lo que vamos a crear un activo vectorial para eso. Hagamos click y busquemos sentido. Entonces será éste. Imagen de arena será el nombre. Y terminar. Ahora vamos a poner aquí esa vista de imagen con dimensiones de 40 dB. Lo trasladaremos a aquí. Tenemos que poner fuente de esta imagen para ser imagen de arena. Entonces lo vamos a constreñir así. Ahora, vamos a limitar texto de edición a esta vista de imagen. Ahora para el ancho, pondremos 0 para la altura. Será algo interesante. Por lo que dejaremos esta altura para ser contenido envolver. Pero estableceremos la altura mínima, este texto de edición será de 45 dp, y la altura máxima será de 100 dB. Entonces, ¿qué significa? Significa que este EditText no puede ser menor, puede ser menor a 45 dp. Y cuando empecemos a escribir mensajes, se ampliará porque estos atributos aquí es envolver contenido. Una vez expandiéndose. Alcanzar 100 dp. Ya no se ampliará. Por eso utilizamos la altura mínima y máxima. El relleno vertical será de diez dp y el relleno horizontalmente y B será de 20 db. Entonces ahora lo que tenemos que hacer también es establecer margen en la parte inferior a diez dp. Y además pondremos margen inferior a esta vista de imagen a algo así. Por lo que también puedes modificarlo un poco para que puedas poner márgenes horizontales a nueve DP, por ejemplo, para lograr este look. O como quieras, incluso puedes expandirte. Incluso puedes aumentar estos radio de esquina para lograr algo como esto. Ahora volvamos a esta vista de reciclador. Queríamos que esta vista de reciclador fuera restricción en la parte inferior a esto y la parte superior debería estar aquí. Por lo que ahora podemos cambiar el ancho de estas vista de reciclador para que coincida con el padre. Y aquí tendremos mensajes. Pero inicialmente la visibilidad se habrá ido. Porque cuando recibamos los mensajes, lo ampliaremos y ocultaremos barra de progreso. Entonces ahora ejecutemos la app y veamos cómo se ve. Abramos esto. Y esta es la maquetación. Será, estará girando para siempre porque no tenemos ninguna lógica en nuestra actividad de mensajes en código Java. Por lo que ahora trabajaremos en eso. Entonces vamos a abrir la actividad de mensajes y vamos a inicializar todos los componentes. Por lo que tenemos vista recicladora. Después tenemos EditText para introducir un mensaje. Contamos con TextView. Este vino de aquí. Lo llamaremos dxdy, charlando con. Tendremos barra de progreso. Ahora inicializaremos todos esos. Ma, inicializaremos el texto ADT. Yo creo. Este es el uno, así que sí. Ahora texto a ti. Y barra de progreso. Entonces es éste. Ahora lo que necesitamos hacer es crear objeto de mensaje. Por lo que objeto mensaje tendrá siguientes atributos. Remitente, que será cadena. Tendrá receptor de mensajes y el contenido del mensaje. Entonces vamos a crear constructor. Vamos a crear getters y setters. Y vamos a crear un constructor vacío por Firebase así. Por lo que aquí también tendremos ArrayList de mensajes. Lo inicializaremos aquí. Nos olvidamos de agregar esta vista de imagen aquí. Entonces lo haremos ahora. Y lo inicializaremos aquí. También tenemos esta imagen para enviar mensaje. Es éste. Por lo que cambiará su ID a la IMG enviar mensaje. Cambia esto aquí también. Y lo inicializaremos aquí. Ahora tenemos que volver a la actividad del amigo. Y cuando hacemos clic en usuario particular, eliminaremos este mensaje tostado. Y lo que queremos hacer es que queremos iniciar la actividad de Mensaje, pero necesitamos pasar algunos elementos aquí también. Entonces pondremos nombre de usuario extra de, digamos, un compañero de habitación. Porque básicamente tenemos salas de chat. Ya verás cómo creamos el posterior y esto se hará, digamos. Este será users.js aún así obtener posición y obtener, obtener nombre de usuario de su compañero de piso. Porque cuando buscamos lista de usuarios, cuando hacemos clic en usuario particular, queremos transferir su nombre de usuario a nuestra actividad de mensajes. Básicamente, si quieres chatear con John, cuando hacemos click en John, John, usuario será transferido aquí. Y podremos poner ese nombre de usuario aquí, por ejemplo. Pero primero pongamos aquí todos los datos que necesitamos. También necesitamos correo electrónico del compañero de piso. Y lo vamos a conseguir así. Entonces pondremos imagen de compañero de piso. Y queremos conseguir nuestra propia imagen. Y ahora con la pregunta cómo conseguir nuestra propia imagen. Por lo que escucharemos la variable de cadena especificada, que será mi imagen, URL. Y aquí, cuando busquemos los datos, estableceremos esa imagen. Y cómo hacer eso. Aquí, tendremos que ir en estos método get users. Y después de que hagamos todo eso, simplemente recorreremos todos los usuarios que hemos recuperado. Y comprobaremos si el usuario dot get email es igual a Firebase ought dot, instance, dot get user actual. Recibimos correo electrónico. Entonces este es nuestro correo electrónico. Y aquí estamos comprobando si nuestro correo electrónico es igual al correo del usuario de la lista de usuarios. Y eso se debe a que esta lista de usuarios, la lista de este usuario. Cuando se infle, sucederá que también nuestro objeto, nuestro propio perfil se almacenará aquí. Por lo que más adelante aquí, recorreremos todos esos objetos y queremos encontrarnos a nosotros mismos. Y si este es el caso, mi imagen es igual a foto de perfil de ese usuario porque éste somos nosotros. Y escucharemos el regreso porque si nos encontramos, ya no queremos hacer bucle. Para guardar algo de memoria. Y por el rendimiento, no necesitamos lope más adelante si ya nos encontramos a nosotros mismos. Entonces vamos a poner, así vamos a poner esa imagen también. Al igual que así. Por lo que ahora podemos volver a nuestra, a nuestra actividad de mensajes. Aquí pondremos algunas cuerdas. Será, será Nombre de usuario o el compañero de piso. Entonces tendremos charlando con el usuario. Y tendremos identificación de chatroom. Y verás más adelante cómo conseguiremos la identificación de la habitación y lo que es en realidad. Por ahora, primero obtengamos nombre de usuario o un compañero de piso de get intent dot getString extra. Y esta es la cuerda. Ahora vamos a charlar con el usuario. En realidad, cambiaremos esto por correo electrónico de un compañero de piso. Tenemos errores tipográficos aquí, así que necesitamos arreglar eso también. Y ahora aquí estableceremos el ancho para ser Nombre de usuario, el compañero de piso. Entonces ahora básicamente hemos establecido este texto aquí con el usuario con el que estamos chateando. Entonces ahora es la parte difícil de agarrar al principio, tal vez necesitamos establecer habitación callada. Entonces por qué hacemos eso y qué es. Por lo que la lógica de mantener nuestros mensajes en Firebase será la siguiente. Por lo que aquí al lado del usuario, no habremos llamado a los mensajes. Y cuando ampliemos eso no, tendremos una identificación de habitación. Entonces imaginemos que tenemos max y tenemos a Alex, y están charlando, que cada uno con el otro. Por lo que básicamente necesitamos generar algún tipo de ID, que será ID de la sala de chat. Para max y Alex, solo necesitamos una habitación para dos usuarios diferentes. Y no importa si Lx está enviando mensajes a max primero o max a Alex, esa fila debe ser única. Por lo que para generar ese tipo de identificación, lo más fácil de hacer es hacerlo. Haz algo con nombres de nuestros usuarios. Entonces, básicamente, nuestro ID de sala de chat debería estar compuesto por nombres de usuario de los usuarios en esa sala de chat. Entonces, ¿cómo hacer que ese nombre sea único? Entonces básicamente vamos a comparar un nombre de nuestros usuarios y alfabéticamente, vamos a generar ese tipo de nombre. Entonces si tenemos a Max y Alex, charlando, el nombre de nuestra habitación debería ser como macks. Y luego volvamos a la Firebase, escucharemos tener mensaje no lo es. Es mejor si te muestro cómo funciona en la app que he creado antes de grabar esos tutoriales. Entonces esto es, tenemos usuarios y mensajes no y si ampliamos este, esas son básicamente salas de chat. Entonces cuando tengamos a John Wayne o con Max comunicándose, generaremos John Wayne max chatroom, y contendrá mensajes objetos. Contendrá objetos de mensaje. Por lo que cada uno de esos son objetos de mensaje que hemos creado, que hemos creado antes. Por lo que tenemos remitente, receptor y el contenido del mensaje. Por lo que de esta manera. Si John inició la conversación primero, conseguiremos este error creado con este ID, que básicamente es nombre, que está compuesto por dos nombres de usuario. Y si max inicia la polarización, primer lugar, este Romain será también el mismo. Entonces de esta manera estamos evitando duplicar salas y estamos ahorrando espacio en la base de datos. Por lo que tal vez parezca un poco difícil de captar. Pero cuando empecemos a crearlo, y cuando veas cómo funciona realmente en la práctica, será mucho más fácil. Por lo que crearemos un método llamado setup chatter. Ah, por lo que escucharemos referido al usuario. Aquí necesitaremos obtener UID de nosotros mismos. Agregaremos oyente para un solo evento. Por lo que ahora cuando vayamos a la ID, obtendremos nombre de usuario de nosotros mismos. Ese nombre de usuario es. Snapshot dot obtener usuarios de valor, esa clase, user_data class en realidad y obtener nombre de usuario. Entonces aquí tenemos nuestro nombre de usuario. Entonces necesitamos comparar este nombre de usuario con el nombre de usuario de nuestro compañero de piso para que podamos saber qué nombre irá primero y qué nombre irá el último. Y lo compararemos así. Entonces si nombre de usuario del roommate.com, mi nombre de usuario es mayor que 0, significa que nuestro nombre de usuario será primero y el nombre de usuario del compañero de piso será el último. Por lo que la identificación de chatroom será igual a esto. De lo contrario si el nombre de usuario del compañero de piso se compara con nuestro nombre de usuario es igual a 0, significa que básicamente los nombres de usuario son los mismos y alfabéticamente su orden será el mismo. Por lo que básicamente es comparar. Si aquí tenemos Macs en comparación con Alex, Se verá 0s antes de un en el alfabeto. Entonces al principio, puede ver que este no es el caso, es que vamos a devolver el número que es superior a 0. Y vamos a obtener esto como el nombre de usuario. Aquí. Esto sucederá si tenemos usuarios, Alex, Alex. Por lo que se comparará a a a, entonces se comparará L2, l, y así sucesivamente. Si determina que todos tienen el mismo orden, devolverá 0. Entonces en este caso, no importa cómo concatenemos esos. Podemos hacer lo mismo que hacíamos antes. Y de lo contrario. Significa que la identificación de chatroom necesita estar compuesta así. Por lo que tu nombre de usuario del usuario con el que estamos chateando tiene que ser el primero. Ahora lo que tenemos que hacer es adjuntar mensaje, oyente y también se inicializará a estos grupos. Por el momento sólo estamos consiguiendo los datos y no estamos escribiendo nada a Firebase. Y lo que quiero decir al adjuntar oyente es que necesitamos poner un oyente al NADH específico. Y cuando el mensaje se cambie aquí, cuando obtengamos algunos datos, necesitamos notificar nuestra actividad y va a buscar nuevos mensajes. Entonces crearemos ese método. Se pondrá, necesitará básicamente identificación de chatroom. Vamos a establecer y al menos en nuestros dos mensajes más chatroom id dot add. Ahora necesitamos, ahora estamos queremos conseguir un oyente de eventos de valor no solo. Porque si pones soltero, No se nos notificará sobre cambios de datos. Y de esta manera, sobre el cambio de datos se activará cada vez que se reciba un nuevo mensaje. Entonces cuando recibimos nuevos mensajes, En primer lugar, queremos borrar mensajes anteriores. Y para instantáneas de datos. En instantánea conseguir niños. Agregaremos mensaje a nuestro Messages ArrayList. Entonces estamos haciendo algo similar como lo hicimos cuando estábamos agregando usuarios. Por lo que después de cada vez que buscamos nuevos mensajes, queremos desplazarnos hasta el último mensaje que se reciba. Por lo que es tamaño de todos los mensajes minús1. Por lo que queremos mantener los mensajes en la parte inferior. Por lo que queremos, cuando recibamos nuevo mensaje, vista de reciclador se desplazará automáticamente hacia abajo. Verás que en la práctica, queremos establecer visibilidad de nuestra vista de reciclador a visible y barra de progreso necesita haberse ido. Ahora lo que también necesitamos hacer es crear ese adaptador de mensajes. Entonces aquí agreguemos punto y coma para evitar errores. Llamaremos a este método. Después de todos esos cálculos con ID de sala de chat y configurar sala de chat se llamarán cuando abramos esta actividad. De acuerdo, ahora necesitamos crear adaptador de mensajes. Por lo que crearemos una nueva clase. Se extenderá el adaptador de punto de vista de reciclador creará interclase de la cual se llamará titular de mensaje. Se extiende soporte de vista se generó constructor. Aquí dentro. El tipo será titular del mensaje. Y pongamos en práctica todos los metales. Queremos tener campos, mensaje ArrayList. Entonces queremos tener imagen remitente. Queremos tener una imagen de receptor, y queremos tener contexto. Entonces por qué necesitamos la imagen del remitente y del receptor esto porque queremos tener derecho, justo al lado derecho nuestras imágenes. Al lado del globo, que sostendrá el mensaje. Y la imagen de lijadora estará en el lado izquierdo de nuestra pantalla. Entonces ya verás cómo hacemos eso más adelante. Ahora vamos a crear constructor. Con todos esos. Aquí queremos devolver el tamaño de los mensajes. Y ahora necesitamos crear portador de mensajes. Por lo que vamos a crear un nuevo diseño. Y vamos a dividir aquí el código dentro. Pondremos disposición de restricción. Será padre de malla y la altura será Wrap Content. Id de ella será diseño CC porque es diseño de restricción. Dentro de ella donde te has llamado 35 DP, haz de 35 días, porque queremos tener imagen redondeada del remitente y receptor. Por lo que escucharás esa vista de imagen. Id será pequeño. Imagen de perfil, tipo de escala se centrará en el cultivo. Y fuente. Podemos ponerlo para que sea por defecto este. Entonces vamos a añadir Radio de esquina 35. Añadamos también margen horizontal. Ahora debajo de la vista de tarjeta, queremos agregar TextView, que en realidad retendrá el contenido del mensaje. Por lo que será envolver contenido con margen horizontal de nueve DEP. Antecedentes será éste. Podemos cambiarlo más tarde. Pongamos algunas herramientas texto solo para ver cómo es real. Bueno, es importante. Pongamos algunos textos aleatorios para ver qué tan bien se ve el mensaje. Ahora se puede ver que nuestro mensaje se va a blanco. Y para arreglarlo, también necesitamos usar tres libras de ancho máximo. Esta vez antes usábamos con altura máxima cuando estábamos trabajando en editar texto aquí. Entonces ahora ves que nuestro mensaje puede ser más amplio que éste. Agregaremos un poco de relleno aquí. Pongamos estas sábanas. Y queremos poner margen superior. Para que podamos tener algún espacio entre tus mensajes. También necesitamos identificación para la vista de cicatriz. Ya verás más tarde. ¿Por qué? Si te preguntas ¿por qué se ve así? ¿ Por qué no ajustó nada la restricción? Bueno, eso es porque en tiempo de ejecución, queremos mover foto de perfil a izquierda o derecha. Y estos textos, dependiendo de si es si es enviado por nosotros o por nuestro compañero de cuarto. Entonces si estamos enviando mensaje, queremos que la foto del perfil esté aquí y el mensaje de texto esté aquí. Y si estamos recibiendo mensaje, queremos que el perfil esté aquí y el mensaje de texto esté junto a él. Por lo que haremos todo eso en estos portador de vista OnBind. Entonces, en primer lugar, vamos en el diseño de restricción definido titular de mensaje. Vista de texto, que será mensaje, ImageView, que será imagen de perfil. Ahora inicializa esos. Vamos a revisar ¿cuál fue la idea de esto? No lo agregamos. Entonces digamos contenidos del mensaje txt. Esta imagen es pequeña imagen de perfil. Y vamos en primer lugar. Y aquí crea nuestra vista y devuelve nuevo portador de mensajes. Y esto vas a ser argumento. Ahora es la parte interesante. En onBind view holder, primer lugar queremos obtener un mensaje. Y ese mensaje será tomado de este ArrayList por posición y obtener contenido. Y aquí dentro, necesitamos manipular con restricciones a través del código Java. Entonces, ¿cómo hacer eso? Necesitamos usar el diseño de restricción. Y es holder dot LL, holder dot, cc. Todos. Ahora queremos escuchar cheque. Si el mensaje es no obtienes posición. No olvides remitente. Es igual al punto de auth de Firebase getInstancia dot get usuario actual que recibe correo electrónico. Esto significa que somos remitentes de este mensaje y queremos constreñir todos estos a la derecha. Entonces veamos cómo se hace. Queremos usar conjunto de restricciones, que es igual al nuevo conjunto de restricciones. Entonces necesitamos clonar restricciones establecer el diseño de restricción de clon de puntos, que es, que es esta restricción, toda esta fila, básicamente. Para que podamos tener información sobre restricciones en este momento. Entonces queremos despejar las restricciones desde la vista de la tarjeta. Entonces vamos a comprobar qué vista de tarjeta es esa. Queremos despejar desde esta vista de guardia. Por lo que necesitamos usar estos ID en realidad, queremos despejar las restricciones entre esta vista de la tarjeta de perfil. Desde el lado izquierdo. También queremos borrar el contenido del mensaje desde el lado izquierdo. Y queremos conectar la vista de tarjeta desde su lado derecho. 2d linealmente al diseño de restricción y restricción ¿verdad? Margen 0. Entonces, ¿qué significa? Hagámoslo más claro. Entonces si vas aquí, significa básicamente que hemos jalado la restricción de aquí para allá. Entonces, en otras palabras, a través de este código, lo hemos hecho. Por lo que E han escrito restricción, derecho, para anular padre. Entonces desde el lado derecho de la vista de la tarjeta hasta el lado derecho del diseño de restricción con 0 márgenes. Entonces queremos constreñir estos TextView a estas vista de tarjeta. Y lo haremos cambiando esto al contenido del mensaje ¿verdad? lado derecho de la vista de la tarjeta de perfil. Y ahora después de que todos esos estén terminados, básicamente tendremos esto. Y así será como se verá. Entonces, deshagamos esos cambios y necesitamos escuchar oídas. Las restricciones establecen un punto se aplican al diseño de restricciones. De lo contrario. Ahora significa que no somos remitentes del mensaje. Hemos recibido el mensaje. Y queremos básicamente hacer cosas diferentes. Entonces vamos a copiar todos esos. Nosotros queremos hacer lo contrario. Entonces aquí vamos a despejar las restricciones correctas, las que se establecen aquí. Básicamente hemos establecido restricciones correctas aquí. Entonces aquí, queremos establecer restricciones a la izquierda en lugar de a la derecha. Pero aquí queremos poner de izquierda a derecha, porque lo que ahora queremos lograr es esto. Por lo que el lado izquierdo de este texto al lado derecho de la vista de la tarjeta. Ahora tenemos que poner, necesitamos inflar imagen mediante el uso de glide. Y aquí vamos a inflar imagen central. El error lo hará, se inflará. Esta imagen. Juega enteras. Titular también será esta imagen. Y vamos a permitir que los Ds en titular punto imagen de perfil. Haremos lo mismo aquí, pero en lugar de la imagen del remitente, queremos inflar la imagen del receptor. Entonces eso es todo. Ahora volvamos a la actividad del mensaje. Y aquí dentro del método onCreate, queremos inicializar un adaptador de mensajes. Pero en primer lugar, vamos a declararlo aquí. Entonces lo que necesitamos pasar es Mensajes ArrayList. Tenemos que poner la imagen de Sander, que vamos a obtener de getInt y punto obtener string extra. Volvamos a la actividad del amigo e imagen de compañero de piso. Básicamente, mis imágenes en realidad la imagen remitente y la imagen del receptor es imagen de compañero de piso. Ahora tenemos que poner contexto. Será. Actividad de mensajes. Esto. Ahora tenemos errores porque necesitamos separar esto así y asegurarnos de que lo pongas que después de inicializar mensajes, también ahora queremos inflar imagen en la barra de herramientas aquí. Entonces lo haremos así. Por lo que es imagen de su compañera de cuarto. Si no me estoy equivocando, el tenedor del lugar será éste. El error será éste. Y vamos a cargar estos en la barra de herramientas de imagen. Entonces lo que más necesitamos hacer es aquí, después de que tengamos mensajes exitosamente, necesitamos notificar adaptador. Ese conjunto de datos ha cambiado. Entonces ahora ejecutemos la app y veamos qué está pasando. Ahora pinchemos en Alex, Que es por cierto, EU. Y por alguna razón no vemos foto aquí. Entonces oigamos. Lx sí tiene imagen. Y aquí tenemos errores tipográficos y como porque y por eso no tenemos imagen apropiada aquí dentro. Entonces, volvamos a ejecutar la app. Por lo que ahora pinchemos en Alex. Se puede ver que aquí tenemos imagen. Está funcionando bien. Vamos a poner algún tipo de mensaje. Nos olvidamos de SetOnClickListener en estas vista de imagen aquí. Entonces en primer lugar necesitamos bien estos, acuerdo, así que pongamos onClickListener en esta imagen enviada. Y cuando hagamos click en este mensaje se enviará de esta manera. Por lo que Firebase Database GetInstancia obtener referencia. La referencia es el mensaje es más chatroom ID. Ahora usamos puntopush porque queremos generar una cadena aleatoria, aleatoria como, como esta de aquí, como esas. Y luego estableceremos valor en esa cadena aleatoria. Nuevo mensaje, Firebase, ot, la GetInstancia, obtener usuario actual, obtener correo electrónico. Ahora necesitamos poner correo electrónico del receptor. Ese correo electrónico del receptor es tomado de la actividad de amigos. Es correo electrónico de compañera de piso. Entonces aquí lo estamos consiguiendo aquí y simplemente lo referimos así. Y el contenido del mensaje se tomará de este texto de edición. Entonces eso es todo. Y después de enviar el mensaje, queremos vaciar nuestro texto de edición para que podamos empezar a escribir nuevo mensaje. Ahora lo último es que necesitamos configurar este adaptador a estas vista de reciclador. Y esta vista de reciclador necesita tener gestor de maquetación. Ahora ejecuta la app y ve qué va a pasar. Por lo que ahora empezaremos a chatear con max. Vamos a decir hola. Y aquí tenemos algunos problemas con la interfaz de usuario. Entonces veamos cómo salió mal esto. Vamos a abrir adaptador, y vamos a comprobar esas restricciones aquí. Por lo que aquí se suponía que íbamos a decir izquierda porque queremos conectar este mensaje al lado izquierdo de la tarjeta tú. Entonces, vamos a ejecutar la aplicación una vez más. Y ahora aquí dentro se puede ver que tenemos mensajes no chatroom ID es Alex Max y mensaje objeto es éste. Entonces ahora cuando volvemos a correr, cuando abrimos chatear con max, vemos este mensaje. Podemos enviar hasta emojis. Ya puedes ver que tenemos otro problema. Y eso es porque en el portador de mensajes, este pensamiento debería haber sido envuelto contenido. Entonces ejecutemos App una última vez. Para que veas lo complicado que se pone crear una app como esta. Hay muchos intentos y errores. Pero al final, lo más importante es entender por qué hicimos algo de la manera que hicimos. Por lo que ahora podemos empezar a enviar algunos otros mensajes. Está funcionando muy bien. Entonces ejecutemos esta app en un dispositivo más para probar cómo se comporta patinando con otro usuario. Vamos a registrar algún usuario aquí. Vamos a inscribirnos. Empecemos a charlar con Alex. Aquí. Si actualizamos a los usuarios y la conversación OpenGL, vemos que tenemos mensaje de Jill y podemos chatear. Está funcionando muy bien. Si se está preguntando cómo hacer la notificación. Si obtenemos nuevo mensaje o básicamente si nuestra aplicación está cerrada y enviamos mensaje, cómo hacerle saber al usuario que hay nuevo mensaje. Estamos usando notificaciones push en ese propósito y eso es tema. Para algunas otras conferencias. Aprenderemos eso también. Pero por ahora, es un tema un poco avanzado porque necesitamos saber sobre las notificaciones en general, y necesitamos saber sobre los servidores y las API. Creo que disfrutaste creando esta app. Fue un poco difícil con muchos errores. Pero si tienes alguna pregunta o duda, estoy aquí para contestar todas tus preguntas. Entonces eso es todo para mí. Nos vemos en la próxima conferencia.