1529 - add dot point to right drawable in toolbar

Trendyol · Dec 19, 2023 · 52c4acd · 52c4acd
1 parent a815c23
commit 52c4acd
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 2 deletions.
diff --git a/libraries/toolbar/README.md b/libraries/toolbar/README.md
@@ -46,6 +46,8 @@ To customize **Toolbar** you can set [ToolbarViewState](src/main/java/com/trendy
 | `app:hideLeftImage` | Hide flag for left image. | false | `app:hideLeftImage="true"` |
 | `app:leftImageContentDescription` | Text for Left Image of Talkback | "" | `app:hideLeftImage="Back"` |
 | `app:rightImageContentDescription` | Text for Right Image of Talkback | "" | `app:hideLeftImage="Add"` |
+| `app:rightImageDrawableVerticalMargin` | Vertical margin for right drawable | 0 | `app:rightImageDrawableVerticalMargin="12dp"`|
+| `app:enableDotPoint` | Right drawable's dots point enabled status | false | `app:enableDotPoint="true"` |
 
 Sample usage with attributes:
 

diff --git a/libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/Extensions.kt b/libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/Extensions.kt
@@ -35,6 +35,11 @@ internal fun View.setEndMargin(endMargin: Int?) {
     }
 }
 
+internal fun AppCompatImageView.setVerticalPadding(padding: Int?) {
+    if (padding == null) return
+    this.setPadding(0, padding, 0, padding)
+}
+
 /**
  * Set debounce time(millis) to onClickListener for prevent multiple clicks.
  * @param debounceMillis: Millis time that gives delay between clicks.

diff --git a/libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/Toolbar.kt b/libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/Toolbar.kt
@@ -6,6 +6,7 @@ import android.view.LayoutInflater
 import android.view.View
 import androidx.constraintlayout.widget.ConstraintLayout
 import com.trendyol.uicomponents.toolbar.databinding.ViewToolbarBinding
+import androidx.core.view.isVisible
 
 class Toolbar : ConstraintLayout {
 
@@ -103,6 +104,10 @@ class Toolbar : ConstraintLayout {
                 )
             val rightImageDrawableMarginEnd =
                 getDimensionPixelOffset(R.styleable.Toolbar_rightImageDrawableMarginEnd, 0)
+            val rightImageDrawableVerticalMargin =
+                getDimensionPixelOffset(R.styleable.Toolbar_rightImageDrawableVerticalMargin, 0)
+            val enableDotPoint =
+                getBoolean(R.styleable.Toolbar_enableDotPoint, false)
             val leftImageDrawableMarginStart =
                 getDimensionPixelOffset(R.styleable.Toolbar_leftImageDrawableMarginStart, 0)
             val hideLeftImage = getBoolean(R.styleable.Toolbar_hideLeftImage, false)
@@ -127,6 +132,8 @@ class Toolbar : ConstraintLayout {
                 lowerRightTextMarginEndInPixel = lowerRightTextMarginEnd,
                 rightImageDrawableMarginEndInPixel = rightImageDrawableMarginEnd,
                 leftImageDrawableMarginStartInPixel = leftImageDrawableMarginStart,
+                rightImageDrawableVerticalMarginInPixel = rightImageDrawableVerticalMargin,
+                enableDotPoint = enableDotPoint,
                 hideLeftImage = hideLeftImage,
                 leftImageContentDescription = leftImageContentDescription,
                 rightImageContentDescription = rightImageContentDescription
@@ -148,6 +155,9 @@ class Toolbar : ConstraintLayout {
             binding.imageRight.setDrawableResource(rightImageDrawableResId)
             binding.imageRight.setEndMargin(rightImageDrawableMarginEndInPixel)
             binding.imageRight.contentDescription = rightImageContentDescription
+            binding.imageRight.setVerticalPadding(rightImageDrawableVerticalMarginInPixel)
+
+            binding.imageViewDot.isVisible = enableDotPoint
 
             binding.textLeftUp.text = upperLeftTextValue
             binding.textLeftUp.visibility = upperLeftTextVisibility

diff --git a/libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/ToolbarViewState.kt b/libraries/toolbar/src/main/java/com/trendyol/uicomponents/toolbar/ToolbarViewState.kt
@@ -30,6 +30,8 @@ data class ToolbarViewState(
     @Px val lowerRightTextMarginEndInPixel: Int? = null,
     @Px val rightImageDrawableMarginEndInPixel: Int? = null,
     @Px val leftImageDrawableMarginStartInPixel: Int? = null,
+    @Px val rightImageDrawableVerticalMarginInPixel: Int? = null,
+    val enableDotPoint: Boolean = false,
     val isUpperRightTextEnabled: Boolean = true,
     val hideLeftImage: Boolean = false,
     val leftImageContentDescription: String = "",

diff --git a/libraries/toolbar/src/main/res/drawable/orange_dot.xml b/libraries/toolbar/src/main/res/drawable/orange_dot.xml
@@ -0,0 +1,4 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="?attr/colorPrimary" />
+</shape>
diff --git a/libraries/toolbar/src/main/res/layout/view_toolbar.xml b/libraries/toolbar/src/main/res/layout/view_toolbar.xml
@@ -120,6 +120,16 @@
         app:layout_constraintTop_toTopOf="parent"
         tools:srcCompat="@drawable/trendyol_uicomponents_toolbar_arrow_back" />
 
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/imageViewDot"
+        android:layout_width="12dp"
+        android:layout_height="12dp"
+        android:src="@drawable/orange_dot"
+        app:layout_constraintTop_toTopOf="@id/imageRight"
+        app:layout_constraintEnd_toEndOf="@id/imageRight"
+        app:layout_constraintTop_toBottomOf="@id/imageRight"
+        app:layout_constraintBottom_toTopOf="@id/imageRight"/>
+
     <androidx.constraintlayout.widget.Guideline
         android:id="@+id/guideStart"
         android:layout_width="wrap_content"

diff --git a/libraries/toolbar/src/main/res/values/attrs.xml b/libraries/toolbar/src/main/res/values/attrs.xml
@@ -16,6 +16,8 @@
         <attr name="upperRightTextMarginEnd" format="dimension" />
         <attr name="lowerRightTextMarginEnd" format="dimension" />
         <attr name="rightImageDrawableMarginEnd" format="dimension" />
+        <attr name="rightImageDrawableVerticalMargin" format="dimension" />
+        <attr name="enableDotPoint" format="boolean" />
         <attr name="leftImageDrawableMarginStart" format="dimension" />
         <attr name="hideLeftImage" format="boolean" />
         <attr name="leftImageContentDescription" format="string" />

diff --git a/sample/src/main/java/com/trendyol/uicomponents/ToolbarActivity.kt b/sample/src/main/java/com/trendyol/uicomponents/ToolbarActivity.kt
@@ -25,10 +25,13 @@ class ToolbarActivity : AppCompatActivity() {
     private fun setUpToolbar3() {
         with(binding.toolbar3) {
             viewState = ToolbarViewState(
-                rightImageDrawableResId = android.R.drawable.ic_menu_add,
+                rightImageDrawableResId = R.drawable.ic_info,
                 rightImageContentDescription = "Add",
                 middleText = "<h1>HTML text</h1>",
-                upperLeftTextMarginStartInPixel = 20
+                upperLeftTextMarginStartInPixel = 20,
+                rightImageDrawableMarginEndInPixel = 0,
+                rightImageDrawableVerticalMarginInPixel = 0,
+                enableDotPoint = true
             )
 
             lowerLeftTextClickListener = { showToast("toolbar3.lowerLeftTextClickListener") }

diff --git a/sample/src/main/res/drawable/ic_info.xml b/sample/src/main/res/drawable/ic_info.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,2C6.477,2 2,6.477 2,12C2,17.523 6.477,22 12,22C17.523,22 22,17.523 22,12C22,6.477 17.523,2 12,2Z"
+      android:fillColor="#999999"/>
+  <path
+      android:pathData="M12,7C11.448,7 11,7.448 11,8C11,8.552 11.448,9 12,9C12.552,9 13,8.552 13,8C13,7.448 12.552,7 12,7ZM12,10C11.448,10 11,10.448 11,11V16C11,16.552 11.448,17 12,17C12.552,17 13,16.552 13,16V11C13,10.448 12.552,10 12,10Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>