Pengenalan SharedPreference dan Contoh Penerapan di Android

SharedPreference Android Studio

SharedPreference (Preferensi Bersama) adalah tempat penyimpanan data pengguna yang paling sederhana yang tersedia di Android. SharedPreference menyimpan data dalam bentuk pasangan nilai kunci. Android menyimpan pengaturan SharedPreference dalam bentuk file XML dalam folder shared_prefs di dalam direktori DATA/data/{application package} pada Android Smartphone. Contoh penyimpanan data lain misalnya:  Internal Storage, External Storage, Cache Storage dan SQLite. Namun, disini hanya akan di bahas SharedPreference saja.

Gambar 1 : Android SharedPreference

Sebagai contoh, misalnya Anda memiliki sebuah aplikasi yang mewajibkan pengguna untuk mendaftar terlebih dahulu di dalam aplikasi Anda sebelum dapat menggunakannya; yaitu dengan membuat sebuah username, password dan kewarganegaraan. Katakanlah saya menggunakan aplikasi Anda lalu mendaftar dengan :

Key : pendaftaran
Username : gwnbs
Password : gwnbs.com
Lokasi : Indonesia

Supaya saya dapat mengakses data-data tersebut sebagai syarat untuk dapat terus menggunakan aplikasi Anda, maka data-data tersebut harus disimpan bukan? Disinilah kegunaan SharedPreference tersebut. Jika Anda tidak menggunakan sebuah penyimpanan data, maka apa yang telah saya daftarkan diatas tentunya tidak tersimpan sehingga harus terus-terusan mendaftar saat menggunakan aplikasi Anda.

Pada contoh diatas, Anda menetapkan key (kunci) dari data-data tersebut dengan "pendaftaran", sehingga ketika saya ingin login ke aplikasi, Anda harus menempatkan kembali SharedPreference lalu memanggil / memuat dengan kunci tersebut supaya saya bisa mendapatkan data-data saya untuk login.

Contoh lain misalnya pada sebuah aplikasi terdapat sebuah pilihan pengaturan yang mengizinkan pengguna untuk mengganti warna latar belakang aplikasi sesuai kenyamanan mereka. Katakanlah seorang pengguna mengganti latar belakang yang tadinya putih menjadi merah; pengaturan tersebut akan tersimpan jika pembuat aplikasi menerapkan SharedPreference untuk pengaturan tersebut. 

Namun, jika pembuat aplikasi  tidak menempatkan SharedPreference di dalamnya, perubahan warna yang dilakukan pengguna tidak akan tersimpan, artinya saat pengguna kembali dari aktivitas pengaturan ke aktivitas utama atau lainnya, tidak akan ada perubahan warna latar. Atau saat pengguna exit dari aplikasi kemudian membuka kembali aplikasi, tidak ada perubahan warna latar terjadi.

Supaya kepala tidak pusing akibat kebanyakan definisi dan teori-teori, sebaiknya langsung praktek saja penerapannya. Berikut ini akan dicontohkan penerapan SharedPreference pada sebuah ToggleButton. Dimana saat ToggleButton tersebut di hidupkan akan merubah warna latar belakang aplikasi, lalu perubahannya di simpan ke SharedPreference. Sehingga ketika aplikasi di exit lalu di buka kembali, aplikasi tetap pada perubahan terakhir yang di lakukan.

Contoh Penerapan SharedPreference

Pada contoh pengaplikasian ini, akan dibuat pada activity_main.xml. Jadi, hanya akan ada satu aktivitas tunggal. Tidak seperti biasanya, di contoh ini tidak lagi menggunakan package com.gwnbs.proyekpertama, melainkan com.gwnbs.proyekkedua. Supaya terlihat seperti ada sedikit kemajuan. Baiklah, persiapkan proyek Anda jika Anda mengikuti contoh tutorial ini. Lalu buka activity_main.xml, buat sebuah komponen ToggleButon. Untuk membuatnya, panggil dengan tag <ToggleButton>, tentukan atribut-atributnya. Berikut isi activity_main.xml dari com.gwnbs.proyekkedua :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/klikdonk"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="40dp"
        android:gravity="center"
        android:textStyle="bold"
        android:textSize="20sp"
        android:text="Klik tombol toggle dibawah untuk mengganti latar belakang menjadi merah" />

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/togel"
        android:text="Red"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/klikdonk"/>


</RelativeLayout>

Sekarang menuju ke MainActivity.java. Pertama-tama dengan membuat String baru untuk warna background nantinya, lalu menentukan variabel String tersebut. Pada contoh ini variabel Stringnya dibuat warna. Kemudian menentukan variabel dari layout utama yang ada pada activity_main.xml. Pada contoh ini, layout nya adalah RelativeLayout dan variabel nya dibuat relLayout. Letakkan semuanya tepat di bawah public class MainActivity extends AppCompatActivity :

String warna;
RelativeLayout relLayout;

Di dalam metode onCreate, dapatkan id dari RelativeLayout tersebut. Id bawaan dari layout ini adalah parent, sehingga pada activity_main.xml juga harus di beri id parent. Selanjutnya adalah  mengimpor class dari ToggleButton, menetapkan variabelnya dan mendapatkan id nya. Id nya adalah togel dan variabelnya di beri latarTogel. Salin semua kode setelah setContentView (R.layout.activity_main);

relLayout = findViewById(R.id.parent);
ToggleButton latarTogel = findViewById(R.id.togel);

Langkah berikutnya membuat listener untuk ToggleButton, listener yang digunakan adalah setOnCheckedChangeListener. Di dalam setOnCheckedChangeListener, secara otomatis akan terbuat metode baru yaitu public void onCheckedChanged. Disinilah di tempatkan SharedPreference sebelum metode klik untuk tombol toggle nya, guna menyimpan pengaturan warna yang di lakukan seperti penjelasan di atas. Tempatkan semua kode dibawah setelah kode di atas :

latarTogel.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
 }});

Selanjutnya di dalam metode onCheckedChaged di atas, imporlah object SharedPreference dan tentukan variabelnya, buat nama folder untuk SharedPreference tersebut dan tentukan mode nya. Variabel kita buat prefs, nama folder latarWarna dan modenya MODE_PRIVATE. Maksud dari MODE_PRIVATE disini adalah SharedPreference hanya dapat di akses oleh aplikasi yang di buat ini. Lalu mengimpor objek SharedPreference.Editor, juga menentukan variabelnya. Editor ini yang nantinya akan melaksanakan penyimpanan.

Kemudian membuat metode untuk ToggleButton saat di hidupkan dan di matikan dengan menggunakan if else. Seperti yang sudah dikatakan di atas, saat tombol on/di hidupkan maka latar akan menjadi warna merah, dan saat di matikan akan kembali ke latar default. Lalu di dalam metode if else, pertama-tama adalah dengan menetapkan nilai String yang di buat di awal tadi, nilai String nya tentulah warna. Warna merah pada metode if dan warna default (putih) untuk metode else.

Setelah itu, membuat penyetelan latar belakang dengan menggunakan setBackgroundColor, lalu menetapkan nilai kunci untuk penyimpanan SharedPreference. Kemudian juga menetapkan nilai kunci Boolean untuk ToggleButton tersebut supaya saat ToggleButton nya on, tombol nya tetap menunjukkan on sebelum di rubah. Jika Boolean ini tidak ditentukan, maka saat tombol nya on dan warna latar berubah menjadi merah; saat aplikasi di exit kemudian di buka lagi, tombolnya akan menunjukkan off, namun latar tetap merah.

Disini untuk String di beri nilai kunci warna_warni, dan Boolean di beri nilai kunci centang. Kemudian untuk menyimpan nya adalah dengan menggunakan Editor di atas tadi. Sehingga isi keseluruhan di dalam setOnCheckedChangeListener akan menjadi seperti di bawah ini :

latarTogel.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
SharedPreferences prefs = getSharedPreferences("latarWarna", MODE_PRIVATE);
SharedPreferences.Editor editor = prefs.edit();

if (isChecked){
    warna = "RED";
    relLayout.setBackgroundColor(Color.RED);
    editor.putString("warna_warni", warna);
    editor.putBoolean("centang", true);
    editor.apply();
    } else {
        warna = "WHITE";
        relLayout.setBackgroundColor(Color.WHITE);
        editor.putString("warna_warni", warna);
        editor.putBoolean("centang", false);
        editor.apply();
        } 
} });

Langkah terakhir untuk koding adalah membuat kembali objek SharedPreference sama seperti di atas; dengan variabel, nama folder dan mode yang sama. Lalu memanggil / memuat String warna dan Boolean dengan nilai kunci yang di tetapkan tadi. Salin dan tempel kode berikut di dalam metode onCreate setelah kode di atas :

SharedPreferences prefs = getSharedPreferences("latarWarna", MODE_PRIVATE);
warna = prefs.getString("warna_warni", "WHITE");
latarTogel.setChecked(prefs.getBoolean("centang", true));

Dan berikut kode komplit nya pada MainActivity.java dari package com.gwnbs.proyekkedua :

package com.gwnbs.proyekkedua;

import android.content.SharedPreferences;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.RelativeLayout;
import android.widget.ToggleButton;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    String warna;
    RelativeLayout relLayout;

    @Override    

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

        relLayout = findViewById(R.id.parent);
        ToggleButton latarTogel = findViewById(R.id.togel);

        latarTogel.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override            

            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                SharedPreferences prefs = getSharedPreferences("latarWarna", MODE_PRIVATE);
                SharedPreferences.Editor editor = prefs.edit();
                if (isChecked){
                    warna = "RED";
                    relLayout.setBackgroundColor(Color.RED);
                    editor.putString("warna_warni", warna);
                    editor.putBoolean("centang", true);
                    editor.apply();
                } else {
                    warna = "WHITE";
                    relLayout.setBackgroundColor(Color.WHITE);
                    editor.putString("warna_warni", warna);
                    editor.putBoolean("centang", false);
                    editor.apply();
                }
            }
        });

        SharedPreferences prefs = getSharedPreferences("latarWarna", MODE_PRIVATE);
        warna = prefs.getString("warna_warni", "WHITE");
        latarTogel.setChecked(prefs.getBoolean("centang", true));
    }
}

Pengujian Aplikasi

Tahapan terakhir tentunya melakukan pengetasan apakah penerapan sudah benar atau belum. Berikut sebuah video yang memperlihatkan penerapan SharedPreference sudah sesuai. Baiklah, terima kasih. Jika ada yang ingin ditanyakan silahkan posting di komentar.