Add support for custom icon tint and background

README.md

@@ -30,7 +30,7 @@ In `build.gradle` of app module, include the following dependency
 
 ```gradle
 dependencies {
-  implementation("io.github.pushpalroy:jetlime:2.1.1")
+  implementation("io.github.pushpalroy:jetlime:2.2.0")
 }
 ```
 
@@ -257,10 +257,10 @@ For using `FILLED`, the [filled()](https://pushpalroy.github.io/JetLime/jetlime/
 pointType = EventPointType.filled(0.8f)
 ```
 For using `CUSTOM`, the [custom()](https://pushpalroy.github.io/JetLime/jetlime/com.pushpal.jetlime/-event-point-type/-companion/index.html#-2135258840%2FFunctions%2F-1761194290) function has to be used which takes an `icon` of `Painter`.
-This can be used to use a custom icon instead of the default types defined.
+This can be used to use a custom icon instead of the default types defined. An optional `tint` can also be applied on the icon.
 
 ```kotlin
-pointType = EventPointType.custom(icon = painterResource(id = R.drawable.icon_check))
+pointType = EventPointType.custom(icon = painterResource(id = R.drawable.icon_check), tint = Color.Green)
 ```
 
 #### 💨 Point Animation

app/src/main/java/com/pushpal/jetlime/ui/timelines/CustomizedHorizontalTimeLine.kt

@@ -70,20 +70,24 @@ fun CustomizedHorizontalTimeLine(modifier: Modifier = Modifier) {
       JetLimeEvent(
         style = JetLimeEventDefaults.eventStyle(
           position = position,
-          pointColor = Color(0xFF2889D6),
+          pointRadius = 12.dp,
           pointFillColor = Color(0xFFD5F2FF),
-          pointRadius = 14.dp,
-          pointAnimation = if (index == 2) JetLimeEventDefaults.pointAnimation() else null,
+          pointColor = when (index) {
+            2 -> Color.White
+            else -> Color(0xFF2889D6)
+          },
+          pointAnimation = if (index == 3) JetLimeEventDefaults.pointAnimation() else null,
           pointType = when (index) {
-            1 -> EventPointType.filled(0.8f)
-            3 -> EventPointType.custom(
+            1 -> EventPointType.filled(0.7f) // 70% fill
+            2 -> EventPointType.custom(
               icon = painterResource(id = R.drawable.icon_check),
+              tint = Color(0xFF00BCD4),
             )
 
             else -> EventPointType.Default
           },
           pointStrokeWidth = when (index) {
-            3 -> 0.dp
+            2 -> 0.dp
             else -> 2.dp
           },
           pointStrokeColor = MaterialTheme.colorScheme.onBackground,

app/src/main/java/com/pushpal/jetlime/ui/timelines/CustomizedVerticalTimeLine.kt

@@ -50,17 +50,17 @@ import com.pushpal.jetlime.ui.timelines.event.VerticalEventContent
 @ExperimentalAnimationApi
 @Composable
 fun CustomizedVerticalTimeLine(modifier: Modifier = Modifier) {
-  val items = remember { getCharacters().subList(0, 4) }
+  val items = remember { getCharacters().subList(0, 5) }
 
   Surface(
     modifier = modifier.fillMaxSize(),
   ) {
     JetLimeColumn(
-      modifier = Modifier.padding(16.dp),
+      modifier = Modifier.padding(horizontal = 16.dp),
       itemsList = ItemsList(items),
       key = { _, item -> item.id },
       style = JetLimeDefaults.columnStyle(
-        contentDistance = 32.dp,
+        contentDistance = 24.dp,
         itemSpacing = 16.dp,
         lineThickness = 2.dp,
         lineBrush = JetLimeDefaults.lineSolidBrush(color = Color(0xFF2196F3)),
@@ -70,20 +70,33 @@ fun CustomizedVerticalTimeLine(modifier: Modifier = Modifier) {
       JetLimeEvent(
         style = JetLimeEventDefaults.eventStyle(
           position = position,
-          pointColor = Color(0xFF2889D6),
-          pointFillColor = Color(0xFFD5F2FF),
-          pointRadius = 14.dp,
-          pointAnimation = if (index == 2) JetLimeEventDefaults.pointAnimation() else null,
+          pointFillColor = Color(0xFFCCEFFF),
+          pointRadius = 12.dp,
+          pointColor = when (index) {
+            3, 4 -> Color.White
+            else -> Color(0xFF2889D6)
+          },
+          pointAnimation = when (index) {
+            1, 4 -> JetLimeEventDefaults.pointAnimation()
+            else -> null
+          },
           pointType = when (index) {
-            1 -> EventPointType.filled(0.8f)
+            1 -> EventPointType.filled(0.7f) // 70% fill
             3 -> EventPointType.custom(
               icon = painterResource(id = R.drawable.icon_check),
+              tint = Color(0xFF649228),
+            )
+
+            4 -> EventPointType.custom(
+              icon = painterResource(id = R.drawable.icon_change),
+              tint = Color(0xFFFF5722),
             )
 
-            else -> EventPointType.Default
+            else -> EventPointType.Default // Default style for rest
           },
           pointStrokeWidth = when (index) {
-            3 -> 0.dp
+            2, 4 -> 0.dp
+            3 -> 1.dp
             else -> 2.dp
           },
           pointStrokeColor = MaterialTheme.colorScheme.onBackground,

app/src/main/res/drawable/icon_change.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="32dp"
+  android:height="32dp"
+  android:tint="#484848"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+
+  <path
+    android:fillColor="@android:color/white"
+    android:pathData="M12,2C6.48,2 2,6.48 2,12c0,5.52 4.48,10 10,10s10,-4.48 10,-10C22,6.48 17.52,2 12,2zM12.06,19v-2.01c-0.02,0 -0.04,0 -0.06,0c-1.28,0 -2.56,-0.49 -3.54,-1.46c-1.71,-1.71 -1.92,-4.35 -0.64,-6.29l1.1,1.1c-0.71,1.33 -0.53,3.01 0.59,4.13c0.7,0.7 1.62,1.03 2.54,1.01v-2.14l2.83,2.83L12.06,19zM16.17,14.76l-1.1,-1.1c0.71,-1.33 0.53,-3.01 -0.59,-4.13C13.79,8.84 12.9,8.5 12,8.5c-0.02,0 -0.04,0 -0.06,0v2.15L9.11,7.83L11.94,5v2.02c1.3,-0.02 2.61,0.45 3.6,1.45C17.24,10.17 17.45,12.82 16.17,14.76z" />
+
+</vector>

app/src/main/res/drawable/icon_check.xml

@@ -1,9 +1,9 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="32dp"
-    android:height="32dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-    <path
-        android:fillColor="#4CAF50"
-        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
+  android:width="32dp"
+  android:height="32dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#4CAF50"
+    android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
 </vector>

docs/jetlime/com.pushpal.jetlime/-event-point-type/-companion/custom.html

@@ -61,12 +61,12 @@
                 <div class="sidebar--inner" id="sideMenu"></div>
             </div>
             <div id="main">
-<div class="main-content" data-page-type="member" id="content" pageIds="jetlime::com.pushpal.jetlime/EventPointType.Companion/custom/#androidx.compose.ui.graphics.painter.Painter/PointingToDeclaration//-1761194290">
+<div class="main-content" data-page-type="member" id="content" pageIds="jetlime::com.pushpal.jetlime/EventPointType.Companion/custom/#androidx.compose.ui.graphics.painter.Painter#androidx.compose.ui.graphics.Color?/PointingToDeclaration//-1761194290">
   <div class="breadcrumbs"><a href="../../../../index.html">jetlime</a><span class="delimiter">/</span><a href="../../index.html">com.pushpal.jetlime</a><span class="delimiter">/</span><a href="../index.html">EventPointType</a><span class="delimiter">/</span><a href="index.html">Companion</a><span class="delimiter">/</span><span class="current">custom</span></div>
   <div class="cover ">
     <h1 class="cover"><span><span>custom</span></span></h1>
   </div>
-  <div class="platform-hinted " data-platform-hinted="data-platform-hinted"><div class="content sourceset-dependent-content" data-active="" data-togglable=":jetlime:dokkaHtml/release"><div class="symbol monospace"><div class="block"><div class="block"><span class="token annotation builtin">@</span><a href="https://developer.android.com/reference/kotlin/androidx/compose/runtime/Stable.html"><span class="token annotation builtin">Stable</span></a></div></div><span class="token keyword"></span><span class="token keyword">fun </span><a href="custom.html"><span class="token function">custom</span></a><span class="token punctuation">(</span><span class="parameters "><span class="parameter ">icon<span class="token operator">: </span><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a></span></span><span class="token punctuation">)</span><span class="token operator">: </span><a href="../index.html">EventPointType</a></div><p class="paragraph">Creates a custom event point type with a specified <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a> icon.</p><span class="kdoc-tag"><h4 class="">Return</h4><p class="paragraph">A new instance of <a href="../index.html">EventPointType</a> with the custom icon.</p></span><h4 class="">Parameters</h4><div class="table"><div class="table-row" data-filterable-current=":jetlime:dokkaHtml/release" data-filterable-set=":jetlime:dokkaHtml/release"><div class="main-subrow keyValue "><div class=""><span class="inline-flex"><div><u><span><span>icon</span></span></u></div></span></div><div><div class="title"><p class="paragraph">The <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a> icon for the custom event point type.</p></div></div></div></div></div></div></div>
+  <div class="platform-hinted " data-platform-hinted="data-platform-hinted"><div class="content sourceset-dependent-content" data-active="" data-togglable=":jetlime:dokkaHtml/release"><div class="symbol monospace"><div class="block"><div class="block"><span class="token annotation builtin">@</span><a href="https://developer.android.com/reference/kotlin/androidx/compose/runtime/Stable.html"><span class="token annotation builtin">Stable</span></a></div></div><span class="token keyword"></span><span class="token keyword">fun </span><a href="custom.html"><span class="token function">custom</span></a><span class="token punctuation">(</span><span class="parameters "><span class="parameter ">icon<span class="token operator">: </span><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a><span class="token punctuation">, </span></span><span class="parameter ">tint<span class="token operator">: </span><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a><span class="token operator">?</span><span class="token operator"> = </span>null</span></span><span class="token punctuation">)</span><span class="token operator">: </span><a href="../index.html">EventPointType</a></div><p class="paragraph">Creates a custom event point type with a specified <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a> icon.</p><span class="kdoc-tag"><h4 class="">Return</h4><p class="paragraph">A new instance of <a href="../index.html">EventPointType</a> with the custom icon.</p></span><h4 class="">Parameters</h4><div class="table"><div class="table-row" data-filterable-current=":jetlime:dokkaHtml/release" data-filterable-set=":jetlime:dokkaHtml/release"><div class="main-subrow keyValue "><div class=""><span class="inline-flex"><div><u><span><span>icon</span></span></u></div></span></div><div><div class="title"><p class="paragraph">The <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a> icon for the custom event point type.</p></div></div></div></div><div class="table-row" data-filterable-current=":jetlime:dokkaHtml/release" data-filterable-set=":jetlime:dokkaHtml/release"><div class="main-subrow keyValue "><div class=""><span class="inline-flex"><div><u><span><span>tint</span></span></u></div></span></div><div><div class="title"><p class="paragraph">The optional tint <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a> of the custom icon.</p></div></div></div></div></div></div></div>
 </div>
       <div class="footer">
         <span class="go-to-top-icon"><a href="#content" id="go-to-top-link"></a></span><span>© 2024 Copyright</span><span

docs/jetlime/com.pushpal.jetlime/-event-point-type/-companion/index.html

@@ -106,17 +106,17 @@ <h2 class="">Properties</h2>
       </div>
       <div data-togglable="FUNCTION">
         <h2 class="">Functions</h2>
-        <div class="table"><a data-name="-2135258840%2FFunctions%2F-1761194290" anchor-label="custom" id="-2135258840%2FFunctions%2F-1761194290" data-filterable-set=":jetlime:dokkaHtml/release"></a>
+        <div class="table"><a data-name="246472581%2FFunctions%2F-1761194290" anchor-label="custom" id="246472581%2FFunctions%2F-1761194290" data-filterable-set=":jetlime:dokkaHtml/release"></a>
           <div class="table-row" data-filterable-current=":jetlime:dokkaHtml/release" data-filterable-set=":jetlime:dokkaHtml/release">
             <div class="main-subrow keyValue ">
               <div class=""><span class="inline-flex">
                   <div><a href="custom.html"><span><span>custom</span></span></a></div>
-<span class="anchor-wrapper"><span class="anchor-icon" pointing-to="-2135258840%2FFunctions%2F-1761194290"></span>
+<span class="anchor-wrapper"><span class="anchor-icon" pointing-to="246472581%2FFunctions%2F-1761194290"></span>
                     <div class="copy-popup-wrapper "><span class="copy-popup-icon"></span><span>Link copied to clipboard</span></div>
                   </span></span></div>
               <div>
                 <div class="title">
-                  <div class="platform-hinted " data-platform-hinted="data-platform-hinted"><div class="content sourceset-dependent-content" data-active="" data-togglable=":jetlime:dokkaHtml/release"><div class="symbol monospace"><div class="block"><div class="block"><span class="token annotation builtin">@</span><a href="https://developer.android.com/reference/kotlin/androidx/compose/runtime/Stable.html"><span class="token annotation builtin">Stable</span></a></div></div><span class="token keyword"></span><span class="token keyword">fun </span><a href="custom.html"><span class="token function">custom</span></a><span class="token punctuation">(</span><span class="parameters "><span class="parameter ">icon<span class="token operator">: </span><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a></span></span><span class="token punctuation">)</span><span class="token operator">: </span><a href="../index.html">EventPointType</a></div><div class="brief "><p class="paragraph">Creates a custom event point type with a specified <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a> icon.</p></div></div></div>
+                  <div class="platform-hinted " data-platform-hinted="data-platform-hinted"><div class="content sourceset-dependent-content" data-active="" data-togglable=":jetlime:dokkaHtml/release"><div class="symbol monospace"><div class="block"><div class="block"><span class="token annotation builtin">@</span><a href="https://developer.android.com/reference/kotlin/androidx/compose/runtime/Stable.html"><span class="token annotation builtin">Stable</span></a></div></div><span class="token keyword"></span><span class="token keyword">fun </span><a href="custom.html"><span class="token function">custom</span></a><span class="token punctuation">(</span><span class="parameters "><span class="parameter ">icon<span class="token operator">: </span><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a><span class="token punctuation">, </span></span><span class="parameter ">tint<span class="token operator">: </span><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a><span class="token operator">?</span><span class="token operator"> = </span>null</span></span><span class="token punctuation">)</span><span class="token operator">: </span><a href="../index.html">EventPointType</a></div><div class="brief "><p class="paragraph">Creates a custom event point type with a specified <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter.html">Painter</a> icon.</p></div></div></div>
                 </div>
               </div>
             </div>

docs/jetlime/com.pushpal.jetlime/-event-point-type/index.html

@@ -121,6 +121,21 @@ <h2 class="">Properties</h2>
               </div>
             </div>
           </div>
+<a data-name="1018144574%2FProperties%2F-1761194290" anchor-label="tint" id="1018144574%2FProperties%2F-1761194290" data-filterable-set=":jetlime:dokkaHtml/release"></a>
+          <div class="table-row" data-filterable-current=":jetlime:dokkaHtml/release" data-filterable-set=":jetlime:dokkaHtml/release">
+            <div class="main-subrow keyValue ">
+              <div class=""><span class="inline-flex">
+                  <div><a href="tint.html"><span><span>tint</span></span></a></div>
+<span class="anchor-wrapper"><span class="anchor-icon" pointing-to="1018144574%2FProperties%2F-1761194290"></span>
+                    <div class="copy-popup-wrapper "><span class="copy-popup-icon"></span><span>Link copied to clipboard</span></div>
+                  </span></span></div>
+              <div>
+                <div class="title">
+                  <div class="platform-hinted " data-platform-hinted="data-platform-hinted"><div class="content sourceset-dependent-content" data-active="" data-togglable=":jetlime:dokkaHtml/release"><div class="symbol monospace"><span class="token keyword"></span><span class="token keyword">val </span><a href="tint.html">tint</a><span class="token operator">: </span><a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a><span class="token operator">?</span><span class="token operator"> = </span>null</div><div class="brief "><p class="paragraph">An optional tint <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a> overlay for the icon.</p></div></div></div>
+                </div>
+              </div>
+            </div>
+          </div>
 <a data-name="-1599709217%2FProperties%2F-1761194290" anchor-label="type" id="-1599709217%2FProperties%2F-1761194290" data-filterable-set=":jetlime:dokkaHtml/release"></a>
           <div class="table-row" data-filterable-current=":jetlime:dokkaHtml/release" data-filterable-set=":jetlime:dokkaHtml/release">
             <div class="main-subrow keyValue ">