add badge to suggestion input item

Trendyol · Feb 10, 2022 · 535ebe1 · 535ebe1
1 parent 6b80082
commit 535ebe1
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 20 deletions.
diff --git a/buildSrc/src/main/kotlin/ComponentVersions.kt b/buildSrc/src/main/kotlin/ComponentVersions.kt
@@ -1,7 +1,7 @@
 object ComponentVersions {
 
     const val toolbarVersion = "2.0.6"
-    const val suggestionInputViewVersion = "1.2.4"
+    const val suggestionInputViewVersion = "1.3.0"
     const val ratingBarVersion = "1.0.2"
     const val imageSliderVersion = "1.0.8"
     const val phoneNumberVersion = "1.0.2"

diff --git a/libraries/suggestion-input-view/README.md b/libraries/suggestion-input-view/README.md
@@ -45,6 +45,11 @@ To set width you can use `android:layout_width` attribute. To customize more you
 | `app:inputHint` | `setInputHint(String)` | Hint of input view's edit text | Empty String | app:inputHint="Hint of input edit text"|
 | `app:showKeyboardByDefault` |  | show keyboard or not by default for input view | true | app:showKeyboardByDefault="false"|
 | `app:canDeselectedItem` |  | for can deselected item | false | app:canDeselectedItem="false"|
+| `app:badgeBackground` | `setBadgeBackground(Drawable)` | Drawable resource of item badge | shape_background_suggestion_item_badge | app:badgeBackground="@drawable/shape_background_suggestion_item_badge"|
+| `app:badgeHorizontalPadding` | `setBadgeHorizontalPadding(Float)` | Start and end padding of badge | 8dp | app:badgeHorizontalPadding="@dimen/horizontal_padding_suggestion_item_badge"|
+| `app:badgeVerticalPadding` | `setBadgeVerticalPadding(Float)` | Top and bottom padding of badge | 2dp | app:badgeVerticalPadding="@dimen/vertical_padding_suggestion_item_badge"|
+| `app:suggestionBadgeTextColor` | `setBadgeTextColor(Color)` |Color of badge text | #F27A1A | app:suggestionBadgeTextColor="@color/text_color_suggestion_item_badge"|
+| `app:badgeTextSize` | `setBadgeTextSize(Float)` |Text size of badge | 10sp | app:badgeTextSize="@dimen/text_size_suggestion_input_badge"|
 
 # Contributors
 This library is maintained mainly by Trendyol Android Team members but also other Android lovers contributes.

diff --git a/...gestion-input-view/src/main/java/com/trendyol/suggestioninputview/SuggestionInputBadge.kt b/...gestion-input-view/src/main/java/com/trendyol/suggestioninputview/SuggestionInputBadge.kt
@@ -0,0 +1,14 @@
+package com.trendyol.suggestioninputview
+
+import android.graphics.drawable.Drawable
+import androidx.annotation.ColorInt
+import androidx.annotation.Dimension
+
+data class SuggestionInputBadge(
+    val text: String = "",
+    val background: Drawable?,
+    @ColorInt val textColor: Int,
+    @Dimension val textSize: Float,
+    @Dimension val horizontalPadding: Float,
+    @Dimension val verticalPadding: Float
+)
diff --git a/...ggestion-input-view/src/main/java/com/trendyol/suggestioninputview/SuggestionInputItem.kt b/...ggestion-input-view/src/main/java/com/trendyol/suggestioninputview/SuggestionInputItem.kt
@@ -6,5 +6,6 @@ data class SuggestionInputItem(
     val value: String,
     val isSelected: Boolean,
     val type: SuggestionItemType,
-    val suffix: String = ""
+    val suffix: String = "",
+    val badgeText: String = ""
 )
diff --git a/...input-view/src/main/java/com/trendyol/suggestioninputview/SuggestionInputItemViewState.kt b/...input-view/src/main/java/com/trendyol/suggestioninputview/SuggestionInputItemViewState.kt
@@ -1,6 +1,7 @@
 package com.trendyol.suggestioninputview
 
 import android.graphics.drawable.Drawable
+import android.view.View
 import androidx.annotation.ColorInt
 import androidx.annotation.Dimension
 
@@ -15,6 +16,7 @@ data class SuggestionInputItemViewState(
     val errorBackground: Drawable?,
     val suffix: String,
     val shouldShowSelectableItemError: Boolean,
+    val badge: SuggestionInputBadge,
     @ColorInt val selectedTextColor: Int,
     @ColorInt val unselectedTextColor: Int,
     @Dimension val textSize: Float,
@@ -32,4 +34,18 @@ data class SuggestionInputItemViewState(
         if (isSelected) selectedTextColor else unselectedTextColor
 
     fun getMinimumWidth(): Int = minWidth.toInt()
+
+    fun getBadgeVisibility(): Int = if (badge.text.isNotEmpty()) View.VISIBLE else View.GONE
+
+    fun getBadgeBackground(): Drawable? = badge.background
+
+    fun getBadgeVerticalPadding(): Float = badge.verticalPadding
+
+    fun getBadgeHorizontalPadding(): Float = badge.horizontalPadding
+
+    fun getBadgeText(): String = badge.text
+
+    fun getBadgeTextColor(): Int = badge.textColor
+
+    fun getBadgeTextSize(): Float = badge.textSize
 }
diff --git a/...ggestion-input-view/src/main/java/com/trendyol/suggestioninputview/SuggestionInputView.kt b/...ggestion-input-view/src/main/java/com/trendyol/suggestioninputview/SuggestionInputView.kt
@@ -76,6 +76,20 @@ class SuggestionInputView @JvmOverloads constructor(
 
     private var canDeselectItem: Boolean = false
 
+    private var badgeBackground: Drawable? = null
+
+    @ColorInt
+    private var badgeTextColor: Int = 0
+
+    @Dimension
+    private var badgeTextSize: Float = 0F
+
+    @Dimension
+    private var badgeHorizontalPadding: Float = 0F
+
+    @Dimension
+    private var badgeVerticalPadding: Float = 0F
+
     private val bindingSelectables: ViewSuggestionSelectablesBinding =
         inflate(R.layout.view_suggestion_selectables)
     private val bindingInput: ViewSuggestionInputBinding =
@@ -154,6 +168,29 @@ class SuggestionInputView @JvmOverloads constructor(
                 showKeyboardByDefault =
                     getBoolean(R.styleable.SuggestionInputView_showKeyboardByDefault, true)
                 canDeselectItem = getBoolean(R.styleable.SuggestionInputView_canDeselectItem, false)
+
+                badgeBackground = getDrawable(R.styleable.SuggestionInputView_badgeBackground)
+                    ?: context.drawable(R.drawable.shape_background_suggestion_item_badge)
+
+                badgeTextSize = getDimension(
+                    R.styleable.SuggestionInputView_badgeTextSize,
+                    context.resources.getDimension(R.dimen.text_size_suggestion_input_badge)
+                )
+
+                badgeTextColor = getColor(
+                    R.styleable.SuggestionInputView_suggestionBadgeTextColor,
+                    context.color(R.color.text_color_suggestion_item_badge)
+                )
+
+                badgeHorizontalPadding = getDimension(
+                    R.styleable.SuggestionInputView_badgeHorizontalPadding,
+                    context.resources.getDimension(R.dimen.horizontal_padding_suggestion_item_badge)
+                )
+                badgeVerticalPadding = getDimension(
+                    R.styleable.SuggestionInputView_badgeVerticalPadding,
+                    context.resources.getDimension(R.dimen.vertical_padding_suggestion_item_badge)
+                )
+
             } finally {
                 recycle()
             }
@@ -261,6 +298,31 @@ class SuggestionInputView @JvmOverloads constructor(
         setViewState(createViewState())
     }
 
+    fun setBadgeBackground(badgeBackground: Drawable) {
+        this.badgeBackground = badgeBackground
+        updateBadgeView()
+    }
+
+    fun setBadgeHorizontalPadding(@Dimension badgeHorizontalPadding: Float) {
+        this.horizontalPadding = badgeHorizontalPadding
+        updateBadgeView()
+    }
+
+    fun setBadgeVerticalPadding(@Dimension badgeVerticalPadding: Float) {
+        this.verticalPadding = badgeVerticalPadding
+        updateBadgeView()
+    }
+
+    fun setBadgeTextColor(@ColorInt badgeTextColor: Int) {
+        this.badgeTextColor = badgeTextColor
+        updateBadgeView()
+    }
+
+    fun setBadgeTextSize(@Dimension badgeTextSize: Float) {
+        this.badgeTextSize = badgeTextSize
+        updateBadgeView()
+    }
+
     fun setItems(items: List<SuggestionInputItem>) {
         this.items = mapInputItemsToItemViewState(items)
         setViewState(createViewState())
@@ -518,6 +580,21 @@ class SuggestionInputView @JvmOverloads constructor(
         }
     }
 
+    private fun updateBadgeView() {
+        this.items = items.map {
+            it.copy(
+                badge = it.badge.copy(
+                    background = badgeBackground,
+                    textColor = badgeTextColor,
+                    textSize = badgeTextSize,
+                    horizontalPadding = badgeHorizontalPadding,
+                    verticalPadding = badgeVerticalPadding
+                )
+            )
+        }
+        notifyAdapter()
+    }
+
     private fun applyConstraintSet(constraintSet: ConstraintSet) {
         constraintSet.applyTo(bindingSelectables.constraintLayoutSelectables)
     }
@@ -556,11 +633,23 @@ class SuggestionInputView @JvmOverloads constructor(
                 minWidth = minWidth,
                 suffix = inputSuffix,
                 errorBackground = errorBackground,
-                shouldShowSelectableItemError = shouldShowSelectableItemError
+                shouldShowSelectableItemError = shouldShowSelectableItemError,
+                badge = mapSuggestionInputBadge(suggestionInputItem.badgeText)
             )
         }
     }
 
+    private fun mapSuggestionInputBadge(badgeText: String): SuggestionInputBadge {
+        return SuggestionInputBadge(
+            text = badgeText,
+            background = badgeBackground,
+            textColor = badgeTextColor,
+            textSize = badgeTextSize,
+            horizontalPadding = badgeHorizontalPadding,
+            verticalPadding = badgeVerticalPadding
+        )
+    }
+
     private fun mapItemViewStateToInputItem(itemViewState: SuggestionInputItemViewState): SuggestionInputItem {
         return SuggestionInputItem(
             id = itemViewState.id,

diff --git a/...es/suggestion-input-view/src/main/res/drawable/shape_background_suggestion_item_badge.xml b/...es/suggestion-input-view/src/main/res/drawable/shape_background_suggestion_item_badge.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="@color/background_color_suggestion_item_badge"/>
+    <corners android:radius="@dimen/radius_background_suggestion_item_badge"/>
+
+</shape>
diff --git a/libraries/suggestion-input-view/src/main/res/layout/item_suggestion.xml b/libraries/suggestion-input-view/src/main/res/layout/item_suggestion.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools">
 
     <data>
@@ -9,21 +10,48 @@
             type="com.trendyol.suggestioninputview.SuggestionInputItemViewState" />
     </data>
 
-    <androidx.appcompat.widget.AppCompatTextView
-        android:foreground="?android:attr/selectableItemBackground"
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:background="@{viewState.getBackground()}"
-        android:fontFamily="sans-serif-medium"
-        android:gravity="center"
-        android:layout_marginStart="@dimen/itemSpacing_suggestion_item"
-        android:minWidth="@{viewState.minimumWidth}"
-        android:paddingStart="@{viewState.getHorizontalPadding()}"
-        android:paddingTop="@{viewState.getVerticalPadding()}"
-        android:paddingEnd="@{viewState.getHorizontalPadding()}"
-        android:paddingBottom="@{viewState.getVerticalPadding()}"
-        android:text="@{viewState.getText()}"
-        android:textColor="@{viewState.getTextColor()}"
-        android:textSize="@{viewState.getTextSize()}"
-        tools:text="50 TL" />
+        android:layout_height="wrap_content">
+
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/suggestionText"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/margin_top_suggestion_item"
+            android:background="@{viewState.getBackground()}"
+            android:fontFamily="sans-serif-medium"
+            android:foreground="?android:attr/selectableItemBackground"
+            android:gravity="center"
+            android:layout_marginStart="@dimen/itemSpacing_suggestion_item"
+            android:minWidth="@{viewState.minimumWidth}"
+            android:paddingStart="@{viewState.getHorizontalPadding()}"
+            android:paddingTop="@{viewState.getVerticalPadding()}"
+            android:paddingEnd="@{viewState.getHorizontalPadding()}"
+            android:paddingBottom="@{viewState.getVerticalPadding()}"
+            android:text="@{viewState.getText()}"
+            android:textColor="@{viewState.getTextColor()}"
+            android:textSize="@{viewState.getTextSize()}"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:text="50 TL" />
+
+        <androidx.appcompat.widget.AppCompatTextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/margin_start_suggestion_item_badge"
+            android:background="@{viewState.badgeBackground}"
+            android:fontFamily="sans-serif-medium"
+            android:paddingStart="@{viewState.badgeHorizontalPadding}"
+            android:paddingTop="@{viewState.badgeVerticalPadding}"
+            android:paddingEnd="@{viewState.badgeHorizontalPadding}"
+            android:paddingBottom="@{viewState.badgeVerticalPadding}"
+            android:text="@{viewState.badgeText}"
+            android:textColor="@{viewState.badgeTextColor}"
+            android:textSize="@{viewState.badgeTextSize}"
+            android:visibility="@{viewState.badgeVisibility}"
+            app:layout_constraintStart_toStartOf="@id/suggestionText"
+            app:layout_constraintTop_toTopOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/libraries/suggestion-input-view/src/main/res/values/attrs.xml b/libraries/suggestion-input-view/src/main/res/values/attrs.xml
@@ -36,5 +36,14 @@
         <attr name="errorBackground" format="reference" />
         <!-- can deselected item -->
         <attr name="canDeselectItem" format="boolean" />
+        <!-- badge background -->
+        <attr name="badgeBackground" format="reference"/>
+        <!-- badge padding -->
+        <attr name="badgeHorizontalPadding" format="dimension"/>
+        <attr name="badgeVerticalPadding" format="dimension"/>
+        <!-- badge text color -->
+        <attr name="suggestionBadgeTextColor" format="reference"/>
+        <!-- badge text size -->
+        <attr name="badgeTextSize" format="dimension" />
     </declare-styleable>
 </resources>
diff --git a/libraries/suggestion-input-view/src/main/res/values/colors.xml b/libraries/suggestion-input-view/src/main/res/values/colors.xml
@@ -3,4 +3,6 @@
     <color name="primary_text_color">#333333</color>
     <color name="text_color_selected_suggestion_item">#ffffff</color>
     <color name="text_color_unselected_suggestion_item">#333333</color>
+    <color name="text_color_suggestion_item_badge">#f27a1a</color>
+    <color name="background_color_suggestion_item_badge">#fef1e8</color>
 </resources>
diff --git a/libraries/suggestion-input-view/src/main/res/values/dimens.xml b/libraries/suggestion-input-view/src/main/res/values/dimens.xml
@@ -1,9 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <dimen name="text_size_suggestion_input">14sp</dimen>
+    <dimen name="text_size_suggestion_input_badge">10sp</dimen>
     <dimen name="horizontal_padding_suggestion_item">4dp</dimen>
     <dimen name="vertical_padding_suggestion_item">8dp</dimen>
     <dimen name="minWidth_suggestion_item">80dp</dimen>
     <dimen name="itemSpacing_suggestion_item">16dp</dimen>
     <dimen name="margin_input_items">16dp</dimen>
+    <dimen name="margin_start_suggestion_item_badge">2dp</dimen>
+    <dimen name="margin_top_suggestion_item">6dp</dimen>
+    <dimen name="horizontal_padding_suggestion_item_badge">8dp</dimen>
+    <dimen name="vertical_padding_suggestion_item_badge">2dp</dimen>
+    <dimen name="radius_background_suggestion_item_badge">10dp</dimen>
 </resources>
diff --git a/sample/src/main/java/com/trendyol/uicomponents/SuggestionInputViewActivity.kt b/sample/src/main/java/com/trendyol/uicomponents/SuggestionInputViewActivity.kt
@@ -62,7 +62,8 @@ class SuggestionInputViewActivity : AppCompatActivity() {
             type = SuggestionItemType.SELECTABLE,
             isSelected = false,
             text = "20 ₺",
-            value = "20"
+            value = "20",
+            badgeText = "Popüler"
         )
 
         val item3 = SuggestionInputItem(