Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Material Design: Notificaciones (Snackbar)

Material Design: Notificaciones (Snackbar)

Autor jc mouse martes, mayo 30, 2017

Material Design introduce una nueva forma de mostrar notificaciones al usuario, estos son los snackbar, similares a los Toast estas nuevas notificaciones añaden una utilidad importante y es el de poder implementar una acción a través de un botón de texto.

Comenzaremos este ejercicio, con un proyecto base simple el cual llamaremos “Notificaciones

notificaciones

Abrimos el archivo build.gradle y agregamos

compile ‘com.android.support:design:25.3.+’

a la sección de dependencias (dependencies) y presionamos sincronizar (Sync). Si no tenemos ningún problema, podemos continuar.

Abrimos el archivo activity_main.xml y reemplazamos el contenido por:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    tools:context="org.example.notificaciones.MainActivity">

    <Button
        android:id="@+id/button1"
        android:text="Snackbar Simple"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button2"
        android:text="Snackbar y Boton de acción"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button3"
        android:text="Snackbar Personalizado"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Lo que hacemos es declarar 3 botones, cada uno de ellos mostrara un tipo de Snackbar.

Abrimos el archivo MainActivity y declaramos los 3 botones de la interfaz junto con 3 listener, es decir:

package org.example.notificaciones;
import android.graphics.Color;
import android.widget.TextView;
import android.support.design.widget.Snackbar;
import java.util.Random;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;
    private Button button3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button1 = (Button) findViewById(R.id.button1);
        button2 = (Button) findViewById(R.id.button2);
        button3 = (Button) findViewById(R.id.button3);

        button1.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        /* -- CODIGO AQUI -- */
                    }
                });

        button2.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        /* -- CODIGO AQUI -- */
                    }
                });

        button3.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        /* -- CODIGO AQUI -- */
                    }
                });        
    }//onCreate:end

}//MainActivity:end

Donde en /* — CODIGO AQUI — */ iremos llenando el código necesario a continuación.

Botón 1: Snackbar Simple

Esta es la forma más sencilla de mostrar una notificación similar a un Toast, SnackBar nos permite definir el tiempo en el que la notificación sera visible en pantalla.

  • LENGTH_SHORT Muestra la notificación por un periodo corto de tiempo
  • LENGTH_LONG Muestra la notificación por un periodo largo de tiempo
  • LENGTH_INDEFINITE Muestra la notificación por un periodo indefinido de tiempo
Snackbar.make(view, "A la grande le puse Cuca", Snackbar.LENGTH_LONG).show();

sample

Botón 2: Snackbar y Botón de acción

Para agregar una acción a un SnackBar se usa el método setAcction al cual se le pasa el texto del “botón de texto” y un listner con su método onClick , como se puede ver a continuación:

Snackbar.make(view, "¿Cambiar color de boton?", Snackbar.LENGTH_LONG)
        .setAction("CAMBIAR", new View.OnClickListener() {
             @Override
             public void onClick(View view) {
                 Random rnd = new Random();
                 int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
                 button2.setBackgroundColor(color);
             }
         }).show();

action button

Cuando presionemos el botón de texto “CAMBIAR”, el botón cambiara de color.

Botón 3. Snackbar personalizado

El Snackbar por defecto tiene color negro con texto blanco y el botón de acción toma el color del colorAccent de la aplicación. Podemos cambiar esos colores de la siguiente forma:

//accion para el boton de accion
View.OnClickListener cambiarColorDeBoton = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Random rnd = new Random();
        int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
        button3.setBackgroundColor(color);
    }
};
//se define el Snackbar
Snackbar snackbar = Snackbar.make(view, "Carpe diem papaaaaa!!!", Snackbar.LENGTH_LONG)
        .setAction("PRESIONAME", cambiarColorDeBoton);
//Color de boton de accion
snackbar.setActionTextColor(Color.argb(255, 78, 244, 66));
View snackBarView = snackbar.getView();
//color de fondo
snackBarView.setBackgroundColor(Color.argb(255, 244, 66, 65));
//color de texto de la notificacion
TextView textView = (TextView) snackBarView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.argb(255, 247, 255, 20));
//se muestra el Snackbar
snackbar.show();

customize

La app en acción

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

MVC: Modelo, Vista y Controlador en PHP

MVC: Modelo, Vista y Controlador en PHP

EL patrón MVC (Model, View, Controller) o Modelo, Vista Controlador, es un tipo de diseño que separa en capas bien defin...

Dibujar Bitmap en Android

Dibujar Bitmap en Android

Android cuenta con una serie de herramientas en su API para el trabajo con gráficos, entre estos podemos mencionar: Bitm...

Como capturar cambios del Slider en JavaFX

Como capturar cambios del Slider en JavaFX

En este tutorial veremos como usar el componente Slider de JavaFX , capturas los cambios que realice el usuario y con es...

Gráfico de lineas con jfreechart

Gráfico de lineas con jfreechart

Los gráficos de líneas muestran una serie como un conjunto de puntos conectados mediante una línea. Los valores se repre...

Crea código HTML5 desde java con j2html

Crea código HTML5 desde java con j2html

j2html es una biblioteca para java que permite generar código html seguro desde código java utilizando sus propias etiqu...

Leer y Escribir registros en archivo de texto

Leer y Escribir registros en archivo de texto

A veces se necesita utilizar archivos de texto plano como contenedor de registros como si de una base de datos se tratar...

Comparte lo que sabes

Categorias

Últimas entradas

El Tangram es un juego chino muy antiguo, esta compuesto por 7 piezas: un paralelogramo (romboide), un cuadrado y 5 triá...

Espresso es un framework de testing propiedad de Google que está dirigido a desarrolladores que creen que las pruebas au...

Harvard WorldMap es una plataforma de mapeo de código abierto en línea, desarrollado por el Centro de Análisis Geográfic...

Realizar pruebas sobre nuestro código nos permiten comprobar su correcto funcionamiento e integración con otros módulos...

Android Bolivia

MAUS