feat(UI): migrate to Material Design 3

.editorconfig

@@ -1,11 +1,14 @@
 root = true
 
 [*]
-indent_size=2
-end_of_line=lf
-charset=utf-8
-trim_trailing_whitespace=true
-insert_final_newline=true
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
 
 [*.{kt,kts}]
-ij_kotlin_imports_layout=*
+ij_kotlin_imports_layout = *
+
+[*.xml]
+indent_size = 4

app/build.gradle.kts

@@ -66,6 +66,7 @@ dependencies {
 
   implementation(deps.coroutines.android)
   implementation(deps.koin.android)
+  implementation(deps.androidx.material)
 
   debugImplementation(deps.squareup.leakCanary)
   implementation(deps.timber)

app/src/main/java/com/hoc/flowmvi/App.kt

@@ -1,6 +1,7 @@
 package com.hoc.flowmvi
 
 import android.app.Application
+import com.google.android.material.color.DynamicColors
 import com.hoc.flowmvi.core.coreModule
 import com.hoc.flowmvi.data.dataModule
 import com.hoc.flowmvi.domain.domainModule
@@ -20,6 +21,7 @@ import kotlin.time.ExperimentalTime
 @ExperimentalCoroutinesApi
 @ExperimentalStdlibApi
 @ExperimentalTime
+@JvmField
 val allModules = listOf(
   coreModule,
   dataModule,
@@ -38,6 +40,8 @@ class App : Application() {
   override fun onCreate() {
     super.onCreate()
 
+    DynamicColors.applyToActivitiesIfAvailable(this)
+
     if (BuildConfig.DEBUG) {
       Timber.plant(Timber.DebugTree())
     } else {

buildSrc/src/main/kotlin/deps.kt

@@ -32,7 +32,7 @@ object deps {
     const val constraintLayout = "androidx.constraintlayout:constraintlayout:2.1.1"
     const val recyclerView = "androidx.recyclerview:recyclerview:1.2.1"
     const val swipeRefreshLayout = "androidx.swiperefreshlayout:swiperefreshlayout:1.2.0-alpha01"
-    const val material = "com.google.android.material:material:1.4.0"
+    const val material = "com.google.android.material:material:1.6.0-alpha02"
   }
 
   object lifecycle {

core-ui/src/main/java/com/hoc/flowmvi/core_ui/ContextExtensions.kt

@@ -0,0 +1,12 @@
+package com.hoc.flowmvi.core_ui
+
+import android.content.Context
+import android.widget.Toast
+import androidx.annotation.Px
+
+@Suppress("NOTHING_TO_INLINE")
+inline fun Context.toast(text: CharSequence) = Toast.makeText(this, text, Toast.LENGTH_SHORT).show()
+
+@Px
+@Suppress("NOTHING_TO_INLINE")
+inline fun Context.dpToPx(dp: Float): Int = (dp * resources.displayMetrics.density).toInt()

core-ui/src/main/java/com/hoc/flowmvi/core_ui/FlowBinding.kt

@@ -1,10 +1,8 @@
 package com.hoc.flowmvi.core_ui
 
-import android.content.Context
 import android.os.Looper
 import android.view.View
 import android.widget.EditText
-import android.widget.Toast
 import androidx.annotation.CheckResult
 import androidx.appcompat.widget.SearchView
 import androidx.core.widget.doOnTextChanged
@@ -121,5 +119,3 @@ fun EditText.textChanges(): Flow<CharSequence?> {
     awaitClose { removeTextChangedListener(listener) }
   }.onStart { emit(text) }
 }
-
-fun Context.toast(text: CharSequence) = Toast.makeText(this, text, Toast.LENGTH_SHORT).show()

core-ui/src/main/java/com/hoc/flowmvi/core_ui/SwipeLeftToDeleteCallback.kt

@@ -2,22 +2,26 @@ package com.hoc.flowmvi.core_ui
 
 import android.content.Context
 import android.graphics.Canvas
-import android.graphics.Color
 import android.graphics.drawable.ColorDrawable
-import androidx.core.content.ContextCompat
+import androidx.core.content.ContextCompat.getColor
+import androidx.core.content.ContextCompat.getDrawable
 import androidx.recyclerview.widget.ItemTouchHelper
 import androidx.recyclerview.widget.RecyclerView
+import kotlin.LazyThreadSafetyMode.NONE
 
 class SwipeLeftToDeleteCallback(context: Context, private val onSwipedCallback: (Int) -> Unit) :
   ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT) {
-  private val background: ColorDrawable = ColorDrawable(Color.parseColor("#f44336"))
-  private val iconDelete =
-    ContextCompat.getDrawable(context, R.drawable.ic_baseline_delete_white_24)!!
+  private val background: ColorDrawable by lazy(NONE) {
+    ColorDrawable(getColor(context, R.color.swipe_to_delete_background_color))
+  }
+  private val iconDelete by lazy(NONE) {
+    getDrawable(context, R.drawable.ic_baseline_delete_white_24)!!
+  }
 
   override fun onMove(
     recyclerView: RecyclerView,
     viewHolder: RecyclerView.ViewHolder,
-    target: RecyclerView.ViewHolder
+    target: RecyclerView.ViewHolder,
   ) = false
 
   override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
@@ -34,7 +38,7 @@ class SwipeLeftToDeleteCallback(context: Context, private val onSwipedCallback:
     dX: Float,
     dY: Float,
     actionState: Int,
-    isCurrentlyActive: Boolean
+    isCurrentlyActive: Boolean,
   ) {
     super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)
     val itemView = viewHolder.itemView
@@ -56,7 +60,10 @@ class SwipeLeftToDeleteCallback(context: Context, private val onSwipedCallback:
           itemView.bottom
         )
       }
-      else -> background.setBounds(0, 0, 0, 0)
+      else -> {
+        background.setBounds(0, 0, 0, 0)
+        iconDelete.setBounds(0, 0, 0, 0)
+      }
     }
     background.draw(c)
     iconDelete.draw(c)

core-ui/src/main/res/values-night/themes.xml

@@ -0,0 +1,31 @@
+<resources>
+
+    <style name="AppTheme" parent="Theme.Material3.DayNight">
+        <item name="colorPrimary">@color/md_theme_dark_primary</item>
+        <item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
+        <item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
+        <item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
+        <item name="colorSecondary">@color/md_theme_dark_secondary</item>
+        <item name="colorOnSecondary">@color/md_theme_dark_onSecondary</item>
+        <item name="colorSecondaryContainer">@color/md_theme_dark_secondaryContainer</item>
+        <item name="colorOnSecondaryContainer">@color/md_theme_dark_onSecondaryContainer</item>
+        <item name="colorTertiary">@color/md_theme_dark_tertiary</item>
+        <item name="colorOnTertiary">@color/md_theme_dark_onTertiary</item>
+        <item name="colorTertiaryContainer">@color/md_theme_dark_tertiaryContainer</item>
+        <item name="colorOnTertiaryContainer">@color/md_theme_dark_onTertiaryContainer</item>
+        <item name="colorError">@color/md_theme_dark_error</item>
+        <item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
+        <item name="colorOnError">@color/md_theme_dark_onError</item>
+        <item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
+        <item name="android:colorBackground">@color/md_theme_dark_background</item>
+        <item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
+        <item name="colorSurface">@color/md_theme_dark_surface</item>
+        <item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
+        <item name="colorSurfaceVariant">@color/md_theme_dark_surfaceVariant</item>
+        <item name="colorOnSurfaceVariant">@color/md_theme_dark_onSurfaceVariant</item>
+        <item name="colorOutline">@color/md_theme_dark_outline</item>
+        <item name="colorOnSurfaceInverse">@color/md_theme_dark_inverseOnSurface</item>
+        <item name="colorSurfaceInverse">@color/md_theme_dark_inverseSurface</item>
+        <item name="colorPrimaryInverse">@color/md_theme_dark_primaryInverse</item>
+    </style>
+</resources>

core-ui/src/main/res/values/colors.xml

@@ -1,6 +1,58 @@
-<?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="colorPrimary">#6200EE</color>
-    <color name="colorPrimaryDark">#3700B3</color>
-    <color name="colorAccent">#03DAC5</color>
+    <color name="md_theme_light_primary">#6750A4</color>
+    <color name="md_theme_light_onPrimary">#FFFFFF</color>
+    <color name="md_theme_light_primaryContainer">#EADDFF</color>
+    <color name="md_theme_light_onPrimaryContainer">#21005D</color>
+    <color name="md_theme_light_secondary">#625B71</color>
+    <color name="md_theme_light_onSecondary">#FFFFFF</color>
+    <color name="md_theme_light_secondaryContainer">#E8DEF8</color>
+    <color name="md_theme_light_onSecondaryContainer">#1D192B</color>
+    <color name="md_theme_light_tertiary">#7D5260</color>
+    <color name="md_theme_light_onTertiary">#FFFFFF</color>
+    <color name="md_theme_light_tertiaryContainer">#FFD8E4</color>
+    <color name="md_theme_light_onTertiaryContainer">#31111D</color>
+    <color name="md_theme_light_error">#B3261E</color>
+    <color name="md_theme_light_errorContainer">#F9DEDC</color>
+    <color name="md_theme_light_onError">#FFFFFF</color>
+    <color name="md_theme_light_onErrorContainer">#410E0B</color>
+    <color name="md_theme_light_background">#FFFBFE</color>
+    <color name="md_theme_light_onBackground">#1C1B1F</color>
+    <color name="md_theme_light_surface">#FFFBFE</color>
+    <color name="md_theme_light_onSurface">#1C1B1F</color>
+    <color name="md_theme_light_surfaceVariant">#E7E0EC</color>
+    <color name="md_theme_light_onSurfaceVariant">#49454F</color>
+    <color name="md_theme_light_outline">#9A989C</color>
+    <color name="md_theme_light_inverseOnSurface">#F4EFF4</color>
+    <color name="md_theme_light_inverseSurface">#313033</color>
+    <color name="md_theme_light_primaryInverse">#D0BCFF</color>
+
+    <color name="md_theme_dark_primary">#D0BCFF</color>
+    <color name="md_theme_dark_onPrimary">#381E72</color>
+    <color name="md_theme_dark_primaryContainer">#4F378B</color>
+    <color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
+    <color name="md_theme_dark_secondary">#CCC2DC</color>
+    <color name="md_theme_dark_onSecondary">#332D41</color>
+    <color name="md_theme_dark_secondaryContainer">#4A4458</color>
+    <color name="md_theme_dark_onSecondaryContainer">#E8DEF8</color>
+    <color name="md_theme_dark_tertiary">#EFB8C8</color>
+    <color name="md_theme_dark_onTertiary">#492532</color>
+    <color name="md_theme_dark_tertiaryContainer">#633B48</color>
+    <color name="md_theme_dark_onTertiaryContainer">#FFD8E4</color>
+    <color name="md_theme_dark_error">#F2B8B5</color>
+    <color name="md_theme_dark_errorContainer">#8C1D18</color>
+    <color name="md_theme_dark_onError">#601410</color>
+    <color name="md_theme_dark_onErrorContainer">#F9DEDC</color>
+    <color name="md_theme_dark_background">#1C1B1F</color>
+    <color name="md_theme_dark_onBackground">#E6E1E5</color>
+    <color name="md_theme_dark_surface">#1C1B1F</color>
+    <color name="md_theme_dark_onSurface">#E6E1E5</color>
+    <color name="md_theme_dark_surfaceVariant">#49454F</color>
+    <color name="md_theme_dark_onSurfaceVariant">#CAC4D0</color>
+    <color name="md_theme_dark_outline">#6D6775</color>
+    <color name="md_theme_dark_inverseOnSurface">#1C1B1F</color>
+    <color name="md_theme_dark_inverseSurface">#E6E1E5</color>
+    <color name="md_theme_dark_primaryInverse">#6750A4</color>
+    <color name="seed">#6750A4</color>
+    <color name="error">#B3261E</color>
+    <color name="swipe_to_delete_background_color">#f44336</color>
 </resources>

core-ui/src/main/res/values/styles.xml

@@ -1,11 +1 @@
-<resources>
-
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
-        <!-- Customize your theme here. -->
-        <item name="colorPrimary">@color/colorPrimary</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-        <item name="colorAccent">@color/colorAccent</item>
-    </style>
-
-</resources>
+<resources />