Android – Implement Preference Setting Screen with Kotlin

In many apps, we have seen the Settings screen which is most common in most of the apps. This settings screen is used to manage the preferences of the users. For creating this settings screen android provides a feature to make a settings preferences screen. In this article, we will take a look at implementing the preferences setting screen in Android using Kotlin. 

Note: If you are looking to implement a Preference Setting Screen in Android using Java. Check out the following article: How to Implement Preference Setting Screen in Android using Java

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?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: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 text for heading of our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/idBtnSettings"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="4dp"
        android:text="@string/app_name"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="18sp"
        android:textStyle="bold" />

    <!--button for opening settings activity-->
    <Button
        android:id="@+id/idBtnSettings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Open Settings"
        android:textAllCaps="false" />

</RelativeLayout>

Step 3: Creating a new activity for displaying the settings screen

Navigate to the app > java > your app’s package name > Right-click on it > New > Activity and select Empty activity and name it as SettingsActivity.

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.content.Intent
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    // on below line we are creating
    // a variable for our button
    lateinit var settingsBtn: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // on below line we are initializing
        // our views with their ids.
        settingsBtn = findViewById(R.id.idBtnSettings)

        // on below line we are adding click listener
        // for our settings button
        settingsBtn.setOnClickListener {
            // opening a new intent to open settings activity.
            // opening a new intent to open settings activity.
            val i = Intent(this@MainActivity, SettingsActivity::class.java)
            startActivity(i)
        }
    }
}

Step 5: Creating a preference file for displaying our settings

Navigate to the app > res > Right-click on it > New > Android Resource file and you will get to see the below screen. 

Step 6: Add the below code in the strings.xml file

Navigate to the app > res > values > strings.xml file and add the below code to it.

XML

<resources>
    <!--app  name-->
    <string name="app_name">Preference Setting Screen</string>
    <string name="remind_to_take_a_break">Remind me to take a break</string>
    <string name="key_upload_quality">key_upload_quality</string>
    <string name="remind_me">Remind me to take a break</string>
    <string name="remind_me_for_bed_time">remind_me_for_bed_time</string>
    <string name="remind_for_bed_time">Remind me for bed time</string>
    <string name="limit_data_usage">prefs_limit_data_usage</string>
    <string name="stream_video">Only stream HD video on Wi-Fi</string>
    <string name="limit_mobile_usage">Limit mobile data usage</string>
    <string name="double_tap_to_seek">Double-tap to seek</string>
    <string name="pref_seek_val">pref_seek_val</string>
    <string name="seconds">seconds</string>
    <string name="uploads">Uploads</string>
    <string name="pref_uploads">pref_uploads</string>
    <string name="specify_network_prefs">Specify network preferences for uploads</string>
    <string name="prefs_restricted_mode">prefs_restricted_mode</string>
    <string name="restricted_mode">Restricted Mode can help to hide videos with potentially mature content.No filter is 100% accurate, but it should help you to avoid most of this type of content.</string>
    <string name="restricted_mode_description">Restricted Mode</string>
    <string name="prefs_enable_stats">prefs_enable_stats</string>
    <string name="enable_stats">Enable stats for nerds</string>

    <string-array name="pref_upload_quality_entries">
        <item>360p</item>
        <item>480p</item>
        <item>720p</item>
        <item>1080p</item>
        <item>Original</item>
    </string-array>

    <string-array name="pref_remind_me_to_take_a_break">
        <item>1 hours</item>
        <item>2 hours</item>
        <item>3 hours</item>
        <item>5 hours</item>
        <item>10 hours</item>
    </string-array>

    <string-array name="pref_seek_values">
        <item>5</item>
        <item>10</item>
        <item>15</item>
        <item>20</item>
        <item>30</item>
    </string-array>

    <string-array name="pref_duration">
        <item>0</item>
        <item>1</item>
        <item>2</item>
        <item>3</item>
        <item>4</item>
    </string-array>

    <string-array name="pref_uploads">
        <item>Only when on Wi-Fi</item>
        <item>On any network</item>
    </string-array>

</resources>

Step 7: Working with the preferences.xml file

Navigate to the app > res > xml > preferences.xml file and add the below code to it. Comments are added in the code to get to know in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">

    <!--below line is to create preference category-->
    <PreferenceCategory android:title="General">

        <!--in below line we are creating a list preference
            and we are adding default selected value in list for 3 rd index-->
        <!--dialog title is to set title for our dialog box
            entries is used to add list of data which we
            are adding from our strings file
            entry values is to add values to our entries.
            key is use to add key to our list preferences
            summary is use to add description to our option
            title is use to add title to our list preferences.-->
        <!--this list preference is for remind me option-->
        <ListPreference
            android:defaultValue="3"
            android:dialogTitle="@string/remind_to_take_a_break"
            android:entries="@array/pref_remind_me_to_take_a_break"
            android:entryValues="@array/pref_duration"
            android:key="@string/key_upload_quality"
            android:summary="@string/remind_me"
            android:title="@string/remind_me" />

        <!--on below line we are creating a switch preference
            default value is use to set switch on or off
            key is use to set key
            title is use to add title to our switch-->
        <!--this switch preference option is to remind for a bed time-->
        <SwitchPreference
            android:defaultValue="false"
            android:key="@string/remind_me_for_bed_time"
            android:title="@string/remind_for_bed_time" />

        <!--below switch preference is
            use for mobile data usage-->
        <SwitchPreference
            android:defaultValue="false"
            android:key="@string/limit_data_usage"
            android:summary="@string/stream_video"
            android:title="@string/limit_mobile_usage" />

        <!--below list preference is use for
            double tap to seek option-->
        <ListPreference
            android:defaultValue="1"
            android:dialogTitle="@string/double_tap_to_seek"
            android:entries="@array/pref_seek_values"
            android:entryValues="@array/pref_duration"
            android:key="@string/pref_seek_val"
            android:summary="@string/seconds"
            android:title="@string/double_tap_to_seek" />

        <!--below option is use to create a list
            preference for Upload preferences-->
        <ListPreference
            android:defaultValue="1"
            android:dialogTitle="@string/uploads"
            android:entries="@array/pref_uploads"
            android:entryValues="@array/pref_duration"
            android:key="@string/pref_uploads"
            android:summary="@string/specify_network_prefs"
            android:title="Uploads" />

        <!--below switch preferences is use to restrict mode-->
        <SwitchPreference
            android:defaultValue="false"
            android:key="@string/prefs_restricted_mode"
            android:summary="@string/restricted_mode"
            android:title="@string/restricted_mode_description" />

        <!--below switch pref is use for enable stats option-->
        <SwitchPreference
            android:defaultValue="false"
            android:key="@string/prefs_enable_stats"
            android:title="@string/enable_stats" />

    </PreferenceCategory>

</PreferenceScreen>

Step 8: Now create a new Kotlin class for displaying our preference fragment

Navigate to the app > java > your app’s package name > Right-click on it > New > Kotlin class and name it as SettingsFragment and add the below code to it. Comments are added in the code to get to know in more detail. 

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.os.Bundle
import android.preference.PreferenceFragment

class SettingsFragment : PreferenceFragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // below line is used to add preference
        // fragment from our xml folder.
        addPreferencesFromResource(R.xml.preference)
    }

}

Step 9: Working with the activity_settings.xml file

Navigate to the activity_settings.xml file and add the below code to it. Comments are added in the code to get to know in more detail. 

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".SettingsActivity">

    <!--frame layout for displaying
        our preference fragment-->
    <FrameLayout
        android:id="@+id/idFrameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 10: Working with SettingsActivity.kt file

Navigate to the app > java > your app’s package name > SettingsActivity.kt file and add the below code to it. Comments are added in the code to get to know in more detail. 

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class SettingsActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_settings)

        // below line is to change
        // the title of our action bar.
        supportActionBar?.setTitle("Settings")

        // below line is used to check if
        // frame layout is empty or not.
        // below line is used to check if
        // frame layout is empty or not.
        if (findViewById<View?>(R.id.idFrameLayout) != null) {
            if (savedInstanceState != null) {
                return
            }
            // below line is to inflate our fragment.
            fragmentManager.beginTransaction().add(R.id.idFrameLayout, SettingsFragment()).commit()
        }
    }
}

Now run your application to see the output of it. 

Output: