Add option for header row bottom shadow and tweak now line dot behavior (alamkanak#147)

Author: thellmund

core/src/main/java/com/alamkanak/weekview/HeaderRowDrawer.kt

@@ -16,7 +16,15 @@ internal class HeaderRowDrawer<T : Any>(
         canvas: Canvas
     ) {
         val width = view.width.toFloat()
-        canvas.drawRect(0f, 0f, width, config.headerHeight, config.headerBackgroundPaint)
+
+        val backgroundPaint = if (config.showHeaderRowBottomShadow) {
+            config.headerBackgroundPaint.withShadow(
+                radius = config.headerRowBottomShadowRadius,
+                color = config.headerRowBottomShadowColor
+            )
+        } else config.headerBackgroundPaint
+
+        canvas.drawRect(0f, 0f, width, config.headerHeight, backgroundPaint)
 
         if (config.showWeekNumber) {
             canvas.drawWeekNumber(drawingContext)
@@ -57,11 +65,17 @@ internal class HeaderRowDrawer<T : Any>(
     }
 }
 
-internal val Paint.textHeight: Int
+private val Paint.textHeight: Int
     get() = (descent() - ascent()).roundToInt()
 
-internal fun Paint.getTextBounds(text: String): Rect {
+private fun Paint.getTextBounds(text: String): Rect {
     val rect = Rect()
     getTextBounds(text, 0, text.length, rect)
     return rect
 }
+
+private fun Paint.withShadow(radius: Int, color: Int): Paint {
+    return Paint(this).apply {
+        setShadowLayer(radius.toFloat(), 0f, 0f, color)
+    }
+}

core/src/main/java/com/alamkanak/weekview/NowLineDrawer.kt

@@ -22,10 +22,10 @@ internal class NowLineDrawer(
             .map { (_, startPixel) -> startPixel }
             .firstOrNull() ?: return
 
-        drawLine(startPixel, canvas)
+        canvas.drawLine(startPixel)
     }
 
-    private fun drawLine(startPixel: Float, canvas: Canvas) {
+    private fun Canvas.drawLine(startPixel: Float) {
         val top = config.headerHeight + config.currentOrigin.y
         val now = now()
 
@@ -35,17 +35,24 @@ internal class NowLineDrawer(
 
         val startX = max(startPixel, config.timeColumnWidth)
         val endX = startPixel + config.totalDayWidth
-        canvas.drawLine(startX, verticalOffset, endX, verticalOffset, config.nowLinePaint)
+        drawLine(startX, verticalOffset, endX, verticalOffset, config.nowLinePaint)
 
         if (config.showNowLineDot) {
-            drawDot(startPixel, verticalOffset, canvas)
+            drawDot(startPixel, verticalOffset)
         }
     }
 
-    private fun drawDot(startPixel: Float, lineStartY: Float, canvas: Canvas) {
-        // We use a margin to prevent the dot from sticking on the left side of the screen
+    private fun Canvas.drawDot(startPixel: Float, lineStartY: Float) {
         val dotRadius = config.nowDotPaint.strokeWidth
-        val dotMargin = 32f
-        canvas.drawCircle(startPixel + dotMargin, lineStartY, dotRadius, config.nowDotPaint)
+        val actualStartPixel = max(startPixel, config.timeColumnWidth)
+
+        val fullLineWidth = config.totalDayWidth
+        val actualEndPixel = startPixel + fullLineWidth
+
+        val currentlyDisplayedWidth = actualEndPixel - actualStartPixel
+        val currentlyDisplayedPortion = currentlyDisplayedWidth / fullLineWidth
+
+        val adjustedRadius = currentlyDisplayedPortion * dotRadius
+        drawCircle(actualStartPixel, lineStartY, adjustedRadius, config.nowDotPaint)
     }
 }

core/src/main/java/com/alamkanak/weekview/WeekView.kt

@@ -85,6 +85,8 @@ class WeekView<T : Any> @JvmOverloads constructor(
         if (isAccessibilityHelperActive) {
             ViewCompat.setAccessibilityDelegate(this, accessibilityTouchHelper)
         }
+
+        setLayerType(LAYER_TYPE_SOFTWARE, null)
     }
 
     // Be careful when changing the order of the drawers, as that might cause
@@ -93,11 +95,11 @@ class WeekView<T : Any> @JvmOverloads constructor(
         DayBackgroundDrawer(this, configWrapper),
         BackgroundGridDrawer(this, configWrapper),
         SingleEventsDrawer(context, configWrapper, eventChipCache),
-        NowLineDrawer(configWrapper),
         TimeColumnDrawer(this, configWrapper),
         HeaderRowDrawer(this, configWrapper),
         DayLabelDrawer(configWrapper, cache),
-        AllDayEventsDrawer(context, configWrapper, cache)
+        AllDayEventsDrawer(context, configWrapper, cache),
+        NowLineDrawer(configWrapper)
     )
 
     override fun onDraw(canvas: Canvas) {

core/src/main/java/com/alamkanak/weekview/WeekViewConfig.kt

@@ -23,6 +23,11 @@ internal class WeekViewConfig(
     var headerRowBottomLineColor: Int = 0
     var headerRowBottomLineWidth: Int = 0
 
+    // Header bottom shadow
+    var showHeaderRowBottomShadow: Boolean = false
+    var headerRowBottomShadowColor: Int = 0
+    var headerRowBottomShadowRadius: Int = 0
+
     // Time column
     var timeColumnTextColor: Int = 0
     var timeColumnBackgroundColor: Int = 0
@@ -139,6 +144,11 @@ internal class WeekViewConfig(
             headerRowBottomLineColor = getColor(R.styleable.WeekView_headerRowBottomLineColor, Defaults.GRID_COLOR)
             headerRowBottomLineWidth = getDimensionPixelSize(R.styleable.WeekView_headerRowBottomLineWidth, 1)
 
+            // Header bottom shadow
+            showHeaderRowBottomShadow = a.getBoolean(R.styleable.WeekView_showHeaderRowBottomShadow, false)
+            headerRowBottomShadowColor = a.getColor(R.styleable.WeekView_headerRowBottomShadowColor, Color.LTGRAY)
+            headerRowBottomShadowRadius = a.getDimensionPixelSize(R.styleable.WeekView_headerRowBottomShadowRadius, 2)
+
             // Time column
             timeColumnTextColor = getColor(R.styleable.WeekView_timeColumnTextColor, Color.BLACK)
             timeColumnBackgroundColor = getColor(R.styleable.WeekView_timeColumnBackgroundColor, Color.WHITE)

core/src/main/java/com/alamkanak/weekview/WeekViewConfigWrapper.kt

@@ -330,6 +330,24 @@ internal class WeekViewConfigWrapper(
     val headerRowBottomLineWidth: Float
         get() = if (showHeaderRowBottomLine) headerRowBottomLinePaint.strokeWidth else 0f
 
+    var showHeaderRowBottomShadow: Boolean
+        get() = config.showHeaderRowBottomShadow
+        set(value) {
+            config.showHeaderRowBottomShadow = value
+        }
+
+    var headerRowBottomShadowColor: Int
+        get() = config.headerRowBottomShadowColor
+        set(value) {
+            config.headerRowBottomShadowColor = value
+        }
+
+    var headerRowBottomShadowRadius: Int
+        get() = config.headerRowBottomShadowRadius
+        set(value) {
+            config.headerRowBottomShadowRadius = value
+        }
+
     var showWeekNumber: Boolean
         get() = config.showWeekNumber
         set(value) {

core/src/main/res/values/attrs.xml

@@ -23,6 +23,11 @@
         <attr name="headerRowBottomLineColor" format="color" />
         <attr name="headerRowBottomLineWidth" format="dimension" />
 
+        <!-- Header bottom shadow -->
+        <attr name="showHeaderRowBottomShadow" format="boolean" />
+        <attr name="headerRowBottomShadowColor" format="color" />
+        <attr name="headerRowBottomShadowRadius" format="dimension" />
+
         <!-- Time column -->
         <attr name="timeColumnTextColor" format="color" />
         <attr name="timeColumnBackgroundColor" format="color" />

sample/src/main/res/layout/activity_basic.xml

@@ -19,8 +19,8 @@
         app:eventPaddingHorizontal="6dp"
         app:eventPaddingVertical="2dp"
         app:eventTextColor="@android:color/white"
-        app:headerRowBottomLineColor="@color/header_bottom_line"
-        app:headerRowBottomLineWidth="1dp"
+        app:headerRowBottomShadowColor="@color/light_gray"
+        app:headerRowBottomShadowRadius="4dp"
         app:headerRowPadding="12dp"
         app:hourHeight="60dp"
         app:nowLineColor="@color/accent"
@@ -30,7 +30,7 @@
         app:numberOfVisibleDays="3"
         app:overlappingEventGap="1dp"
         app:showCurrentTimeFirst="true"
-        app:showHeaderRowBottomLine="true"
+        app:showHeaderRowBottomShadow="true"
         app:showNowLine="true"
         app:showNowLineDot="true"
         app:showTimeColumnSeparator="true"

sample/src/main/res/layout/view_toolbar.xml

@@ -1,11 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <com.google.android.material.appbar.AppBarLayout 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:layout_height="wrap_content"
+    app:elevation="0dp">
 
     <com.google.android.material.appbar.MaterialToolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content" />
+        android:layout_height="wrap_content"
+        android:background="@android:color/white" />
 
 </com.google.android.material.appbar.AppBarLayout>

sample/src/main/res/values/colors.xml

@@ -10,4 +10,5 @@
     <color name="accent">#2789e4</color>
     <color name="divider">#E2E2E2</color>
     <color name="dark_gray">#aeaeae</color>
+    <color name="light_gray">#CCCCCC</color>
 </resources>