Merge pull request #13 from TradeMe/dark-mode

Add Dark Mode support to Konfigure-Android
TradeMe · Mar 11, 2020 · c6d0c8d · c6d0c8d
2 parents 0611156 + 27203b8
commit c6d0c8d
Show file tree

Hide file tree

Showing 21 changed files with 87 additions and 72 deletions.
diff --git a/common.gradle b/common.gradle
@@ -1,4 +1,4 @@
-ext.version = "1.0.0"
+ext.version = "1.1.0"
 ext.group = "nz.co.trademe.konfigure"
 ext.repo = "Konfigure"
 ext.org = "trademe"

diff --git a/konfigure-android/build.gradle b/konfigure-android/build.gradle
@@ -36,7 +36,7 @@ dependencies {
     implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.3'
 
     implementation 'androidx.appcompat:appcompat:1.1.0'
-    implementation 'com.google.android.material:material:1.0.0'
+    implementation 'com.google.android.material:material:1.1.0'
     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
     implementation "androidx.lifecycle:lifecycle-extensions:2.1.0"
 }
diff --git a/konfigure-android/src/main/AndroidManifest.xml b/konfigure-android/src/main/AndroidManifest.xml
@@ -3,7 +3,6 @@
 
     <application>
         <activity
-            android:name=".ui.ConfigActivity"
-            android:theme="@style/Theme.Config.NoActionBar" />
+            android:name=".ui.ConfigActivity" />
     </application>
 </manifest>
diff --git a/.../src/main/java/nz/co/trademe/konfigure/android/ui/adapter/viewholder/DividerViewHolder.kt b/.../src/main/java/nz/co/trademe/konfigure/android/ui/adapter/viewholder/DividerViewHolder.kt
@@ -1,8 +1,14 @@
 package nz.co.trademe.konfigure.android.ui.adapter.viewholder
 
 import android.view.ViewGroup
+import androidx.appcompat.content.res.AppCompatResources
 import nz.co.trademe.konfigure.android.R
 
 internal class DividerViewHolder(
     parent: ViewGroup
-) : BaseViewHolder(parent.inflate(R.layout.view_holder_divider))
+) : BaseViewHolder(parent.inflate(R.layout.view_holder_divider)) {
+
+    init {
+        itemView.setBackgroundColor(AppCompatResources.getColorStateList(itemView.context, R.color.color_divider).defaultColor)
+    }
+}
diff --git a/konfigure-android/src/main/res/color/color_divider.xml b/konfigure-android/src/main/res/color/color_divider.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:alpha="0.18" android:color="?colorOnSurface"/>
+</selector>
diff --git a/konfigure-android/src/main/res/layout/activity_config.xml b/konfigure-android/src/main/res/layout/activity_config.xml
@@ -2,9 +2,10 @@
 <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
+    tools:theme="@style/Theme.MaterialComponents.DayNight"
+    android:background="?android:colorBackground"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@color/black_5pc">
+    android:layout_height="match_parent">
 
     <LinearLayout
         android:id="@+id/emptyStateLayout"
@@ -14,15 +15,16 @@
         android:layout_marginTop="128dp"
         android:orientation="vertical"
         android:visibility="gone"
-        tools:visibility="visible"
-        tools:ignore="UseCompoundDrawables">
+        tools:ignore="UseCompoundDrawables"
+        tools:visibility="visible">
 
         <ImageView
             android:layout_width="54dp"
             android:layout_height="54dp"
             android:layout_gravity="center"
+            android:alpha="0.54"
             android:contentDescription="@null"
-            android:tint="@color/black_54pc"
+            android:tint="?colorOnSurface"
             android:tintMode="src_in"
             app:srcCompat="@drawable/ic_search_black_24dp"
             tools:targetApi="lollipop" />
@@ -31,8 +33,8 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="16dp"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
-            android:text="@string/no_results_found" />
+            android:text="@string/no_results_found"
+            android:textAppearance="@style/TextAppearance.MaterialComponents.Body1" />
     </LinearLayout>
 
     <nz.co.trademe.konfigure.android.ui.view.ConfigView
@@ -45,13 +47,16 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
 
-        <androidx.appcompat.widget.Toolbar
+        <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            android:elevation="4dp"
             android:minHeight="?actionBarSize"
-            android:theme="@style/MainToolbar"
-            app:layout_scrollFlags="scroll|enterAlways" />
+            style="@style/Widget.MaterialComponents.Toolbar.PrimarySurface"
+            android:theme="@style/ThemeOverlay.Konfigure.Toolbar.PrimarySurface"
+            app:layout_scrollFlags="scroll|enterAlways"
+            tools:targetApi="lollipop" />
 
     </com.google.android.material.appbar.AppBarLayout>
 

diff --git a/konfigure-android/src/main/res/layout/edit_config_dialog.xml b/konfigure-android/src/main/res/layout/edit_config_dialog.xml
@@ -9,8 +9,10 @@
 
     <com.google.android.material.textfield.TextInputLayout
         android:id="@+id/configTextInputLayout"
+        android:layout_marginTop="8dp"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:layout_height="wrap_content"
+        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
 
         <com.google.android.material.textfield.TextInputEditText
             android:id="@+id/configTextInputEditText"

diff --git a/konfigure-android/src/main/res/layout/view_holder_boolean.xml b/konfigure-android/src/main/res/layout/view_holder_boolean.xml
@@ -4,9 +4,9 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@color/white"
     android:clickable="true"
     android:focusable="true"
+    android:background="?colorSurface"
     android:foreground="?selectableItemBackground"
     android:orientation="horizontal"
     android:padding="16dp">

diff --git a/konfigure-android/src/main/res/layout/view_holder_divider.xml b/konfigure-android/src/main/res/layout/view_holder_divider.xml
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <View xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="1dp"
-    android:background="@color/black_18pc"/>
+    android:layout_height="1dp"/>
diff --git a/konfigure-android/src/main/res/layout/view_holder_header.xml b/konfigure-android/src/main/res/layout/view_holder_header.xml
@@ -3,7 +3,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="#FFFFFF"
+    android:background="?colorSurface"
     android:orientation="vertical">
 
     <TextView

diff --git a/konfigure-android/src/main/res/layout/view_holder_number.xml b/konfigure-android/src/main/res/layout/view_holder_number.xml
@@ -3,9 +3,9 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@color/white"
     android:clickable="true"
     android:focusable="true"
+    android:background="?colorSurface"
     android:foreground="?selectableItemBackground"
     android:orientation="vertical"
     android:padding="16dp">
@@ -33,7 +33,7 @@
         android:ellipsize="end"
         android:maxLines="1"
         android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
-        android:textColor="@color/black_54pc"
+        android:textColor="?android:textColorSecondary"
         tools:text="1234" />
 
 </LinearLayout>
diff --git a/konfigure-android/src/main/res/layout/view_holder_reset_to_default.xml b/konfigure-android/src/main/res/layout/view_holder_reset_to_default.xml
@@ -5,7 +5,7 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginBottom="8dp"
-    android:background="@color/white">
+    android:background="?colorSurface">
 
     <TextView
         android:id="@+id/descriptionTextView"
@@ -40,7 +40,6 @@
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="1.0"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:strokeColor="?colorAccent" />
+        app:layout_constraintTop_toTopOf="parent"/>
 
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/konfigure-android/src/main/res/layout/view_holder_string.xml b/konfigure-android/src/main/res/layout/view_holder_string.xml
@@ -3,10 +3,10 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@color/white"
     android:clickable="true"
     android:focusable="true"
     android:foreground="?selectableItemBackground"
+    android:background="?colorSurface"
     android:orientation="vertical"
     android:padding="16dp">
 
@@ -33,7 +33,7 @@
         android:ellipsize="end"
         android:maxLines="1"
         android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
-        android:textColor="@color/black_54pc"
+        android:textColor="?android:textColorSecondary"
         tools:text="Current value: '{'0001': [4, 10]}'" />
 
 </LinearLayout>
diff --git a/konfigure-android/src/main/res/menu/menu_config.xml b/konfigure-android/src/main/res/menu/menu_config.xml
@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
-      xmlns:app="http://schemas.android.com/apk/res-auto">
+    xmlns:app="http://schemas.android.com/apk/res-auto">
     <item
         android:id="@+id/action_search"
         android:icon="@drawable/ic_search_black_24dp"
-        app:showAsAction="always|collapseActionView"
+        android:title="@string/search"
+        app:iconTint="?colorOnPrimarySurface"
         app:actionViewClass="androidx.appcompat.widget.SearchView"
-        android:title="@string/search"/>
+        app:showAsAction="always|collapseActionView" />
 </menu>
diff --git a/konfigure-android/src/main/res/values/colors.xml b/konfigure-android/src/main/res/values/colors.xml
diff --git a/konfigure-android/src/main/res/values/styles.xml b/konfigure-android/src/main/res/values/styles.xml
diff --git a/konfigure-android/src/main/res/values/theme_overlays.xml b/konfigure-android/src/main/res/values/theme_overlays.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="ThemeOverlay.Konfigure.Toolbar.PrimarySurface" parent="">
+        <item name="colorControlNormal">?colorOnPrimarySurface</item>
+        <item name="actionMenuTextColor">?colorOnPrimarySurface</item>
+    </style>
+</resources>
diff --git a/sample/build.gradle b/sample/build.gradle
@@ -28,7 +28,7 @@ dependencies {
     implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$versions.kotlin"
 
     implementation 'androidx.appcompat:appcompat:1.0.2'
-    implementation 'com.google.android.material:material:1.0.0'
+    implementation 'com.google.android.material:material:1.1.0'
 
     implementation 'androidx.core:core-ktx:1.0.2'
     implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.2.0-alpha03'

diff --git a/sample/src/main/res/values-night/styles.xml b/sample/src/main/res/values-night/styles.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:tools="http://schemas.android.com/tools">
+
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
+        <item name="colorPrimary">@color/purple_300</item>
+        <item name="colorPrimaryDark">@color/purple_300_dark</item>
+        <item name="colorAccent">@color/light_blue_200</item>
+        <item name="android:statusBarColor" tools:targetApi="lollipop">?colorSurface</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+    </style>
+
+</resources>
diff --git a/sample/src/main/res/values/colors.xml b/sample/src/main/res/values/colors.xml
@@ -1,6 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="colorPrimary">#008577</color>
-    <color name="colorPrimaryDark">#00574B</color>
-    <color name="colorAccent">#D81B60</color>
+    <!-- Light mode -->
+    <color name="purple_600">#8e24aa</color>
+    <color name="purple_600_dark">#5c007a</color>
+    <color name="light_blue_500">#03a9f4</color>
+
+    <!-- Dark mode -->
+    <color name="purple_300">#ba68c8</color>
+    <color name="purple_300_dark">#883997</color>
+    <color name="light_blue_200">#81d4fa</color>
+
 </resources>
diff --git a/sample/src/main/res/values/styles.xml b/sample/src/main/res/values/styles.xml
@@ -1,18 +1,14 @@
 <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 name="AppTheme" parent="Theme.MaterialComponents.DayNight">
+        <item name="colorPrimary">@color/purple_600</item>
+        <item name="colorPrimaryDark">@color/purple_600_dark</item>
+        <item name="colorAccent">@color/light_blue_500</item>
     </style>
 
-    <style name="AppTheme.NoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar">
-        <!-- Customize your theme here. -->
-        <item name="colorPrimary">@color/colorPrimary</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-        <item name="colorAccent">@color/colorAccent</item>
+    <style name="AppTheme.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
     </style>
 
 </resources>