Status Bar transparente y Insets en Jetpack Compose
Vložit
- čas přidán 8. 05. 2024
- 🎁 Aquí puedes acceder a la información por escrito 👉 devexpert.io/status-bar-trans...
Material 3 recomienda utilizar la pantalla completa para pintar nuestras Apps. Pero la plantilla por defecto cuando creamos un nuevo proyecto en Jetpack Compose no está configurada para hacerlo.
En este vídeo, te enseño los 4 pasos necesarios para configurarlo, y te hablo del concepto de Insets.
Verás qué son estos Insets, cómo aplicarlos, cómo posicionar nuestros elementos de UI de forma segura para que no tapen las partes importantes, y cómo aplicarlo en un Scaffold y en una lista con scroll.
📩 No te pierdas ningún contenido exclusivo 👉 devexpert.io/newsletter
Únete a la Comunidad de DevExpert en Discord 👉 devexpert.io/comunidad
//////////////////////////////////////////////////////////////////////////////////////////
Si aún no te decides sobre si Kotlin es el lenguaje que deberías aprender, te animo a que te apuntes a mi masterclass gratuita donde te hablo sobre:
1️⃣ Hasta donde llega el ecosistema de Kotlin
2️⃣ Cómo desarrollar Apps Multiplatform
3️⃣ Te mostraré la ruta más fácil para aprender Kotlin y KMP
🎁 Apúntate aquí: devexpert.io/training-gratis/...
/////////////////////////////////////////////////////////////////////////////////////////////
➡➡ SÍGUENOS EN OTRAS REDES SOCIALES ⬅⬅
👉 Linkedin: www.linkedin.com/in/antoniolg
👉 Instagram: / devexpert.io
👉 Twitter: / devexpert_io
Únete a la Comunidad de DevExpert en Discord 👉 devexpert.io/comunidad
Si te ha gustado el vídeo de hoy apóyanos con un ❤ LIKE, deja un 💬 comentario/ duda y 🥇 SUSCRÍBETE si aún no lo has hecho! Nos vemos en el próximo vídeo!
DevExpert
💻 devexpert.io/
![Retrofit y Kotlin: La Guía Definitiva para Conectar tu App con APIs [Actualizado 2023]](http://i.ytimg.com/vi/2_DnhfQrwXQ/mqdefault.jpg)
🎁 Aquí puedes acceder a la información por escrito 👉 devexpert.io/status-bar-transparente-jetpack-compose/
Te estoy muy agradecido. Llevaba tiempo intentando evitar que el teclado ocultara el texto cuando intentaba editar texto.
¡Me alegro de que haya sido de ayuda!
Excelente video! muy bien explicado. Yo te quiero pedir un video de como aplicar correctamente un colapsable layout en compose. Saludos
Muchas gracias! Pues lo miro, porque es algo que no he tocado aún
justo lo que buscaba thx man
nada!
Otra gran entrega.
Gracias!
Perfectamente explicado y super útil, como siempre. Muchas gracias!
¡Muchas gracias Dani!
excelente video ! , como siempre muy bien explicado y ayudando a la comunidad !
Muchas gracias!
Muy buen video, sería bueno, en compose multiplaform
¡Lo miro! La verdad que no lo he investigado, quizá es igual de fácil o muy similar...
Para evitar usar el modificador padding deberías usar por ejemplo los modificadores .safeContentPadding, .safeGesturePadding o .safeDrawingPadding; otra opción sería usar el modificador .windowInsetsPadding pasando el objeto WindowInsets con la variante que deseamos pero pues es más largo para hacer lo mismo.
Otra cosa importante que pase por alto sería explicar de forma más clara que el objeto WindowInsets es un objeto que nos da información sobre los márgenes usados por la interfaz del sistema, por ende cuando usamos un diseño de borde a borde debemos tener en cuenta estos márgenes que podemos obtener a través de este objeto para que los componentes de nuestra app no entren en conflicto con los componentes de la interfaz de usuario del sistema.
Pdta: Saludos Antonio, mis comentarios son de forma constructiva y resaltó tus aportes porque es difícil encontrar videos de calidad, un abrazo y que estés muy bien.
Gracias por tus aportes. Esos modificadores que comentas no los conozco. Con respecto al segundo párrafo, es exactamente de lo que hablo en este vídeo, no?
Justo en estos dias he estado trabajando en un caso similar donde el TopBar solapa el contenido del Scaffold y adquiere transparencia. Vaya quebradero de cabeza ha sido, pero lo he conseguido cambiando el TopBar al contenido del Scaffold y lo he unificado al LazyList dentro de un Box.
Es una lastima que el Scaffold y TopBar no tenga una implementacion de este tipo de caso y haya que estar haciendo calculos para cambiar los parametros del alpha de la TopBar o del contentPadding del LazyList de forma dinamica.
La verdad que no sé exactamente a qué te refieres, si tienes una imagen me gustaría verlo. A lo mejor hay alguna solución alternativa?
@@devexpert_ioHe intentado dos veces pasar un link de mi Drive con un video, pero no he podido 🙈 Para que te hagas una idea, es una imitacion del efecto del TopBar de Netflix
creo que no se pueden poner links
Muy bueno como siempre!! me gustaria saber como podria hacerlo si tengo un proyecto KMM usando Compose Multiplatform! hay que hacer algo dependiendo del SO?
Es una muy buena pregunta para la que no tengo respuesta 😅, pero lo miraré algún día
Me ayudo bastante, y me pregunto como se haria para que la searchBar tenga sus respectivos espacios en los laterales, en el emulador se ve perfecto, pero en el dispositivo fisico ocupa todo el espacio de izquierda a derecha.
No sabría decirte sin probarlo...
Con un modifier queda Fino bro
Con un if