style(ui): make television dialogs responsive

app/src/main/java/com/michatec/radio/Keys.kt

@@ -84,6 +84,7 @@ object Keys {
     const val DIALOG_REMOVE_STATION: Int = 2
     const val DIALOG_UPDATE_STATION_IMAGES: Int = 4
     const val DIALOG_RESTORE_COLLECTION: Int = 5
+    const val DIALOG_THEME_SELECTION: Int = 6
 
     // dialog results
     const val DIALOG_EMPTY_PAYLOAD_STRING: String = ""

app/src/main/java/com/michatec/radio/SettingsFragment.kt

@@ -18,6 +18,7 @@ import androidx.navigation.fragment.findNavController
 import androidx.preference.*
 import com.google.android.material.snackbar.Snackbar
 import com.michatec.radio.dialogs.ErrorDialog
+import com.michatec.radio.dialogs.ThemeSelectionDialog
 import com.michatec.radio.dialogs.YesNoDialog
 import com.michatec.radio.helpers.*
 import com.michatec.radio.helpers.AppThemeHelper.getColor
@@ -31,7 +32,7 @@ import java.util.*
 /*
  * SettingsFragment class
  */
-class SettingsFragment : PreferenceFragmentCompat(), YesNoDialog.YesNoDialogListener {
+class SettingsFragment : PreferenceFragmentCompat(), YesNoDialog.YesNoDialogListener, ThemeSelectionDialog.ThemeSelectionDialogListener {
 
 
     /* Define log tag */
@@ -55,35 +56,17 @@ class SettingsFragment : PreferenceFragmentCompat(), YesNoDialog.YesNoDialogList
         val screen = preferenceManager.createPreferenceScreen(context)
 
         // set up "App Theme" preference
-        val preferenceThemeSelection = ListPreference(activity as Context)
+        val preferenceThemeSelection = Preference(activity as Context)
         preferenceThemeSelection.title = getString(R.string.pref_theme_selection_title)
         preferenceThemeSelection.setIcon(R.drawable.ic_brush_24dp)
         preferenceThemeSelection.key = Keys.PREF_THEME_SELECTION
         preferenceThemeSelection.summary = "${getString(R.string.pref_theme_selection_summary)} ${
             AppThemeHelper.getCurrentTheme(activity as Context)
         }"
-        preferenceThemeSelection.entries = arrayOf(
-            getString(R.string.pref_theme_selection_mode_device_default),
-            getString(R.string.pref_theme_selection_mode_light),
-            getString(R.string.pref_theme_selection_mode_dark)
-        )
-        preferenceThemeSelection.entryValues = arrayOf(
-            Keys.STATE_THEME_FOLLOW_SYSTEM,
-            Keys.STATE_THEME_LIGHT_MODE,
-            Keys.STATE_THEME_DARK_MODE
-        )
-        preferenceThemeSelection.setDefaultValue(Keys.STATE_THEME_FOLLOW_SYSTEM)
-        preferenceThemeSelection.setOnPreferenceChangeListener { preference, newValue ->
-            if (preference is ListPreference) {
-                val index: Int = preference.entryValues.indexOf(newValue)
-                preferenceThemeSelection.summary =
-                    "${getString(R.string.pref_theme_selection_summary)} ${preference.entries[index]}"
-
-                AppThemeHelper.setTheme(newValue as String)
-                return@setOnPreferenceChangeListener true
-            } else {
-                return@setOnPreferenceChangeListener false
-            }
+        preferenceThemeSelection.setOnPreferenceClickListener {
+            // show theme selection dialog
+            ThemeSelectionDialog(this).show(activity as Context)
+            return@setOnPreferenceClickListener true
         }
 
         // set up "Update Station Images" preference
@@ -102,7 +85,6 @@ class SettingsFragment : PreferenceFragmentCompat(), YesNoDialog.YesNoDialogList
             return@setOnPreferenceClickListener true
         }
 
-
         // set up "Update Stations" preference
         val preferenceUpdateCollection = Preference(activity as Context)
         preferenceUpdateCollection.title = getString(R.string.pref_update_collection_title)
@@ -206,7 +188,6 @@ class SettingsFragment : PreferenceFragmentCompat(), YesNoDialog.YesNoDialogList
             return@setOnPreferenceChangeListener true
         }
 
-
         // set up "App Version" preference
         val preferenceAppVersion = Preference(context)
         preferenceAppVersion.title = getString(R.string.pref_app_version_title)
@@ -307,6 +288,26 @@ class SettingsFragment : PreferenceFragmentCompat(), YesNoDialog.YesNoDialogList
         preferenceScreen = screen
     }
 
+    /* Overrides onThemeSelectionDialog from ThemeSelectionDialogListener */
+    override fun onThemeSelectionDialog(dialogResult: Boolean, selectedTheme: String) {
+        if (dialogResult) {
+            // update summary
+            val themes = arrayOf(
+                getString(R.string.pref_theme_selection_mode_device_default),
+                getString(R.string.pref_theme_selection_mode_light),
+                getString(R.string.pref_theme_selection_mode_dark)
+            )
+            val themeValues = arrayOf(
+                Keys.STATE_THEME_FOLLOW_SYSTEM,
+                Keys.STATE_THEME_LIGHT_MODE,
+                Keys.STATE_THEME_DARK_MODE
+            )
+            val index = themeValues.indexOf(selectedTheme)
+            val preferenceThemeSelection = findPreference<Preference>(Keys.PREF_THEME_SELECTION)
+            preferenceThemeSelection?.summary = "${getString(R.string.pref_theme_selection_summary)} ${themes[index]}"
+        }
+    }
+
 
     /* Overrides onYesNoDialog from YesNoDialogListener */
     override fun onYesNoDialog(

app/src/main/java/com/michatec/radio/dialogs/ThemeSelectionDialog.kt

@@ -0,0 +1,111 @@
+package com.michatec.radio.dialogs
+
+import android.content.Context
+import android.view.LayoutInflater
+import android.widget.RadioButton
+import androidx.appcompat.app.AlertDialog
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import com.michatec.radio.Keys
+import com.michatec.radio.R
+import com.michatec.radio.helpers.AppThemeHelper
+import com.michatec.radio.helpers.PreferencesHelper
+
+
+/*
+ * ThemeSelectionDialog class
+ */
+class ThemeSelectionDialog(private var themeSelectionDialogListener: ThemeSelectionDialogListener) {
+
+    /* Interface used to communicate back to activity */
+    interface ThemeSelectionDialogListener {
+        fun onThemeSelectionDialog(dialogResult: Boolean, selectedTheme: String) {
+        }
+    }
+
+
+    /* Main class variables */
+    private lateinit var dialog: AlertDialog
+
+
+    /* Update radio buttons to reflect current theme */
+    private fun updateRadioButtons(
+        context: Context,
+        radioFollowSystem: RadioButton,
+        radioLight: RadioButton,
+        radioDark: RadioButton
+    ) {
+        val currentTheme = AppThemeHelper.getCurrentTheme(context)
+        when (currentTheme) {
+            context.getString(R.string.pref_theme_selection_mode_device_default) -> {
+                radioFollowSystem.isChecked = true
+            }
+            context.getString(R.string.pref_theme_selection_mode_light) -> {
+                radioLight.isChecked = true
+            }
+            context.getString(R.string.pref_theme_selection_mode_dark) -> {
+                radioDark.isChecked = true
+            }
+        }
+    }
+
+
+    /* Construct and show dialog */
+    fun show(context: Context) {
+        // prepare dialog builder
+        val builder = MaterialAlertDialogBuilder(context)
+
+        // inflate custom layout
+        val inflater = LayoutInflater.from(context)
+        val view = inflater.inflate(R.layout.dialog_theme_selection, null)
+
+        // find radio buttons
+        val radioGroup = view.findViewById<android.widget.RadioGroup>(R.id.theme_radio_group)
+        val radioFollowSystem = view.findViewById<RadioButton>(R.id.radio_theme_follow_system)
+        val radioLight = view.findViewById<RadioButton>(R.id.radio_theme_light)
+        val radioDark = view.findViewById<RadioButton>(R.id.radio_theme_dark)
+
+        // set current selection
+        val currentTheme = AppThemeHelper.getCurrentTheme(context)
+        when (currentTheme) {
+            context.getString(R.string.pref_theme_selection_mode_device_default) -> {
+                radioFollowSystem.isChecked = true
+            }
+            context.getString(R.string.pref_theme_selection_mode_light) -> {
+                radioLight.isChecked = true
+            }
+            context.getString(R.string.pref_theme_selection_mode_dark) -> {
+                radioDark.isChecked = true
+            }
+        }
+
+        // set up radio group listener
+        radioGroup.setOnCheckedChangeListener { _, checkedId ->
+            val selectedTheme = when (checkedId) {
+                R.id.radio_theme_follow_system -> Keys.STATE_THEME_FOLLOW_SYSTEM
+                R.id.radio_theme_light -> Keys.STATE_THEME_LIGHT_MODE
+                R.id.radio_theme_dark -> Keys.STATE_THEME_DARK_MODE
+                else -> Keys.STATE_THEME_FOLLOW_SYSTEM
+            }
+            // save theme selection to preferences
+            PreferencesHelper.saveThemeSelection(selectedTheme)
+            // apply theme immediately
+            AppThemeHelper.setTheme(selectedTheme)
+            // notify listener
+            themeSelectionDialogListener.onThemeSelectionDialog(true, selectedTheme)
+            // dismiss dialog
+            dialog.dismiss()
+        }
+
+        // set custom view
+        builder.setView(view)
+
+        // handle outside-click as cancel
+        builder.setOnCancelListener {
+            themeSelectionDialogListener.onThemeSelectionDialog(false, Keys.STATE_THEME_FOLLOW_SYSTEM)
+        }
+
+        // display dialog
+        dialog = builder.create()
+        dialog.show()
+    }
+}

app/src/main/java/com/michatec/radio/helpers/PreferencesHelper.kt

@@ -223,6 +223,14 @@ object PreferencesHelper {
     }
 
 
+    /* Save currently selected app theme */
+    fun saveThemeSelection(theme: String) {
+        sharedPreferences.edit {
+            putString(Keys.PREF_THEME_SELECTION, theme)
+        }
+    }
+
+
     /* Loads value of the option: Edit Stations */
     fun loadEditStationsEnabled(context: Context): Boolean {
         val defaultValue = !context.packageManager.hasSystemFeature(PackageManager.FEATURE_LEANBACK)

app/src/main/res/layout-television/dialog_add_station.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="1000dp"
-    android:layout_height="500dp"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
     android:padding="16dp">
 
     <androidx.recyclerview.widget.RecyclerView

app/src/main/res/layout-television/dialog_find_station.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="1000dp"
-    android:layout_height="500dp"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
     android:padding="16dp">
 
     <androidx.appcompat.widget.SearchView

app/src/main/res/layout-television/dialog_theme_selection.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:padding="24dp">
+
+    <TextView
+        android:id="@+id/dialog_title"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:text="@string/pref_theme_selection_title"
+        android:textSize="24sp"
+        android:textStyle="bold"
+        android:paddingBottom="16dp" />
+
+    <RadioGroup
+        android:id="@+id/theme_radio_group"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical">
+
+        <RadioButton
+            android:id="@+id/radio_theme_follow_system"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/pref_theme_selection_mode_device_default"
+            android:textSize="20sp"
+            android:padding="12dp"
+            android:focusable="true"
+            android:clickable="true" />
+
+        <RadioButton
+            android:id="@+id/radio_theme_light"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/pref_theme_selection_mode_light"
+            android:textSize="20sp"
+            android:padding="12dp"
+            android:focusable="true"
+            android:clickable="true" />
+
+        <RadioButton
+            android:id="@+id/radio_theme_dark"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/pref_theme_selection_mode_dark"
+            android:textSize="20sp"
+            android:padding="12dp"
+            android:focusable="true"
+            android:clickable="true" />
+
+    </RadioGroup>
+
+</LinearLayout>

app/src/main/res/layout/dialog_theme_selection.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:padding="16dp">
+
+    <TextView
+        android:id="@+id/dialog_title"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:text="@string/pref_theme_selection_title"
+        android:textSize="18sp"
+        android:textStyle="bold"
+        android:paddingBottom="12dp" />
+
+    <RadioGroup
+        android:id="@+id/theme_radio_group"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical">
+
+        <RadioButton
+            android:id="@+id/radio_theme_follow_system"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/pref_theme_selection_mode_device_default"
+            android:textSize="16sp"
+            android:padding="8dp"/>
+
+        <RadioButton
+            android:id="@+id/radio_theme_light"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/pref_theme_selection_mode_light"
+            android:textSize="16sp"
+            android:padding="8dp"/>
+
+        <RadioButton
+            android:id="@+id/radio_theme_dark"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/pref_theme_selection_mode_dark"
+            android:textSize="16sp"
+            android:padding="8dp"/>
+
+    </RadioGroup>
+
+</LinearLayout>