From 523bf092db78ef87283ec06ae8c450baf68af357 Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Thu, 28 Apr 2022 22:04:46 -0400
Subject: [PATCH] Dark mode, proper alignment

---
 .../java/io/heckel/ntfy/ui/MainAdapter.kt     |   8 +-
 app/src/main/res/layout/activity_detail.xml   |   1 +
 app/src/main/res/layout/activity_main.xml     |  28 +--
 .../main/res/layout/fragment_detail_item.xml  |  11 +-
 .../main/res/layout/fragment_main_item.xml    | 169 ++++++++----------
 app/src/main/res/values-night/styles.xml      |   8 +
 app/src/main/res/values/colors.xml            |   1 +
 app/src/main/res/values/styles.xml            |  17 +-
 8 files changed, 116 insertions(+), 127 deletions(-)

diff --git a/app/src/main/java/io/heckel/ntfy/ui/MainAdapter.kt b/app/src/main/java/io/heckel/ntfy/ui/MainAdapter.kt
index 02000d2..d0d41f9 100644
--- a/app/src/main/java/io/heckel/ntfy/ui/MainAdapter.kt
+++ b/app/src/main/java/io/heckel/ntfy/ui/MainAdapter.kt
@@ -5,7 +5,6 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
-import androidx.cardview.widget.CardView
 import androidx.recyclerview.widget.DiffUtil
 import androidx.recyclerview.widget.ListAdapter
 import androidx.recyclerview.widget.RecyclerView
@@ -48,7 +47,6 @@ class MainAdapter(private val repository: Repository, private val onClick: (Subs
         RecyclerView.ViewHolder(itemView) {
         private var subscription: Subscription? = null
         private val context: Context = itemView.context
-        private val cardView: CardView = itemView.findViewById(R.id.main_item_card)
         private val nameView: TextView = itemView.findViewById(R.id.main_item_text)
         private val statusView: TextView = itemView.findViewById(R.id.main_item_status)
         private val dateView: TextView = itemView.findViewById(R.id.main_item_date)
@@ -99,10 +97,10 @@ class MainAdapter(private val repository: Repository, private val onClick: (Subs
                 newItemsView.visibility = View.VISIBLE
                 newItemsView.text = if (subscription.newCount <= 99) subscription.newCount.toString() else "99+"
             }
-            cardView.setOnClickListener { onClick(subscription) }
-            cardView.setOnLongClickListener { onLongClick(subscription); true }
+            itemView.setOnClickListener { onClick(subscription) }
+            itemView.setOnLongClickListener { onLongClick(subscription); true }
             if (selected.contains(subscription.id)) {
-                cardView.setCardBackgroundColor(Colors.itemSelectedBackgroundColor(context))
+                itemView.setBackgroundResource(Colors.itemSelectedBackground(context))
             }
         }
     }
diff --git a/app/src/main/res/layout/activity_detail.xml b/app/src/main/res/layout/activity_detail.xml
index 8f02bd6..9a7965c 100644
--- a/app/src/main/res/layout/activity_detail.xml
+++ b/app/src/main/res/layout/activity_detail.xml
@@ -8,6 +8,7 @@
         tools:context=".ui.DetailActivity"
 >
     <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
+            style="@style/SwipeRefreshLayoutWithCards"
             android:id="@+id/detail_notification_list_container"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index fa9976a..c286b50 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -1,18 +1,19 @@
 <?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"
-        xmlns:tools="http://schemas.android.com/tools"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
->
+<androidx.constraintlayout.widget.ConstraintLayout 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" android:layout_width="match_parent"
+                                                   android:layout_height="match_parent">
+
     <com.google.android.material.card.MaterialCardView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            app:shapeAppearance="?shapeAppearanceLargeComponent" app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent"
-            android:id="@+id/main_banner_battery" android:visibility="visible">
-
+            app:shapeAppearance="?shapeAppearanceLargeComponent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            android:id="@+id/main_banner_battery"
+            android:visibility="visible"
+    >
         <androidx.constraintlayout.widget.ConstraintLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
@@ -136,6 +137,7 @@
                     android:text="@string/main_banner_json_stream_button_dismiss"
                     tools:layout_editor_absoluteX="260dp" tools:layout_editor_absoluteY="83dp"/>
 
+
             <com.google.android.material.button.MaterialButton
                     android:id="@+id/main_banner_json_stream_learn_mode"
                     style="@style/Widget.MaterialComponents.Button.TextButton"
@@ -158,11 +160,11 @@
                 android:id="@+id/main_subscriptions_list"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
+                android:clickable="true"
+                android:focusable="true"
                 android:paddingTop="5dp"
                 android:paddingBottom="5dp"
                 android:clipToPadding="false"
-                android:clickable="true"
-                android:focusable="true"
                 android:background="?android:attr/selectableItemBackground"
                 app:layoutManager="LinearLayoutManager"/>
     </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
diff --git a/app/src/main/res/layout/fragment_detail_item.xml b/app/src/main/res/layout/fragment_detail_item.xml
index e079d43..990786c 100644
--- a/app/src/main/res/layout/fragment_detail_item.xml
+++ b/app/src/main/res/layout/fragment_detail_item.xml
@@ -2,6 +2,7 @@
 <androidx.cardview.widget.CardView
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
+        style="@style/CardView"
         android:id="@+id/detail_item_card"
         android:background="?android:attr/selectableItemBackground"
         android:clickable="true"
@@ -11,10 +12,8 @@
         android:layout_marginTop="0dp"
         android:layout_marginStart="6dp"
         android:layout_marginEnd="6dp"
-        android:layout_marginBottom="0dp"
+        android:layout_marginBottom="1dp"
         android:padding="3dp"
-        android:paddingBottom="3dp"
-        app:cardBackgroundColor="@color/white"
         app:cardCornerRadius="3dp"
         app:cardElevation="2dp"
         app:cardMaxElevation="2dp"
@@ -26,7 +25,7 @@
             android:orientation="horizontal"
             android:background="?android:attr/selectableItemBackground"
             android:focusable="true"
-            android:paddingBottom="5dp">
+            android:paddingBottom="6dp" android:paddingTop="6dp">
         <TextView
                 android:text="Sun, October 31, 2021, 10:43:12"
                 android:layout_width="wrap_content"
@@ -34,7 +33,7 @@
                 android:id="@+id/detail_item_date_text"
                 android:textAppearance="@style/TextAppearance.AppCompat.Small"
                 app:layout_constraintTop_toTopOf="parent"
-                android:layout_marginTop="10dp" app:layout_constraintStart_toStartOf="parent"
+                android:layout_marginTop="5dp" app:layout_constraintStart_toStartOf="parent"
                 android:layout_marginStart="10dp"/>
         <TextView
                 android:layout_width="10dp"
@@ -54,7 +53,7 @@
                 app:layout_constraintTop_toTopOf="parent"
                 app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="5dp"
                 android:background="?android:attr/selectableItemBackground" android:paddingTop="-5dp"
-                android:layout_marginTop="5dp"/>
+        />
         <TextView
                 android:text="This is a very very very long message. It could be as long as 1024 charaters, which is a lot more than you'd think. No, really so far this message is barely 180 characters long. I can't believe how long 1024 bytes are. This is outrageous. Oh you know what, I think I won't type the whole thing. This seems a little too long for a sample text. Well, anyway, it was nice chatting. So far this message is about 400 bytes long. So maybe just double what you see and that's that."
                 android:layout_width="0dp"
diff --git a/app/src/main/res/layout/fragment_main_item.xml b/app/src/main/res/layout/fragment_main_item.xml
index e258bd5..a494f03 100644
--- a/app/src/main/res/layout/fragment_main_item.xml
+++ b/app/src/main/res/layout/fragment_main_item.xml
@@ -1,96 +1,75 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.cardview.widget.CardView
-        xmlns:android="http://schemas.android.com/apk/res/android"
-        xmlns:app="http://schemas.android.com/apk/res-auto"
-        android:id="@+id/main_item_card"
-        android:background="?android:attr/selectableItemBackground"
-        android:clickable="true"
-        android:focusable="true"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="0dp"
-        android:layout_marginStart="6dp"
-        android:layout_marginEnd="6dp"
-        android:layout_marginBottom="0dp"
-        android:padding="0dp"
-        app:cardBackgroundColor="@color/white"
-        app:cardCornerRadius="3dp"
-        app:cardElevation="2dp"
-        app:cardMaxElevation="2dp"
-        app:cardPreventCornerOverlap="true"
-        app:cardUseCompatPadding="true">
-    <androidx.constraintlayout.widget.ConstraintLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:paddingEnd="15dp"
-            android:paddingStart="15dp"
-            android:background="?android:attr/selectableItemBackground"
-            android:focusable="true"
-            android:paddingBottom="3dp">
-        <ImageView
-                android:layout_width="35dp"
-                android:layout_height="35dp" app:srcCompat="@drawable/ic_sms_gray_24dp"
-                android:id="@+id/main_item_image" app:layout_constraintTop_toTopOf="parent"
-                app:layout_constraintStart_toStartOf="parent"
-                android:layout_marginTop="13dp"/>
-        <TextView
-                android:text="ntfy.sh/example"
-                android:layout_width="0dp"
-                android:layout_height="wrap_content" android:id="@+id/main_item_text"
-                app:layout_constraintTop_toTopOf="parent"
-                app:layout_constraintBottom_toTopOf="@+id/main_item_status"
-                android:layout_marginStart="10dp" app:layout_constraintStart_toEndOf="@+id/main_item_image"
-                app:layout_constraintVertical_bias="0.0" android:textAppearance="@style/TextAppearance.AppCompat.Medium"
-                android:textColor="?android:attr/textColorPrimary" android:layout_marginTop="10dp"
-                app:layout_constraintEnd_toStartOf="@+id/main_item_instant_image"/>
-        <TextView
-                android:text="89 notifications, reconnecting ... This may wrap in the case of UnifiedPush"
-                android:layout_width="0dp"
-                android:layout_height="wrap_content" android:id="@+id/main_item_status"
-                app:layout_constraintStart_toStartOf="@+id/main_item_text"
-                app:layout_constraintTop_toBottomOf="@+id/main_item_text" app:layout_constraintBottom_toBottomOf="parent"
-                android:layout_marginBottom="10dp" app:layout_constrainedWidth="true"
-                app:layout_constraintEnd_toStartOf="@id/main_item_new" android:layout_marginEnd="10dp"/>
-        <ImageView
-                android:layout_width="20dp"
-                android:layout_height="24dp" app:srcCompat="@drawable/ic_notifications_off_time_gray_outline_24dp"
-                android:id="@+id/main_item_notification_disabled_until_image"
-                app:layout_constraintTop_toTopOf="@+id/main_item_text"
-                app:layout_constraintEnd_toStartOf="@+id/main_item_notification_disabled_forever_image"
-                android:paddingTop="3dp" android:layout_marginEnd="3dp"/>
-        <ImageView
-                android:layout_width="20dp"
-                android:layout_height="24dp" app:srcCompat="@drawable/ic_notifications_off_gray_outline_24dp"
-                android:id="@+id/main_item_notification_disabled_forever_image"
-                app:layout_constraintTop_toTopOf="@+id/main_item_notification_disabled_until_image"
-                app:layout_constraintEnd_toStartOf="@+id/main_item_instant_image" android:paddingTop="3dp"
-                android:layout_marginEnd="3dp"/>
-        <ImageView
-                android:layout_width="20dp"
-                android:layout_height="24dp" app:srcCompat="@drawable/ic_bolt_gray_24dp"
-                android:id="@+id/main_item_instant_image"
-                app:layout_constraintTop_toTopOf="@+id/main_item_notification_disabled_forever_image"
-                app:layout_constraintEnd_toStartOf="@+id/main_item_date" android:paddingTop="3dp"/>
-        <TextView
-                android:text="10:13"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content" android:id="@+id/main_item_date"
-                app:layout_constraintTop_toTopOf="@+id/main_item_instant_image"
-                app:layout_constraintEnd_toEndOf="parent"
-                android:paddingTop="2dp"/>
-        <TextView
-                android:text="99+"
-                android:layout_width="24dp"
-                android:layout_height="24dp" android:id="@+id/main_item_new"
-                android:layout_marginTop="3dp"
-                android:layout_gravity="center"
-                android:background="@drawable/ic_circle"
-                android:gravity="center"
-                android:textColor="@android:color/white"
-                app:layout_constraintTop_toBottomOf="@+id/main_item_date"
-                app:layout_constraintEnd_toEndOf="@+id/main_item_date"
-                app:layout_constraintStart_toEndOf="@+id/main_item_instant_image"
-                android:textSize="10sp" android:textStyle="bold"/>
-    </androidx.constraintlayout.widget.ConstraintLayout>
-</androidx.cardview.widget.CardView>
+<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="match_parent"
+                                                   android:layout_height="wrap_content"
+                                                   android:background="?android:attr/selectableItemBackground"
+                                                   android:orientation="horizontal" android:clickable="true"
+                                                   android:focusable="true" android:paddingEnd="18dp"
+                                                   android:paddingStart="18dp">
+    <ImageView
+            android:layout_width="35dp"
+            android:layout_height="35dp" app:srcCompat="@drawable/ic_sms_gray_24dp"
+            android:id="@+id/main_item_image" app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            android:layout_marginTop="13dp"/>
+    <TextView
+            android:text="ntfy.sh/example"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content" android:id="@+id/main_item_text"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toTopOf="@+id/main_item_status"
+            android:layout_marginStart="12dp" app:layout_constraintStart_toEndOf="@+id/main_item_image"
+            app:layout_constraintVertical_bias="0.0" android:textAppearance="@style/TextAppearance.AppCompat.Medium"
+            android:textColor="?android:attr/textColorPrimary" android:layout_marginTop="10dp"
+            app:layout_constraintEnd_toStartOf="@+id/main_item_instant_image"/>
+    <TextView
+            android:text="89 notifications, reconnecting ... This may wrap in the case of UnifiedPush"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content" android:id="@+id/main_item_status"
+            app:layout_constraintStart_toStartOf="@+id/main_item_text"
+            app:layout_constraintTop_toBottomOf="@+id/main_item_text" app:layout_constraintBottom_toBottomOf="parent"
+            android:layout_marginBottom="10dp" app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toStartOf="@id/main_item_new" android:layout_marginEnd="10dp"/>
+    <ImageView
+            android:layout_width="20dp"
+            android:layout_height="24dp" app:srcCompat="@drawable/ic_notifications_off_time_gray_outline_24dp"
+            android:id="@+id/main_item_notification_disabled_until_image"
+            app:layout_constraintTop_toTopOf="@+id/main_item_text"
+            app:layout_constraintEnd_toStartOf="@+id/main_item_notification_disabled_forever_image"
+            android:paddingTop="3dp" android:layout_marginEnd="3dp"/>
+    <ImageView
+            android:layout_width="20dp"
+            android:layout_height="24dp" app:srcCompat="@drawable/ic_notifications_off_gray_outline_24dp"
+            android:id="@+id/main_item_notification_disabled_forever_image"
+            app:layout_constraintTop_toTopOf="@+id/main_item_notification_disabled_until_image"
+            app:layout_constraintEnd_toStartOf="@+id/main_item_instant_image" android:paddingTop="3dp"
+            android:layout_marginEnd="3dp"/>
+    <ImageView
+            android:layout_width="20dp"
+            android:layout_height="24dp" app:srcCompat="@drawable/ic_bolt_gray_24dp"
+            android:id="@+id/main_item_instant_image"
+            app:layout_constraintTop_toTopOf="@+id/main_item_notification_disabled_forever_image"
+            app:layout_constraintEnd_toStartOf="@+id/main_item_date" android:paddingTop="3dp"/>
+    <TextView
+            android:text="10:13"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content" android:id="@+id/main_item_date"
+            app:layout_constraintTop_toTopOf="@+id/main_item_instant_image"
+            app:layout_constraintEnd_toEndOf="parent"
+            android:paddingTop="2dp"/>
+    <TextView
+            android:text="99+"
+            android:layout_width="24dp"
+            android:layout_height="24dp" android:id="@+id/main_item_new"
+            android:layout_marginTop="3dp"
+            android:layout_gravity="center"
+            android:background="@drawable/ic_circle"
+            android:gravity="center"
+            android:textColor="@android:color/white"
+            app:layout_constraintTop_toBottomOf="@+id/main_item_date"
+            app:layout_constraintEnd_toEndOf="@+id/main_item_date"
+            app:layout_constraintStart_toEndOf="@+id/main_item_instant_image"
+            android:textSize="10sp" android:textStyle="bold"/>
+</androidx.constraintlayout.widget.ConstraintLayout>
+
diff --git a/app/src/main/res/values-night/styles.xml b/app/src/main/res/values-night/styles.xml
index 2a7f99c..09935eb 100644
--- a/app/src/main/res/values-night/styles.xml
+++ b/app/src/main/res/values-night/styles.xml
@@ -30,4 +30,12 @@
         <item name="tint">@color/black_light</item>
         <item name="backgroundTint">@color/teal_light</item>
     </style>
+
+    <style name="CardView" parent="@style/Widget.MaterialComponents.CardView">
+        <item name="cardBackgroundColor">@color/gray_darker</item>
+    </style>
+
+    <style name="SwipeRefreshLayoutWithCards">
+        <item name="android:background">@color/black_light</item>
+    </style>
 </resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index a03ba0e..d1209b4 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -12,5 +12,6 @@
 
   <color name="gray_light">#eeeeee</color> <!-- Light theme item selection -->
   <color name="gray_dark">#282828</color> <!-- Dark mode action bar & item selection -->
+  <color name="gray_darker">#202020</color> <!-- Dark mode cards -->
 </resources>
 
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 28ff522..71c7f64 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -3,30 +3,31 @@
     <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <item name="colorPrimary">@color/teal</item>
         <item name="colorAccent">@color/teal</item> <!-- checkboxes, text fields -->
-        <item name="android:colorBackground">@color/gray_light</item> <!-- background -->
+        <item name="android:colorBackground">@color/white</item> <!-- background -->
         <item name="android:statusBarColor">@color/teal</item>
         <item name="actionModeBackground">@color/teal_dark</item>
-        <item name="android:popupMenuStyle">@style/PopupMenu</item>
     </style>
 
-    <!-- Danger buttons & text -->
     <style name="DangerText" parent="@android:style/TextAppearance">
         <item name="android:textColor">@color/red_dark</item>
     </style>
 
-    <!-- Floating action button -->
     <style name="FloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
         <item name="tint">@color/white</item>
         <item name="backgroundTint">@color/teal</item>
     </style>
 
+    <style name="CardView" parent="@style/Widget.MaterialComponents.CardView">
+        <item name="cardBackgroundColor">@color/white</item>
+    </style>
+
+    <style name="SwipeRefreshLayoutWithCards">
+        <item name="android:background">@color/gray_light</item>
+    </style>
+
     <!-- Rounded corners in images, see https://stackoverflow.com/a/61960983/1440785 -->
     <style name="roundedCornersImageView" parent="">
         <item name="cornerFamily">rounded</item>
         <item name="cornerSize">5dp</item>
     </style>
-
-    <style name="PopupMenu" parent="@style/Widget.Material3.PopupMenu">
-        <item name="android:popupBackground">@color/white</item>
-    </style>
 </resources>