Improve skeleton colors (#3765)

Signed-off-by: mueller-ma <[email protected]>
openhab · Jul 21, 2024 · 3efdf1e · 3efdf1e
1 parent 5439c6d
commit 3efdf1e
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 5 deletions.
diff --git a/mobile/src/main/java/org/openhab/habdroid/ui/widget/WidgetImageView.kt b/mobile/src/main/java/org/openhab/habdroid/ui/widget/WidgetImageView.kt
@@ -23,6 +23,7 @@ import android.util.Base64
 import android.util.Log
 import androidx.appcompat.widget.AppCompatImageView
 import com.faltenreich.skeletonlayout.Skeleton
+import com.faltenreich.skeletonlayout.SkeletonConfig
 import com.faltenreich.skeletonlayout.SkeletonLayout
 import com.faltenreich.skeletonlayout.createSkeleton
 import kotlin.random.Random
@@ -42,6 +43,7 @@ import org.openhab.habdroid.util.ImageConversionPolicy
 import org.openhab.habdroid.util.getIconFallbackColor
 import org.openhab.habdroid.util.getPrefs
 import org.openhab.habdroid.util.isDebugModeEnabled
+import org.openhab.habdroid.util.resolveThemedColor
 
 class WidgetImageView(context: Context, attrs: AttributeSet?) : AppCompatImageView(context, attrs) {
     private var scope: CoroutineScope? = null
@@ -317,7 +319,10 @@ class WidgetImageView(context: Context, attrs: AttributeSet?) : AppCompatImageVi
 
     private fun applySkeleton() {
         if (skeleton == null) {
-            skeleton = createSkeleton()
+            val config = SkeletonConfig.default(context)
+            config.maskColor = context.resolveThemedColor(R.attr.skeletonBackground, config.maskColor)
+            config.shimmerColor = context.resolveThemedColor(R.attr.skeletonShimmer, config.shimmerColor)
+            skeleton = createSkeleton(config)
         }
         skeleton?.showSkeleton()
     }

diff --git a/mobile/src/main/res/layout/activity_chart.xml b/mobile/src/main/res/layout/activity_chart.xml
@@ -18,7 +18,8 @@
         <com.faltenreich.skeletonlayout.SkeletonLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            app:maskColor="?colorOnSurfaceInverse">
+            app:maskColor="?skeletonBackground"
+            app:shimmerColor="?skeletonShimmer">
             <org.openhab.habdroid.ui.widget.WidgetImageView
                 android:id="@+id/chart"
                 android:layout_width="match_parent"

diff --git a/mobile/src/main/res/layout/activity_image.xml b/mobile/src/main/res/layout/activity_image.xml
@@ -13,7 +13,8 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:layout_behavior="@string/appbar_scrolling_view_behavior"
-        app:maskColor="?colorOnSurfaceInverse">
+        app:maskColor="?skeletonBackground"
+        app:shimmerColor="?skeletonShimmer">
         <com.github.chrisbanes.photoview.PhotoView
             android:id="@+id/photo_view"
             android:layout_width="match_parent"

diff --git a/mobile/src/main/res/layout/fragment_loading_skeleton.xml b/mobile/src/main/res/layout/fragment_loading_skeleton.xml
@@ -3,7 +3,8 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    app:maskColor="?colorOnSurfaceInverse">
+    app:maskColor="?skeletonBackground"
+    app:shimmerColor="?skeletonShimmer">
 
     <LinearLayout
         android:layout_width="match_parent"

diff --git a/mobile/src/main/res/layout/fragment_notificationlist.xml b/mobile/src/main/res/layout/fragment_notificationlist.xml
@@ -60,7 +60,8 @@
             android:id="@+id/skeletonLayout"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            app:maskColor="?colorOnSurfaceInverse">
+            app:maskColor="?skeletonBackground"
+            app:shimmerColor="?skeletonShimmer">
 
             <LinearLayout
                 android:id="@+id/skeletonList"

diff --git a/mobile/src/main/res/values-night/themes.xml b/mobile/src/main/res/values-night/themes.xml
@@ -6,6 +6,8 @@
         <item name="valueColors">@array/valueColorsDarkBackground</item>
         <item name="android:statusBarColor">?android:colorBackground</item>
         <item name="android:windowLightStatusBar" tools:targetApi="m">false</item>
+        <item name="skeletonBackground">#1E1E1E</item>
+        <item name="skeletonShimmer">#3C3C3C</item>
     </style>
 
     <style name="openHAB.DayNight.orange" parent="openHAB.DayNight.Base">

diff --git a/mobile/src/main/res/values-v23/themes.xml b/mobile/src/main/res/values-v23/themes.xml
@@ -6,5 +6,7 @@
         <item name="chartTheme">white</item>
         <item name="transparentChartTheme">white_transparent</item>
         <item name="valueColors">@array/valueColorsBrightBackground</item>
+        <item name="skeletonBackground">#F2F2F2</item>
+        <item name="skeletonShimmer">#E0E0E0</item>
     </style>
 </resources>
diff --git a/mobile/src/main/res/values/attrs.xml b/mobile/src/main/res/values/attrs.xml
@@ -28,6 +28,8 @@
         <attr name="chartTheme" format="string" />
         <attr name="transparentChartTheme" format="string" />
         <attr name="valueColors" format="reference" />
+        <attr name="skeletonBackground" format="color" />
+        <attr name="skeletonShimmer" format="color" />
     </declare-styleable>
 
     <declare-styleable name="CustomInputTypePreference">

diff --git a/mobile/src/main/res/values/themes.xml b/mobile/src/main/res/values/themes.xml
@@ -13,6 +13,8 @@
         <item name="chartTheme">white</item>
         <item name="transparentChartTheme">white_transparent</item>
         <item name="valueColors">@array/valueColorsBrightBackground</item>
+        <item name="skeletonBackground">#F2F2F2</item>
+        <item name="skeletonShimmer">#E0E0E0</item>
     </style>
 
     <style name="openHAB.DayNight.orange" parent="openHAB.DayNight.Base">