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»
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.
Snackbar.make(view, "A la grande le puse Cuca", Snackbar.LENGTH_LONG).show();
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();
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();
La app en acción
enjoy!!!
El gráfico de columnas es uno tipo de gráfico que nos permite representar fácilmente la cantidad de veces que ocurre un[...]
En este post realizaremos un proyecto en VUE que se conectara a un REST API y utilizara un servicio del mismo para[...]
En este post crearemos un plugin para el CMS WordPress el cual comprende el plugin en si, un panel de administración y e[...]
Control de versiones: Se llama control de versiones a la gestión de los diversos cambios que se realizan sobre los eleme[...]
Continuando con nuestro tutorial de «Mapas interactivos con HTML5» , esta es la sección que corresponde a los elementos[...]
Netbeans es uno de los entornos de desarrollo integrado (Integrated Development Environment – IDE) más conocidos[...]
