The latest articles on Forem by Raúl Rodríguez Concepción (@rulogarcillan). https://forem.com/rulogarcillan https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F211038%2F9e17ee21-a4f4-4701-88a0-06088754f230.jpeg https://forem.com/rulogarcillan en Raúl Rodríguez Concepción Sun, 27 Oct 2019 18:13:49 +0000 https://forem.com/rulogarcillan/tutorial-como-crear-un-custom-snackbar-5fc1 https://forem.com/rulogarcillan/tutorial-como-crear-un-custom-snackbar-5fc1 <h2> ¿Qué es una snackbar? </h2> <p>Según la propia documentación de google</p> <blockquote> <p>Las snackbars proporcionan mensajes breves sobre los procesos de la aplicación en la parte inferior de la pantalla.</p> </blockquote> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fq5ff0ns2njg6r95nxlkt.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fq5ff0ns2njg6r95nxlkt.png" alt="Ejemplo de snackbar"></a></p> <h2> Uso </h2> <p>Gracias a este tipo de vistas podemos informar al usuario facilmente de algún tipo de acción que se acaba de realizar, por ejemplo, un elemento se ha eliminado de nuestro listado.</p> <blockquote> <p>Los Snackbars informan de un proceso que una aplicación ha realizado o realizará. Aparecen temporalmente, hacia la parte inferior de la pantalla. No deben interrumpir la experiencia del usuario, y no requieren acción del usuario para desaparecer.</p> </blockquote> <p>Para implementar este tipo de vistas android nos proporciona la clase <em>Sanckbar</em> la cual con unos pocos parametros somos capaces de mostrar este tipo de mensajes.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight kotlin"><code><span class="nc">Snackbar</span><span class="p">.</span><span class="nf">make</span><span class="p">(</span><span class="n">clContainer</span><span class="p">,</span> <span class="s">"Hola mundo"</span><span class="p">,</span> <span class="nc">Snackbar</span><span class="p">.</span><span class="nc">LENGTH_LONG</span><span class="p">).</span><span class="nf">show</span><span class="p">()</span> </code></pre> </div> <h2> Customizando un snackbar </h2> <p>En ocasiones el diseño proporcionado por Google se queda corto a nuestras necesidades, yo mismo tuve la necesidad no hace mucho asi que tocó investigar un poco como realizar la tarea. Desde la propia documentación de <a href="https://github.com/material-components/material-components-android/blob/master/docs/components/Snackbar.md" rel="noopener noreferrer">material component</a> nos proponen la solución, implementar la clase BaseTransientBottomBar.</p> <h2> Pasos </h2> <p>Nos creamos nuestra clase CustomSnackbar que extienda de BaseTransientBottomBar. En el init de la clase vamos a cambiar las propiedades padding y backgroundColor ya que por defecto nos mete unos márgenes a la vista y el propio color del tema heredado.</p> <div class="ltag_gist-liquid-tag"> </div> <p>Nuestra nueva clase necesitará de tres parámetros, el contenedor padre donde se mostrará la vista, nuestro custom layout y un callback que podremos utilizar para agregar alguna animación o detectar cuando aparace y desaparece el CustomSnackbar.</p> <div class="ltag_gist-liquid-tag"> </div> <p>Y aquí nuestro custom layout</p> <div class="ltag_gist-liquid-tag"> </div> <p>Por último para seguir la línea que google proporciona a la hora de crear los snackbar vamos a replicar los métodos de creación, para ello nos crearemos una serie de métodos estáticos que funcionen como fábrica.</p> <div class="ltag_gist-liquid-tag"> </div> <p>Ensamblamos todo en una app de prueba y el resultado es el siguiente:</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>CustomSnackbar tipo 1</th> <th>CustomSnackbar tipo 2</th> </tr> </thead> <tbody> <tr> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F47wpm9e0fplht5lezidn.png"></td> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Flxq6fb879dxuvvh3x4o1.png"></td> </tr> </tbody> </table></div> <p>Puedes descargarte el código completo en github </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/rulogarcillan" rel="noopener noreferrer"> rulogarcillan </a> / <a href="https://github.com/rulogarcillan/android-customsnackbar" rel="noopener noreferrer"> android-customsnackbar </a> </h2> <h3> An example to create a custom snackbar for android </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">android-customsnackbar</h1> </div> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/rulogarcillan/android-customsnackbar" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> android kotlin ux snackbar