Migrate main app UI to Material Design 3

app/build.gradle

@@ -36,6 +36,7 @@ android {
         debug {
             minifyEnabled false
             debuggable true
+            applicationIdSuffix '.debug'
         }
     }
 
@@ -120,7 +121,7 @@ dependencies {
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
 
     // Material design
-    implementation "com.google.android.material:material:1.6.1"
+    implementation "com.google.android.material:material:1.8.0"
 
     // LiveData
     implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.5.1"

app/src/main/java/io/heckel/ntfy/app/Application.kt

@@ -1,6 +1,7 @@
 package io.heckel.ntfy.app
 
 import android.app.Application
+import com.google.android.material.color.DynamicColors
 import io.heckel.ntfy.db.Repository
 import io.heckel.ntfy.util.Log
 
@@ -12,4 +13,9 @@ class Application : Application() {
         }
         repository
     }
+
+    override fun onCreate() {
+        DynamicColors.applyToActivitiesIfAvailable(this)
+        super.onCreate()
+    }
 }

app/src/main/java/io/heckel/ntfy/ui/AddFragment.kt

@@ -11,6 +11,7 @@ import android.view.inputmethod.InputMethodManager
 import android.widget.*
 import androidx.fragment.app.DialogFragment
 import androidx.lifecycle.lifecycleScope
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.google.android.material.textfield.TextInputEditText
 import com.google.android.material.textfield.TextInputLayout
 import io.heckel.ntfy.BuildConfig
@@ -144,7 +145,7 @@ class AddFragment : DialogFragment() {
         loginPasswordText.addTextChangedListener(loginTextWatcher)
 
         // Build dialog
-        val dialog = AlertDialog.Builder(activity)
+        val dialog = MaterialAlertDialogBuilder(requireContext())
             .setView(view)
             .setPositiveButton(R.string.add_dialog_button_subscribe) { _, _ ->
                 // This will be overridden below to avoid closing the dialog immediately

app/src/main/java/io/heckel/ntfy/ui/Colors.kt

@@ -1,48 +1,45 @@
 package io.heckel.ntfy.ui
 
 import android.content.Context
+import android.graphics.Color
 import androidx.core.content.ContextCompat
+import com.google.android.material.color.MaterialColors
+import com.google.android.material.elevation.SurfaceColors
 import io.heckel.ntfy.R
 import io.heckel.ntfy.util.isDarkThemeOn
 
 class Colors {
     companion object {
-        const val refreshProgressIndicator = R.color.teal
-
         fun notificationIcon(context: Context): Int {
             return if (isDarkThemeOn(context)) R.color.teal_light else R.color.teal
         }
 
         fun itemSelectedBackground(context: Context): Int {
-            return if (isDarkThemeOn(context)) R.color.black_800b else R.color.gray_400
+            return SurfaceColors.getColorForElevation(context, 10f)
-        }
-
-        fun cardBackground(context: Context): Int {
-            return if (isDarkThemeOn(context)) R.color.black_800b else R.color.white
-        }
-
-        fun cardSelectedBackground(context: Context): Int {
-            return if (isDarkThemeOn(context)) R.color.black_700b else R.color.gray_500
         }
 
         fun cardBackgroundColor(context: Context): Int {
-            return ContextCompat.getColor(context, cardBackground(context))
+            return SurfaceColors.getColorForElevation(context, 5f)
         }
 
         fun cardSelectedBackgroundColor(context: Context): Int {
-            return ContextCompat.getColor(context, cardSelectedBackground(context))
+            return SurfaceColors.getColorForElevation(context, 20f)
         }
 
         fun statusBarNormal(context: Context): Int {
-            return if (isDarkThemeOn(context)) R.color.black_900 else R.color.teal
+            return MaterialColors.getColor(context, R.attr.backgroundColor, Color.BLACK)
         }
 
         fun statusBarActionMode(context: Context): Int {
-            return if (isDarkThemeOn(context)) R.color.black_900 else R.color.teal_dark
+            return MaterialColors.getColor(context, R.attr.backgroundColor, Color.BLACK)
         }
 
         fun dangerText(context: Context): Int {
-            return if (isDarkThemeOn(context)) R.color.red_light else R.color.red_dark
+            return MaterialColors.getColor(context, R.attr.colorError, Color.RED)
+        }
+
+        fun swipeToRefreshColor(context: Context): Int {
+            return MaterialColors.getColor(context, R.attr.colorPrimary, Color.GREEN)
         }
     }
 }

app/src/main/java/io/heckel/ntfy/ui/DetailActivity.kt

@@ -23,6 +23,7 @@ import androidx.lifecycle.lifecycleScope
 import androidx.recyclerview.widget.ItemTouchHelper
 import androidx.recyclerview.widget.RecyclerView
 import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.google.android.material.snackbar.Snackbar
 import io.heckel.ntfy.BuildConfig
 import io.heckel.ntfy.R
@@ -190,7 +191,7 @@ class DetailActivity : AppCompatActivity(), ActionMode.Callback, NotificationFra
         // Swipe to refresh
         mainListContainer = findViewById(R.id.detail_notification_list_container)
         mainListContainer.setOnRefreshListener { refresh() }
-        mainListContainer.setColorSchemeResources(Colors.refreshProgressIndicator)
+        mainListContainer.setColorSchemeColors(Colors.swipeToRefreshColor(this))
 
         // Update main list based on viewModel (& its datasource/livedata)
         val noEntriesText: View = findViewById(R.id.detail_no_notifications)
@@ -568,8 +569,7 @@ class DetailActivity : AppCompatActivity(), ActionMode.Callback, NotificationFra
     private fun onClearClick() {
         Log.d(TAG, "Clearing all notifications for ${topicShortUrl(subscriptionBaseUrl, subscriptionTopic)}")
 
-        val builder = AlertDialog.Builder(this)
+        val dialog = MaterialAlertDialogBuilder(this)
-        val dialog = builder
             .setMessage(R.string.detail_clear_dialog_message)
             .setPositiveButton(R.string.detail_clear_dialog_permanently_delete) { _, _ ->
                 lifecycleScope.launch(Dispatchers.IO) {
@@ -600,8 +600,7 @@ class DetailActivity : AppCompatActivity(), ActionMode.Callback, NotificationFra
     private fun onDeleteClick() {
         Log.d(TAG, "Deleting subscription ${topicShortUrl(subscriptionBaseUrl, subscriptionTopic)}")
 
-        val builder = AlertDialog.Builder(this)
+        val dialog = MaterialAlertDialogBuilder(this)
-        val dialog = builder
             .setMessage(R.string.detail_delete_dialog_message)
             .setPositiveButton(R.string.detail_delete_dialog_permanently_delete) { _, _ ->
                 Log.d(TAG, "Deleting subscription with subscription ID $subscriptionId (topic: $subscriptionTopic)")
@@ -716,8 +715,7 @@ class DetailActivity : AppCompatActivity(), ActionMode.Callback, NotificationFra
     private fun onMultiDeleteClick() {
         Log.d(TAG, "Showing multi-delete dialog for selected items")
 
-        val builder = AlertDialog.Builder(this)
+        val dialog = MaterialAlertDialogBuilder(this)
-        val dialog = builder
             .setMessage(R.string.detail_action_mode_delete_dialog_message)
             .setPositiveButton(R.string.detail_action_mode_delete_dialog_permanently_delete) { _, _ ->
                 adapter.selected.map { notificationId -> viewModel.markAsDeleted(notificationId) }
@@ -744,9 +742,7 @@ class DetailActivity : AppCompatActivity(), ActionMode.Callback, NotificationFra
         adapter.toggleSelection(notification.id)
 
         // Fade status bar color
-        val fromColor = ContextCompat.getColor(this, Colors.statusBarNormal(this))
+        fadeStatusBarColor(window, Colors.statusBarNormal(this), Colors.statusBarActionMode(this))
-        val toColor = ContextCompat.getColor(this, Colors.statusBarActionMode(this))
-        fadeStatusBarColor(window, fromColor, toColor)
     }
 
     private fun finishActionMode() {
@@ -760,9 +756,7 @@ class DetailActivity : AppCompatActivity(), ActionMode.Callback, NotificationFra
         adapter.notifyItemRangeChanged(0, adapter.currentList.size)
 
         // Fade status bar color
-        val fromColor = ContextCompat.getColor(this, Colors.statusBarActionMode(this))
+        fadeStatusBarColor(window, Colors.statusBarActionMode(this), Colors.statusBarNormal(this))
-        val toColor = ContextCompat.getColor(this, Colors.statusBarNormal(this))
-        fadeStatusBarColor(window, fromColor, toColor)
     }
 
     companion object {

app/src/main/java/io/heckel/ntfy/ui/MainActivity.kt

@@ -28,6 +28,7 @@ import androidx.lifecycle.lifecycleScope
 import androidx.recyclerview.widget.RecyclerView
 import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
 import androidx.work.*
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.google.android.material.floatingactionbutton.FloatingActionButton
 import io.heckel.ntfy.BuildConfig
 import io.heckel.ntfy.R
@@ -96,7 +97,7 @@ class MainActivity : AppCompatActivity(), ActionMode.Callback, AddFragment.Subsc
         // Swipe to refresh
         mainListContainer = findViewById(R.id.main_subscriptions_list_container)
         mainListContainer.setOnRefreshListener { refreshAllSubscriptions() }
-        mainListContainer.setColorSchemeResources(Colors.refreshProgressIndicator)
+        mainListContainer.setColorSchemeColors(Colors.swipeToRefreshColor(this))
 
         // Update main list based on viewModel (& its datasource/livedata)
         val noEntries: View = findViewById(R.id.main_no_subscriptions)
@@ -608,8 +609,7 @@ class MainActivity : AppCompatActivity(), ActionMode.Callback, AddFragment.Subsc
     private fun onMultiDeleteClick() {
         Log.d(DetailActivity.TAG, "Showing multi-delete dialog for selected items")
 
-        val builder = AlertDialog.Builder(this)
+        val dialog = MaterialAlertDialogBuilder(this)
-        val dialog = builder
             .setMessage(R.string.main_action_mode_delete_dialog_message)
             .setPositiveButton(R.string.main_action_mode_delete_dialog_permanently_delete) { _, _ ->
                 adapter.selected.map { subscriptionId -> viewModel.remove(this, subscriptionId) }
@@ -648,9 +648,7 @@ class MainActivity : AppCompatActivity(), ActionMode.Callback, AddFragment.Subsc
             })
 
         // Fade status bar color
-        val fromColor = ContextCompat.getColor(this, Colors.statusBarNormal(this))
+        fadeStatusBarColor(window, Colors.statusBarNormal(this), Colors.statusBarActionMode(this))
-        val toColor = ContextCompat.getColor(this, Colors.statusBarActionMode(this))
-        fadeStatusBarColor(window, fromColor, toColor)
     }
 
     private fun finishActionMode() {
@@ -677,9 +675,7 @@ class MainActivity : AppCompatActivity(), ActionMode.Callback, AddFragment.Subsc
             })
 
         // Fade status bar color
-        val fromColor = ContextCompat.getColor(this, Colors.statusBarActionMode(this))
+        fadeStatusBarColor(window, Colors.statusBarActionMode(this), Colors.statusBarNormal(this))
-        val toColor = ContextCompat.getColor(this, Colors.statusBarNormal(this))
-        fadeStatusBarColor(window, fromColor, toColor)
     }
 
     private fun redrawList() {

app/src/main/java/io/heckel/ntfy/ui/MainAdapter.kt

@@ -115,7 +115,7 @@ class MainAdapter(private val repository: Repository, private val onClick: (Subs
             itemView.setOnClickListener { onClick(subscription) }
             itemView.setOnLongClickListener { onLongClick(subscription); true }
             if (selected.contains(subscription.id)) {
-                itemView.setBackgroundResource(Colors.itemSelectedBackground(context))
+                itemView.setBackgroundColor(Colors.itemSelectedBackground(context))
             } else {
                 itemView.setBackgroundColor(Color.TRANSPARENT)
             }

app/src/main/java/io/heckel/ntfy/ui/NotificationFragment.kt

@@ -7,6 +7,7 @@ import android.os.Bundle
 import android.widget.RadioButton
 import androidx.fragment.app.DialogFragment
 import androidx.lifecycle.lifecycleScope
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import io.heckel.ntfy.R
 import io.heckel.ntfy.db.Repository
 import kotlinx.coroutines.Dispatchers
@@ -74,7 +75,7 @@ class NotificationFragment : DialogFragment() {
         muteForeverButton = view.findViewById(R.id.notification_dialog_forever)
         muteForeverButton.setOnClickListener{ onClick(Repository.MUTED_UNTIL_FOREVER) }
 
-        return AlertDialog.Builder(activity)
+        return MaterialAlertDialogBuilder(requireContext())
             .setView(view)
             .create()
     }

app/src/main/java/io/heckel/ntfy/ui/SettingsActivity.kt

@@ -23,6 +23,7 @@ import androidx.fragment.app.DialogFragment
 import androidx.lifecycle.lifecycleScope
 import androidx.preference.*
 import androidx.preference.Preference.OnPreferenceClickListener
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.google.gson.Gson
 import io.heckel.ntfy.BuildConfig
 import io.heckel.ntfy.R
@@ -658,7 +659,7 @@ class SettingsActivity : AppCompatActivity(), PreferenceFragmentCompat.OnPrefere
             } else {
                 getString(R.string.settings_advanced_export_logs_scrub_dialog_empty)
             }
-            val dialog = AlertDialog.Builder(activity)
+            val dialog = MaterialAlertDialogBuilder(requireContext())
                 .setTitle(title)
                 .setMessage(scrubbedText)
                 .setPositiveButton(R.string.settings_advanced_export_logs_scrub_dialog_button_ok) { _, _ -> /* Nothing */ }

app/src/main/java/io/heckel/ntfy/ui/UserFragment.kt

@@ -9,6 +9,7 @@ import android.view.WindowManager
 import android.widget.Button
 import android.widget.TextView
 import androidx.fragment.app.DialogFragment
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.google.android.material.textfield.TextInputEditText
 import io.heckel.ntfy.R
 import io.heckel.ntfy.db.User
@@ -75,7 +76,7 @@ class UserFragment : DialogFragment() {
         }
 
         // Build dialog
-        val builder = AlertDialog.Builder(activity)
+        val builder = MaterialAlertDialogBuilder(requireContext())
             .setView(view)
             .setPositiveButton(positiveButtonTextResId) { _, _ ->
                 saveClicked()

app/src/main/java/io/heckel/ntfy/util/Util.kt

@@ -501,7 +501,7 @@ fun Button.dangerButton(context: Context) {
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
         setTextAppearance(R.style.DangerText)
     } else {
-        setTextColor(ContextCompat.getColor(context, Colors.dangerText(context)))
+        setTextColor(Colors.dangerText(context))
     }
 }
 

app/src/main/res/drawable/ic_notifications_off_time_white_outline_24dp.xml

@@ -1,6 +1,7 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
+    android:tint="?attr/colorControlNormal"
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path

app/src/main/res/drawable/ic_notifications_off_white_outline_24dp.xml

@@ -1,6 +1,7 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
+    android:tint="?attr/colorControlNormal"
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path

app/src/main/res/drawable/ic_notifications_white_24dp.xml

@@ -1,6 +1,7 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
+    android:tint="?attr/colorControlNormal"
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path

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

@@ -40,6 +40,7 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content" android:hint="@string/share_content_text_hint"
                 android:importantForAutofill="no"
+                android:backgroundTint="?attr/colorPrimary"
                 app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
                 android:lines="10" android:gravity="start|top" app:layout_constraintTop_toBottomOf="@id/share_content_image" android:minLines="1" android:layout_marginTop="5dp"/>
         <androidx.constraintlayout.widget.ConstraintLayout
@@ -86,6 +87,7 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content" android:hint="@string/add_dialog_topic_name_hint"
                 android:importantForAutofill="no"
+                android:backgroundTint="?attr/colorPrimary"
                 android:maxLines="1" android:inputType="text|textNoSuggestions" android:maxLength="64"
                 app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintTop_toBottomOf="@id/share_topic_title" android:layout_marginStart="-3dp"/>

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

@@ -47,6 +47,7 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content" android:hint="@string/add_dialog_topic_name_hint"
                 android:importantForAutofill="no"
+                android:backgroundTint="?attr/colorPrimary"
                 android:maxLines="1" android:inputType="text" android:maxLength="64"
                 app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintTop_toBottomOf="@id/add_dialog_subscribe_description"/>
@@ -187,6 +188,7 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content" android:hint="@string/add_dialog_login_username_hint"
                 android:importantForAutofill="no"
+                android:backgroundTint="?attr/colorPrimary"
                 android:maxLines="1" android:inputType="text" android:maxLength="64"
                 app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
                 android:layout_marginTop="10dp" app:layout_constraintTop_toBottomOf="@+id/add_dialog_login_description"/>
@@ -195,6 +197,7 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content" android:hint="@string/add_dialog_login_password_hint"
                 android:importantForAutofill="no"
+                android:backgroundTint="?attr/colorPrimary"
                 android:maxLines="1" android:inputType="textPassword" app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintTop_toBottomOf="@id/add_dialog_login_username"/>

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

@@ -32,6 +32,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content" android:hint="@string/user_dialog_base_url_hint"
             android:importantForAutofill="no"
+            android:backgroundTint="?attr/colorPrimary"
             android:maxLines="1" android:inputType="text"
             app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
             android:layout_marginTop="6dp" app:layout_constraintTop_toBottomOf="@id/user_dialog_description"/>
@@ -40,6 +41,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content" android:hint="@string/user_dialog_username_hint"
             android:importantForAutofill="no"
+            android:backgroundTint="?attr/colorPrimary"
             android:maxLines="1" android:inputType="text"
             app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
             android:layout_marginTop="6dp" app:layout_constraintTop_toBottomOf="@id/user_dialog_base_url"/>

app/src/main/res/values-night/styles.xml

@@ -10,7 +10,7 @@
         - https://developer.android.com/guide/topics/ui/look-and-feel/themes
    -->
 
-    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="AppTheme" parent="Theme.Material3.DayNight">
         <item name="colorPrimary">@color/teal_light</item>
         <item name="colorAccent">@color/teal_light</item> <!-- checkboxes, text fields -->
         <item name="android:colorBackground">@color/black_900</item> <!-- background -->
@@ -26,16 +26,9 @@
         <item name="android:textColor">@color/red_light</item>
     </style>
 
-    <style name="FloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
+    <style name="FloatingActionButton" parent="@style/Widget.Material3.FloatingActionButton.Primary" />
-        <item name="tint">@color/black_900</item>
-        <item name="backgroundTint">@color/teal_light</item>
-    </style>
 
-    <style name="CardView" parent="@style/Widget.MaterialComponents.CardView">
+    <style name="CardView" parent="@style/Widget.Material3.CardView.Elevated" />
-        <item name="cardBackgroundColor">@color/black_800b</item>
-    </style>
 
-    <style name="CardViewBackground">
+    <style name="CardViewBackground" />
-        <item name="android:background">@color/black_900</item>
-    </style>
 </resources>

app/src/main/res/values/styles.xml

@@ -1,29 +1,22 @@
 <resources>
     <!-- Main app theme; dark theme styles see values-night/styles.xml -->
-    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="AppTheme" parent="Theme.Material3.DayNight">
         <item name="colorPrimary">@color/teal</item>
-        <item name="colorAccent">@color/teal</item> <!-- checkboxes, text fields -->
+        <item name="colorSecondary">@color/teal</item> <!-- checkboxes, text fields -->
         <item name="android:colorBackground">@color/white</item> <!-- background -->
         <item name="android:statusBarColor">@color/teal</item>
         <item name="actionModeBackground">@color/teal_dark</item>
     </style>
 
     <style name="DangerText" parent="@android:style/TextAppearance">
-        <item name="android:textColor">@color/red_dark</item>
+        <item name="android:textColor">?attr/colorError</item>
     </style>
 
-    <style name="FloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
+    <style name="FloatingActionButton" parent="@style/Widget.Material3.FloatingActionButton.Primary" />
-        <item name="tint">@color/white</item>
-        <item name="backgroundTint">@color/teal</item>
-    </style>
 
-    <style name="CardView" parent="@style/Widget.MaterialComponents.CardView">
+    <style name="CardView" parent="@style/Widget.Material3.CardView.Elevated" />
-        <item name="cardBackgroundColor">@color/white</item>
-    </style>
 
-    <style name="CardViewBackground">
+    <style name="CardViewBackground" />
-        <item name="android:background">@color/gray_400</item>
-    </style>
 
     <!-- Rounded corners in images, see https://stackoverflow.com/a/61960983/1440785 -->
     <style name="roundedCornersImageView" parent="">