Alpha Code Labs | Video Tutoriales y Aplicaciones M&oacuteviles

Gridview y customizar Snackbar

Un GridView muestra datos a modo de tabla bidimensional e incluye automáticamente un scroll para cuando los datos ocupan más que el tamaño de la pantalla. Los datos provienen de un ListAdapter o incluso de un Adapter personalizado.
La Snackbar es un nuevo componente de notificación que forma parte de Material Design. Estas notificaciones se muestran en la parte inferior de la pantalla y desaparecen automáticamente tras un cierto periodo de tiempo al igual que los Toast y opcionalmente ofrecen al usuario la posibilidad de realizar alguna acción. Solo habrá una Snackbar visible en pantalla y nunca mostrarán imágenes.

Crear cadenas de texto y colecciones (arrays) que contendrán los adaptadores

Archivo strings.xml

<resources>
    <string name="app_name">tutorial</string>
    <string name="action_settings">Settings</string>
    <string name="lista_off">Ver Lista de CDs</string>
    <string name="lista_on">Ver Lista de Libros</string>
    <string name="titulo_lista_libros">Seleccione un Libro</string>
    <string name="titulo_lista_cds">Seleccione un CD</string>
    <string-array name="array_libros">
        <item>El poder del ahora</item>
        <item>El alquimista</item>
        <item>La guerra del arte</item>
        <item>1984</item>
        <item>El principito</item>
        <item>Moby-Dick</item>
    </string-array>
    <string-array name="array_cds">
        <item>Esperando el milagro</item>
        <item>Amapola del 66</item>
    </string-array>
</resources>

Crear Layout utilizado en MainActivity.java

A continuación vamos a crear un LinearLayout con la estructura necesaria para nuestro ejemplo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:orientation="vertical"
   
android:paddingBottom="@dimen/activity_vertical_margin"
   
android:paddingLeft="@dimen/activity_horizontal_margin"
   
android:paddingRight="@dimen/activity_horizontal_margin"
   
android:paddingTop="@dimen/activity_vertical_margin"
   
app:layout_behavior="@string/appbar_scrolling_view_behavior"
   
tools:context="com.alphacodelabs.tutorial.MainActivity"
   
tools:showIn="@layout/activity_main">

    <TextView
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:id="@+id/tv_titulo"
       
android:text="@string/titulo_lista_libros"
       
android:textSize="20sp"
       
android:typeface="sans"
       
android:textStyle="bold"/>

    <GridView
       
android:id="@+id/listaLibros"
        
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:numColumns="auto_fit"
       
android:entries="@array/array_libros" />


    <ImageView
       
android:layout_width="match_parent"
       
android:layout_height="100dp"
       
android:id="@+id/imagenLista"
       
android:scaleType="centerInside"
       
android:layout_gravity="center_horizontal" />

    <ToggleButton
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:textOn="@string/lista_on"
       
android:textOff="@string/lista_off"
       
android:onClick="CambiarLista"/>

</LinearLayout>

 

Agregar ListView y adaptadores a MainActivity.java

Agregamos a nuestro GridView, la funcionalidad necesaria para cambiar el adaptador cuando presionemos el botón y ejecutemos el método CambiarLista donde se creará la Custom Snackbar y el método setOnItemClickListener para visualizar la imagen dependiendo del elemento seleccionado en el GridView.

GridView gridView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    gridView = (GridView)findViewById(R.id.listaLibros);
    ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.array_libros));
    gridView.setAdapter(adapter);
    gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            switch (parent.getItemAtPosition(position).toString()){
                case "El poder del ahora":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.ahora);
                    break;
                case "El alquimista":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.alquimista);
                    break;
                case "La guerra del arte":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.arte);
                    break;
                case "1984":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.milnueve);
                    break;
                case "El principito":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.principito);
                    break;
                case "Moby-Dick":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.moby);
                    break;
                case "Esperando el milagro":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.milagro);
                    break;
                case "Amapola del 66":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.amapola);
                    break;
                default:
                    break;
            }
        }
    });

}

public void CambiarLista(View v) {

    if(((ToggleButton)v).isChecked()){
        ((TextView)findViewById(R.id.tv_titulo)).setText(getResources().getString(R.string.titulo_lista_cds));
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.array_cds));
        gridView.setAdapter(adapter);
    }else{
        ((TextView)findViewById(R.id.tv_titulo)).setText(getResources().getString(R.string.titulo_lista_libros));
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.array_libros));
        gridView.setAdapter(adapter);
    }

    CustomSnackBar();
}

public void CustomSnackBar(){
    Snackbar snackbar = Snackbar
            .make(getWindow().getDecorView().getRootView(), "Tabla actualizada", Snackbar.LENGTH_LONG)
            .setAction("BOTON", new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(getBaseContext(), "Presionado", Toast.LENGTH_SHORT).show();
                }
            });

    snackbar.setActionTextColor(Color.RED);

    View snackView = snackbar.getView();
    TextView textView = (TextView) snackView.findViewById(android.support.design.R.id.snackbar_text);
    textView.setTextColor(Color.WHITE);
    snackbar.show();
}

Aquí te dejamos el video tutorial de Gridview y customizar Snackbar.