Migrate main app UI to Material Design 3

This commit is contained in:
Bnyro 2023-03-30 18:27:16 +02:00
parent c296ef4e7e
commit ed8128ba87
19 changed files with 63 additions and 69 deletions

View file

@ -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"

View file

@ -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()
}
}

View file

@ -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

View file

@ -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
}
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
return SurfaceColors.getColorForElevation(context, 10f)
}
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)
}
}
}

View file

@ -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 = builder
val dialog = MaterialAlertDialogBuilder(this)
.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 = builder
val dialog = MaterialAlertDialogBuilder(this)
.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 = builder
val dialog = MaterialAlertDialogBuilder(this)
.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))
val toColor = ContextCompat.getColor(this, Colors.statusBarActionMode(this))
fadeStatusBarColor(window, fromColor, toColor)
fadeStatusBarColor(window, Colors.statusBarNormal(this), Colors.statusBarActionMode(this))
}
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))
val toColor = ContextCompat.getColor(this, Colors.statusBarNormal(this))
fadeStatusBarColor(window, fromColor, toColor)
fadeStatusBarColor(window, Colors.statusBarActionMode(this), Colors.statusBarNormal(this))
}
companion object {

View file

@ -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 = builder
val dialog = MaterialAlertDialogBuilder(this)
.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))
val toColor = ContextCompat.getColor(this, Colors.statusBarActionMode(this))
fadeStatusBarColor(window, fromColor, toColor)
fadeStatusBarColor(window, Colors.statusBarNormal(this), Colors.statusBarActionMode(this))
}
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))
val toColor = ContextCompat.getColor(this, Colors.statusBarNormal(this))
fadeStatusBarColor(window, fromColor, toColor)
fadeStatusBarColor(window, Colors.statusBarActionMode(this), Colors.statusBarNormal(this))
}
private fun redrawList() {

View file

@ -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)
}

View file

@ -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()
}

View file

@ -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 */ }

View file

@ -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()

View file

@ -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))
}
}

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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"/>

View file

@ -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"/>

View file

@ -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"/>

View file

@ -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">
<item name="tint">@color/black_900</item>
<item name="backgroundTint">@color/teal_light</item>
</style>
<style name="FloatingActionButton" parent="@style/Widget.Material3.FloatingActionButton.Primary" />
<style name="CardView" parent="@style/Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">@color/black_800b</item>
</style>
<style name="CardView" parent="@style/Widget.Material3.CardView.Elevated" />
<style name="CardViewBackground">
<item name="android:background">@color/black_900</item>
</style>
<style name="CardViewBackground" />
</resources>

View file

@ -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">
<item name="tint">@color/white</item>
<item name="backgroundTint">@color/teal</item>
</style>
<style name="FloatingActionButton" parent="@style/Widget.Material3.FloatingActionButton.Primary" />
<style name="CardView" parent="@style/Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">@color/white</item>
</style>
<style name="CardView" parent="@style/Widget.Material3.CardView.Elevated" />
<style name="CardViewBackground">
<item name="android:background">@color/gray_400</item>
</style>
<style name="CardViewBackground" />
<!-- Rounded corners in images, see https://stackoverflow.com/a/61960983/1440785 -->
<style name="roundedCornersImageView" parent="">