Agregar y mostrar datos en Realm con Android

Creamos una aplicación que permite agregar y mostrar datos en Realm (base de datos) para Android.

• Consulta el artículo anterior que contiene la creación del botón Floating Action Button.
• Consulta el artículo que muestra cómo se instala Realm en la aplicación.

En primer lugar, vamos a crear un cuadro de diálogo personalizado para pedir el nombre de un “tablero” y posteriormente guardarlo en la base de datos.

Primero, crearemos un Layout con el diseño que queremos para el cuadro de diálogo y luego desde Java usaremos ese layout para inflar una vista que será pasada al componente AlertDialog de Android.

Crear un layout para crear un cuadro de diálogo en Android

Da clic derecho sobre layout (app->res->layout)

Luego en New->Layout resource file

Como nombre del layout usaremos dialog_create_board. En éste layout colocamos un EditText donde el usuario escribirá el nombre del “tablero”.

El código de éste layout es similar a éste:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/editTextNewBoard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:hint="Board title"/>

</android.support.constraint.ConstraintLayout>

En MainActivity vamos a crear un método llamado showAlertForCreatingboard que nos servirá para construir un cuadro de diálogo personalizado. El código es el siguiente, y contiene las explicaciones necesarias.

    public void showAlertForCreatingboard(String title, String message){
        //Creo un builder para construir un cuadro de dialogo personalizado
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        //Si los parametros title y message no vienen vacíos, los utilizo para mi cuadro
        if (title != null) builder.setTitle(title);
        if (message != null) builder.setMessage(message);
        // Creo una vista usando el layout dialog_create_board
        View viewInflated = LayoutInflater.from(this).inflate(R.layout.dialog_create_board, null);
        // Asigno esa vista al builder
        builder.setView(viewInflated);
        final EditText input = (EditText) viewInflated.findViewById(R.id.editTextNewBoard);

        // Tendremos un botón que dice Agregar y que al dale clic...
        builder.setPositiveButton("Agregar", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                // ... extrae el texto escrito en el EditText llamado editTextNewboard
                String boardName = input.getText().toString().trim();
                // Si el usuario escribe algo, se utiliza para crear un tablero, si no, error.
                if (boardName.length() > 0)
                    createNewBoard(boardName);
                else
                    Toast.makeText(getApplicationContext(), "Debe escribir un nombre", Toast.LENGTH_LONG).show();
                
            }
        });
        // Muestro el cuadro de dialogo creado.
        AlertDialog dialog = builder.create();
        dialog.show();
    }

Como puedes observar, el código anterior llama a otro método llamado createNewBoard que es el que creará un “tablero”. Veamos a continuación el código que lleva éste método que también es parte de MainActivity.

    private void createNewBoard(String boardName) {
        realm.beginTransaction();
        Board board = new Board(boardName);
        realm.copyToRealm(board);
        realm.commitTransaction();
    }

El código inicia una transacción (Consulta la sección de base de datos para conocer los aspectos teóricos de una transacción). Después, crea un nuevo tablero con el nombre que el usuario escribió en el EditText y confirma la transacción.

 Ahora debemos lograr que el Floating Action Button llame a nuestro cuadro de diálogo personalizado (consulta el artículo Cómo crear un Floating Action Button). Para ello haremos lo siguiente:

Agrega las siguientes variables a la clase MainActivity:

    private Realm realm;
    private FloatingActionButton fab;
    private ListView listview;
    private BoardAdapter adapter;
    private RealmResults<Board> boards;

Éstas objetos son necesarios para: acceder a Realm, acceder al botón flotante, acceder a la listview. (La clase BoardAdapter la crearemos enseguida y se utiliza para poder mostrar los registros que se van guardando en la Base de Datos).

Agrega el siguiente código a onCreate

        // Creo una instancia de Realm
        realm = Realm.getDefaultInstance();
        // Acceder a los datos de la BD
        boards = realm.where(Board.class).findAll();
        // Creo un adaptador que contiene la lista de boards y el layout diseñado
        adapter = new BoardAdapter(this, boards, R.layout.list_view_board_item);
        // Agrego el adaptador al listview
        listview = (ListView) findViewById(R.id.listView);
        listview.setAdapter(adapter);
        // Enlazo el Floating Action Button (FAB) del layout
        fab = (FloatingActionButton)findViewById(R.id.fabAddBoard);
        // Agrego un listener para cuando se haga clic en el FAB
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showAlertForCreatingboard("Agrega un nuevo tablero", "Escribe un nombre para el nuevo tablero");
            }
        });

Para poder mostrar los registros que se van guardando, necesitamos dos cosas: crear un layout para los items “tablero” y crear un adaptador que infle el listview.

Mostrar datos en Realm

En primer lugar deberemos crear un layout que utilizará cada uno de los items “tablero”.

Crear un layout para los items “tablero”

Crea un nuevo layout con el nombre list_view_board_item.xml.

El código de este layout será como el siguiente:

<?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:background="@color/colorAccent"
    android:layout_height="74dp"
    android:orientation="vertical"
    android:paddingLeft="15dp"
    android:paddingRight="15dp">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingTop="8dpb"
        >

        <TextView
            android:id="@+id/textViewBoardTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.8"
            android:text="TextView"
            android:textSize="18dp"/>

        <TextView
            android:id="@+id/textViewBoardNotes"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:text="TextView"
            android:textSize="12dp"/>


    </LinearLayout>
    <TextView
        android:id="@+id/textViewBoardDate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="10dp"
        android:textStyle="italic"
        android:gravity="right"/>
</LinearLayout>

El layout debe tener una apariencia como la siguiente:

Layout para mostrar datos en Realm

Tendra 3 textview que mostrarán: el nombre del tablero, la cantidad de notas que contiene y la fecha en que fue creado.

Ahora crearemos un adaptador que hará uso de un ViewHolder para mostrar los datos de la Base de Datos. (Si deseas saber qué es un ViewHolder consulta el artículo: Optimizar un ListView usando ViewHolder)

Crear un adapter

Deberás crear esta nueva clase de Java dentro de una carpeta Adapters  y llevará el nombre de BoardAdapter.java. El codigo será como el siguiente:

package com.example.gibgarcia.gibdata.adapters;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.BaseAdapter;

import com.example.gibgarcia.gibdata.R;
import com.example.gibgarcia.gibdata.models.Board;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.List;

/**
 * Created by gibgarcia on 31/10/18.
 */

public class BoardAdapter extends BaseAdapter {
    Context context;
    List<Board> list;
    private int layout;

    public BoardAdapter (Context context, List<Board> boards, int layout){
        this.context = context;
        this.list = boards;
        this.layout = layout;
    }

    @Override
    public int getCount(){
        return list.size();
    }

    @Override
    public Board getItem(int position){
        return list.get(position);
    }

    @Override
    public long getItemId(int id){
        return id;
    }
    @Override
    public View getView (int position, View convertView, ViewGroup viewGroup){

        ViewHolder vh;
        if (convertView == null){
            convertView = LayoutInflater.from(context).inflate(layout, null);
            vh = new ViewHolder();
            vh.title = (TextView) convertView.findViewById(R.id.textViewBoardTitle);
            vh.notes = (TextView) convertView.findViewById(R.id.textViewBoardNotes);
            vh.createdAt = (TextView) convertView.findViewById(R.id.textViewBoardDate);
            convertView.setTag(vh);

        }else{
            vh = (ViewHolder) convertView.getTag();
        }

        Board board = list.get(position);
        vh.title.setText(board.getTitle());
        int numOfNotes = board.getNotes().size();
        String textforNotes = (numOfNotes==1) ? numOfNotes+ " Nota" : numOfNotes+" Notas";
        vh.notes.setText(textforNotes);
        DateFormat df = new SimpleDateFormat("dd/MM/yyyy");
        String createdAt = df.format(board.getCreatedAt());
        vh.createdAt.setText(createdAt);
        return convertView;


    }
    public class ViewHolder{
        TextView title;
        TextView notes;
        TextView createdAt;

    }

}

Resultados

Nuestra aplicación ya debería crear, guardar y mostrar los datos guardados. En apariencia se ve de ésta forma (desearás cambiar ese color, de seguro).

App que muestra datos en Realm

Tu comentario

opiniones