Merge pull request #16 from nisrulz/add/brush-overlay

Added dividerBrush to allow setting gradiant color

Author: SmartToolFactory

README.md

@@ -37,6 +37,8 @@ dependencies {
 }
 ```
 
+where `<version>` is one available in [![](https://www.jitpack.io/v/SmartToolFactory/Compose-BeforeAfter.svg)](https://www.jitpack.io/#SmartToolFactory/Compose-BeforeAfter)
+
 ## BeforeAfterImage
 
 Image that takes two `ImageBitmaps as parameter and displays them based on specified order.
@@ -93,7 +95,7 @@ internal fun DefaultOverlay(
     height: Dp,
     position: Offset,
     overlayStyle: OverlayStyle
-) 
+)
 ```
 
 ```kotlin
@@ -226,7 +228,7 @@ fun BeforeAfterLayout(
     afterContent: @Composable () -> Unit,
     beforeLabel: @Composable BoxScope.() -> Unit = { BeforeLabel(contentOrder = contentOrder) },
     afterLabel: @Composable BoxScope.() -> Unit = { AfterLabel(contentOrder = contentOrder) },
-) 
+)
 ```
 
 
@@ -317,8 +319,8 @@ BeforeAfterLayout(
 
 **Display before and after videos with Exoplayer**
 
-### ⚠️ Note there is a bug with Exoplayer2. 
-If you have a fix please open a PR or answer 
+### ⚠️ Note there is a bug with Exoplayer2.
+If you have a fix please open a PR or answer
 [this question](https://stackoverflow.com/questions/73061216/exoplayer2-with-before-after-videos-changes-first-video-when-clip-and-shape-used)
 Both are appreciated greatly
 

app/src/main/java/com/smarttoolfactory/composebeforeafter/demo/BeforeAfterImageDemo.kt

@@ -27,6 +27,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.layout.ContentScale
@@ -103,7 +104,16 @@ fun BeforeAfterImageDemo() {
                 .aspectRatio(4 / 3f),
             beforeImage = imageBefore,
             afterImage = imageAfter,
-            contentScale = contentScale
+            contentScale = contentScale,
+            overlayStyle = OverlayStyle(
+                dividerBrush = Brush.verticalGradient(
+                    listOf(
+                        Color.Red,
+                        Color.Blue,
+			        ),
+		        ),
+                dividerWidth = 8.dp,
+	        )
         )
 
         Spacer(modifier = Modifier.height(50.dp))

beforeafter/src/main/java/com/smarttoolfactory/beforeafter/DefaultOverlay.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.LocalDensity
@@ -45,6 +46,7 @@ internal fun DefaultOverlay(
 
     val verticalThumbMove = overlayStyle.verticalThumbMove
     val dividerColor = overlayStyle.dividerColor
+    val dividerBrush = overlayStyle.dividerBrush
     val dividerWidth = overlayStyle.dividerWidth
     val thumbBackgroundColor = overlayStyle.thumbBackgroundColor
     val thumbTintColor = overlayStyle.thumbTintColor
@@ -90,7 +92,14 @@ internal fun DefaultOverlay(
     ) {
         Canvas(modifier = Modifier.fillMaxSize()) {
 
-            drawLine(
+            dividerBrush?.let {
+                drawLine(
+                    dividerBrush,
+                    strokeWidth = dividerWidth.toPx(),
+                    start = Offset(linePosition, 0f),
+                    end = Offset(linePosition, size.height)
+                )
+            } ?: drawLine(
                 dividerColor,
                 strokeWidth = dividerWidth.toPx(),
                 start = Offset(linePosition, 0f),
@@ -117,8 +126,9 @@ internal fun DefaultOverlay(
 /**
  * Values for styling [DefaultOverlay]
  *  @param verticalThumbMove when true thumb can move vertically based on user touch
- * @param dividerColor color if divider line
- * @param dividerWidth width if divider line
+ * @param dividerColor color of divider line
+ * @param dividerBrush brush to set color gradiant in divider line
+ * @param dividerWidth width of divider line
  * @param thumbBackgroundColor background color of thumb [Icon]
  * @param thumbTintColor tint color of thumb [Icon]
  * @param thumbShape shape of thumb [Icon]
@@ -131,6 +141,7 @@ internal fun DefaultOverlay(
 @Immutable
 class OverlayStyle(
     val dividerColor: Color = Color.White,
+    val dividerBrush: Brush? = null,
     val dividerWidth: Dp = 1.5.dp,
     val verticalThumbMove: Boolean = false,
     val thumbBackgroundColor: Color = Color.White,