Android: guarde ArrayList en SharedPreferences con Kotlin

SharedPreferences es un almacenamiento local en Android que se utiliza para almacenar datos en forma de pares de clave y valor dentro de los dispositivos Android. Podemos almacenar datos en forma de pares de clave y valor usando Preferencias Compartidas. En este artículo, veremos cómo guardar la lista de arrays en SharedPrefrences en Android usando Kotlin. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Nota : si está buscando implementar Cómo guardar una lista de arrays en preferencias compartidas en Android usando Java. Consulte el siguiente artículo: Cómo guardar ArrayList en SharedPreferences en Android usando Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: Agregar dependencia para gson en build.gradle

Vaya a la aplicación > Gradle Scripts > build.gradle(app) y agregue la siguiente dependencia en la sección de dependencias.

implementation 'com.google.code.gson:gson:2.8.5'

Después de agregar esta dependencia, simplemente sincronice su proyecto para instalarlo. 

Paso 3: Crear una clase modal para almacenar nuestros datos

Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin y nombre su clase como CourseRVModal y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
 
data class CourseRVModal(
    // on below line we are creating a two
    // variable one for course name
    // and other for course image.
    var courseName: String,
    var courseImg: Int
)

Paso 4: crear un archivo de diseño para nuestro elemento de RecyclerView

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en él > Nuevo > archivo de recursos de diseño y nombre su diseño como curso_rv_elemento y agréguele el siguiente código. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    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="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="4dp">
     
      <!--on below line we are creating a
        linear layout for grid view item-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
 
        <!--on below line we are creating
             a simple image view-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:layout_margin="8dp"
            android:padding="5dp"
            android:src="@mipmap/ic_launcher" />
 
        <!--on below line we are creating
            a simple text view-->
        <TextView
            android:id="@+id/idTVCourse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:padding="4dp"
            android:text="@string/app_name"
            android:textAlignment="textStart"
            android:textColor="@color/black"
            android:textStyle="bold"
            tools:ignore="RtlCompat" />
 
    </LinearLayout>
 
</androidx.cardview.widget.CardView>

Paso 5: crear una clase de adaptador para configurar datos en elementos de nuestro RecyclerView

Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin y asígnele el nombre CourseRVAdapter y agréguele el siguiente código. 

package com.gtappdevelopers.kotlingfgproject
 
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
 
// on below line we are creating
// a course rv adapter class.
class CourseRVAdapter(
    // on below line we are passing variables
    // as course list and context
    private var courseList: ArrayList<CourseRVModal>,
) : RecyclerView.Adapter<CourseRVAdapter.CourseViewHolder>() {
    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): CourseRVAdapter.CourseViewHolder {
        // this method is use to inflate the layout file
        // which we have created for our recycler view.
        // on below line we are inflating our layout file.
        val itemView = LayoutInflater.from(parent.context).inflate(
            R.layout.course_rv_item,
            parent, false
        )
        // at last we are returning our view holder
        // class with our item View File.
        return CourseViewHolder(itemView)
    }
     
    override fun onBindViewHolder(holder: CourseRVAdapter.CourseViewHolder, position: Int) {
        // on below line we are setting data to our text view and our image view.
        holder.courseNameTV.text = courseList.get(position).courseName
        holder.courseIV.setImageResource(courseList.get(position).courseImg)
    }
 
    override fun getItemCount(): Int {
        // on below line we are returning
        // our size of our list
        return courseList.size
    }
 
    class CourseViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // on below line we are initializing our course name text view and our image view.
        val courseNameTV: TextView = itemView.findViewById(R.id.idTVCourse)
        val courseIV: ImageView = itemView.findViewById(R.id.idIVCourse)
    }
}

Paso 6: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--on below line we are creating a card view-->
    <androidx.cardview.widget.CardView
        android:id="@+id/idCVAddLanguage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="3dp">
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <!--on below line we are creating edit text
                 for adding a language name-->
            <EditText
                android:id="@+id/idEdtLanguage"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Enter Language" />
 
            <!--on below line we are creating a linear layout for
                adding different images within it-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/idEdtLanguage"
                android:orientation="horizontal"
                android:weightSum="5">
 
                <ImageView
                    android:id="@+id/idIVAndroid"
                    android:layout_width="0dp"
                    android:layout_height="40dp"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:padding="3dp"
                    android:src="@drawable/android" />
 
                <ImageView
                    android:id="@+id/idIVC"
                    android:layout_width="0dp"
                    android:layout_height="40dp"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:padding="3dp"
                    android:src="@drawable/c" />
 
                <ImageView
                    android:id="@+id/idIVJava"
                    android:layout_width="0dp"
                    android:layout_height="40dp"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:padding="3dp"
                    android:src="@drawable/java" />
 
                <ImageView
                    android:id="@+id/idIVJs"
                    android:layout_width="0dp"
                    android:layout_height="40dp"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:padding="3dp"
                    android:src="@drawable/js" />
 
                <ImageView
                    android:id="@+id/idIVPython"
                    android:layout_width="0dp"
                    android:layout_height="40dp"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:padding="3dp"
                    android:src="@drawable/python" />
 
 
            </LinearLayout>
 
        </RelativeLayout>
    </androidx.cardview.widget.CardView>
 
    <!--on below line we are creating our recycler view-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVLanguages"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/idBtnSaveList"
        android:layout_below="@id/idCVAddLanguage"
        android:layout_margin="4dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
 
    <!--on below line we are creating a button to
         save our list to shared preferences-->
    <Button
        android:id="@+id/idBtnSaveList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="10dp"
        android:text="Save List"
        android:textAllCaps="false" />
 
</RelativeLayout>

Paso 7: trabajar con el archivo MainActivity.kt

Vaya a aplicación > java > nombre del paquete de su aplicación > archivo MainActivity.kt y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
 
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.ImageView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.RecyclerView
import com.google.gson.Gson
import com.google.gson.reflect.TypeToken
import java.lang.reflect.Type
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating
    // a variable for our button
    lateinit var androidIV: ImageView
    lateinit var cIV: ImageView
    lateinit var javaIV: ImageView
    lateinit var jsIV: ImageView
    lateinit var pythonIV: ImageView
    lateinit var languageRV: RecyclerView
    lateinit var saveBtn: Button
    lateinit var lngEdt: EditText
 
    lateinit var courseList: ArrayList<CourseRVModal>
    lateinit var courseRVAdapter: CourseRVAdapter
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // on below line we are initializing
        // our views with their ids.
        androidIV = findViewById(R.id.idIVAndroid)
        cIV = findViewById(R.id.idIVC)
        javaIV = findViewById(R.id.idIVJava)
        jsIV = findViewById(R.id.idIVJs)
        pythonIV = findViewById(R.id.idIVPython)
        languageRV = findViewById(R.id.idRVLanguages)
        saveBtn = findViewById(R.id.idBtnSaveList)
        lngEdt = findViewById(R.id.idEdtLanguage)
 
        // method to load arraylist from shared prefs
        // initializing our shared prefs with name as
        // shared preferences.
        val sharedPreferences = getSharedPreferences("shared preferences", MODE_PRIVATE)
 
        // creating a variable for gson.
        val gson = Gson()
 
        // below line is to get to string present from our
        // shared prefs if not present setting it as null.
        val json = sharedPreferences.getString("courses", null)
 
        // below line is to get the type of our array list.
        val type: Type = object : TypeToken<ArrayList<CourseRVModal?>?>() {}.type
 
        // in below line we are getting data from gson
        // and saving it to our array list
        courseList = gson.fromJson<Any>(json, type) as ArrayList<CourseRVModal>
 
        // checking below if the array list is empty or not
        if (courseList == null) {
            // if the array list is empty
            // creating a new array list.
            courseList = ArrayList()
        }
 
        // on below line we are initializing our adapter
        // and setting it to recycler view.
        courseRVAdapter = CourseRVAdapter(courseList)
        languageRV.adapter = courseRVAdapter
 
        androidIV.setOnClickListener {
            if (lngEdt.text.toString().isNotEmpty()) {
                // on below line adding item to recycler view.
                addItemToList(lngEdt.text.toString(), R.drawable.android)
            }
        }
 
        cIV.setOnClickListener {
            if (lngEdt.text.toString().isNotEmpty()) {
                // on below line adding item to recycler view.
                addItemToList(lngEdt.text.toString(), R.drawable.c)
            }
        }
 
        javaIV.setOnClickListener {
            if (lngEdt.text.toString().isNotEmpty()) {
                // on below line adding item to recycler view.
                addItemToList(lngEdt.text.toString(), R.drawable.java)
            }
        }
 
        jsIV.setOnClickListener {
            if (lngEdt.text.toString().isNotEmpty()) {
                // on below line adding item to recycler view.
                addItemToList(lngEdt.text.toString(), R.drawable.js)
            }
        }
 
        pythonIV.setOnClickListener {
            if (lngEdt.text.toString().isNotEmpty()) {
                // on below line adding item to recycler view.
                addItemToList(lngEdt.text.toString(), R.drawable.python)
            }
        }
 
        // on below line we are adding
        // click listener for our save button
        saveBtn.setOnClickListener {
  
            // method for saving the data in array list.
            // creating a variable for storing data in
            // shared preferences.
            val sharedPreferences = getSharedPreferences("shared preferences", MODE_PRIVATE)         
 
            // creating a variable for editor to
            // store data in shared preferences.
            val editor = sharedPreferences.edit()       
 
            // creating a new variable for gson.
            val gson = Gson()           
 
            // getting data from gson and storing it in a string.
            val json: String = gson.toJson(courseList)
            
            // below line is to save data in shared
            // prefs in the form of string.
            editor.putString("courses", json)
 
            // below line is to apply changes
            // and save data in shared prefs.
            editor.apply()
 
            // after saving data we are displaying a toast message.
            Toast.makeText(this, "Saved Array List to Shared preferences. ", Toast.LENGTH_SHORT)
                .show()
 
        }
    }
 
    private fun addItemToList(lngName: String, lngImg: Int) {
        // in this method we are adding item to list and
        // notifying adapter that data has changed
        courseList.add(CourseRVModal(lngName, lngImg))
        courseRVAdapter.notifyDataSetChanged()
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: