Merge pull request #90 from Trendyol/dialogs/customviewdialog

Add dialog with custom view support

buildSrc/src/main/kotlin/ComponentVersions.kt

@@ -5,7 +5,7 @@ object ComponentVersions {
     const val ratingBarVersion = "1.0.2"
     const val imageSliderVersion = "1.0.8"
     const val phoneNumberVersion = "1.0.2"
-    const val dialogsVersion = "1.2.8"
+    const val dialogsVersion = "1.2.9"
     const val cardInputViewVersion = "1.1.3"
     const val quantityPickerViewVersion = "1.2.5"
     const val timelineViewVersion = "1.0.0"

libraries/dialogs/README.md

@@ -1,7 +1,7 @@
 
-<img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-1.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-2.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-3.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-4.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-5.png" width="280"/>
+<img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-1.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-2.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-3.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-4.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-5.png" width="280"/> <img src="https://raw.githubusercontent.com/Trendyol/android-ui-components/master/images/dialogs-6.png" width="280"/>
 
-$dialogsVersion = dialogs-1.2.8 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+$dialogsVersion = dialogs-1.2.9 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
 ## Dialogs  
 Dialogs is a bunch of BottomSheetDialogs to use in app to show user an information, agreement or list.  
@@ -167,6 +167,30 @@ infoListDialog {
 }
 ```
 
+* Custom Dialog
+
+CustomDialog is a dialog that has a fixed header and its content can take a custom view.
+
+| Field | Type | Description | Default Value |
+| ------------- |-------------|-------------| ------------- |
+| `view` | View | The custom view that will create the body of the dialog. | null |
+
+Sample usage:
+```kotlin
+val customView = ExampleCustomView(context)
+customDialog {
+    title = SpannableStringBuilder().color(Color.RED) { append("Custom Dialog Sample") }
+    showCloseButton = true
+    animateCornerRadiusWhenExpand = false
+    cornerRadius = 0F
+    closeButtonListener = infoDialogClosed
+    titleBackgroundColor = R.color.colorAccent
+    titleTextColor = R.color.colorPrimary
+    titleTextPosition = TextPosition.CENTER
+    view = customView
+}
+```
+
 ## TODOs
 * Implement ListDialog. 
 * ~~Implement SelectionDialog~~

libraries/dialogs/src/main/java/com/trendyol/uicomponents/dialogs/Builder.kt

@@ -1,12 +1,16 @@
 package com.trendyol.uicomponents.dialogs
 
 import android.text.SpannableString
+import android.view.View
 import android.webkit.WebView
 import androidx.annotation.DrawableRes
 
 open class Builder internal constructor() {
 
     var title: CharSequence = ""
+    var titleBackgroundColor: Int? = null
+    var titleTextColor: Int? = null
+    var titleTextPosition: TextPosition? = null
     var showCloseButton: Boolean = false
     var closeButtonListener: ((DialogFragment) -> Unit)? = null
     var animateCornerRadiusWhenExpand: Boolean = false
@@ -20,9 +24,6 @@ open class InfoDialogBuilder internal constructor() : Builder() {
     @DrawableRes
     var contentImage: Int? = null
     var showContentAsHtml: Boolean = false
-    var titleBackgroundColor: Int? = null
-    var titleTextColor: Int? = null
-    var titleTextPosition: TextPosition? = null
     var contentTextPosition: TextPosition? = null
     var webViewContent: WebViewContent? = null
     var webViewBuilder: (WebView.() -> Unit)? = null
@@ -147,3 +148,26 @@ class InfoListDialogBuilder internal constructor() : InfoDialogBuilder() {
 
         }
 }
+
+class CustomDialogBuilder internal constructor() : Builder() {
+
+    var view: View? = null
+
+    internal fun buildCustomDialog(block: CustomDialogBuilder.() -> Unit): DialogFragment {
+        return CustomDialogBuilder().apply(block).let {
+            DialogFragment().apply {
+                arguments = DialogFragmentArguments(
+                    title = it.title,
+                    showCloseButton = it.showCloseButton,
+                    animateCornerRadiusWhenExpand = animateCornerRadiusWhenExpand,
+                    cornerRadius = it.cornerRadius,
+                    titleBackgroundColor = it.titleBackgroundColor,
+                    titleTextColor = it.titleTextColor,
+                    titleTextPosition = it.titleTextPosition,
+                    view = { it.view }
+                ).toBundle()
+                this.closeButtonListener = it.closeButtonListener
+            }
+        }
+    }
+}

libraries/dialogs/src/main/java/com/trendyol/uicomponents/dialogs/BuilderExtensions.kt

@@ -11,3 +11,6 @@ fun agreementDialog(block: AgreementDialogBuilder.() -> Unit): DialogFragment =
 
 fun selectionDialog(block: SelectionDialogBuilder.() -> Unit): DialogFragment =
     SelectionDialogBuilder().buildSelectionDialog(block)
+
+fun customDialog(block: CustomDialogBuilder.() -> Unit): DialogFragment =
+    CustomDialogBuilder().buildCustomDialog(block)

libraries/dialogs/src/main/java/com/trendyol/uicomponents/dialogs/DialogFragment.kt

@@ -64,7 +64,7 @@ class DialogFragment internal constructor() : BaseBottomSheetDialog() {
 
         with(binding) {
             binding.cardView.clipToOutline = true
-            imageClose.setOnClickListener {
+            viewDialogHeader.imageClose.setOnClickListener {
                 dismiss()
                 closeButtonListener?.invoke(this@DialogFragment)
             }
@@ -149,20 +149,21 @@ class DialogFragment internal constructor() : BaseBottomSheetDialog() {
             titleTextColor = dialogArguments.titleTextColor ?: R.color.ui_components_dialogs_primary_text_color,
             titleTextPosition = dialogArguments.titleTextPosition ?: TextPosition.START,
             contentTextPosition = dialogArguments.contentTextPosition ?: TextPosition.START,
-            webViewContent = dialogArguments.webViewContent
+            webViewContent = dialogArguments.webViewContent,
+            customView = dialogArguments.view?.invoke(),
         )
 
         with(binding) {
-            with(viewTitleBackground) {
+            with(viewDialogHeader.viewTitleBackground) {
                 setBackgroundColor(viewState.getTitleBackgroundColor(context))
                 visibility = viewState.getTitleVisibility()
             }
-            with(textTitle) {
+            with(viewDialogHeader.textTitle) {
                 text = viewState.title
                 textAlignment = viewState.getTitleTextPosition()
                 setTextColor(viewState.getTitleTextColor(context))
             }
-            imageClose.visibility = viewState.getCloseButtonVisibility()
+            viewDialogHeader.imageClose.visibility = viewState.getCloseButtonVisibility()
             with(imageContent) {
                 setImageDrawable(viewState.getContentImageDrawable(context))
                 visibility = viewState.getContentImageVisibility()
@@ -196,6 +197,11 @@ class DialogFragment internal constructor() : BaseBottomSheetDialog() {
                 text = viewState.rightButtonText
                 visibility = viewState.getRightButtonVisibility()
             }
+            with(frameLayoutCustom) {
+                visibility = viewState.getCustomViewVisibility()
+                if (viewState.getCustomViewVisibility() == View.VISIBLE)
+                    addView(viewState.customView)
+            }
         }
     }
 

libraries/dialogs/src/main/java/com/trendyol/uicomponents/dialogs/DialogFragmentArguments.kt

@@ -2,6 +2,7 @@ package com.trendyol.uicomponents.dialogs
 
 import android.os.Bundle
 import android.os.Parcelable
+import android.view.View
 import android.webkit.WebView
 import androidx.annotation.ColorRes
 import androidx.annotation.DrawableRes
@@ -34,7 +35,8 @@ class DialogFragmentArguments(
     val webViewContent: WebViewContent? = null,
     val webViewBuilder: (WebView.() -> Unit)? = null,
     val infoListItems: List<Pair<CharSequence, CharSequence>>? = null,
-    val itemDividers: List<ItemDivider> = emptyList()
+    val itemDividers: List<ItemDivider> = emptyList(),
+    val view: (() -> View?)? = null
 ) : Parcelable {
 
     fun toBundle() = bundleOf("ARGUMENTS" to this)

libraries/dialogs/src/main/java/com/trendyol/uicomponents/dialogs/DialogViewState.kt

@@ -25,7 +25,8 @@ data class DialogViewState(
     val titleTextColor: Int,
     val titleTextPosition: TextPosition,
     val contentTextPosition: TextPosition,
-    val webViewContent: WebViewContent?
+    val webViewContent: WebViewContent?,
+    val customView: View?,
 ) {
 
     fun getTitleVisibility(): Int = if (title.isNullOrEmpty().not()) View.VISIBLE else View.GONE
@@ -81,4 +82,6 @@ data class DialogViewState(
     fun getLeftButtonVisibility(): Int = if (leftButtonText != null) View.VISIBLE else View.GONE
 
     fun getRightButtonVisibility(): Int = if (rightButtonText != null) View.VISIBLE else View.GONE
+
+    fun getCustomViewVisibility(): Int = if (customView != null) View.VISIBLE else View.GONE
 }

libraries/dialogs/src/main/res/layout/fragment_dialog.xml

@@ -12,31 +12,9 @@
         android:layout_height="wrap_content"
         android:orientation="vertical">
 
-        <LinearLayout
-            android:id="@+id/viewTitleBackground"
-            android:layout_width="match_parent"
-            android:layout_height="?attr/actionBarSize"
-            android:paddingStart="@dimen/ui_components_dialogs_margin_outer"
-            android:paddingEnd="@dimen/ui_components_dialogs_margin_outer">
-
-            <androidx.appcompat.widget.AppCompatTextView
-                android:id="@+id/textTitle"
-                style="@style/Trendyol.UIComponents.Dialogs.PrimaryText.Title"
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_vertical"
-                android:layout_weight="1"
-                tools:text="Lorem Ipsum" />
-
-            <androidx.appcompat.widget.AppCompatImageView
-                android:id="@+id/imageClose"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_vertical"
-                android:background="?selectableItemBackgroundBorderless"
-                android:padding="@dimen/ui_components_dialogs_margin_inner"
-                app:srcCompat="@drawable/ic_ui_components_dialogs_close" />
-        </LinearLayout>
+        <include
+            android:id="@+id/viewDialogHeader"
+            layout="@layout/layout_dialog_header"/>
 
         <androidx.core.widget.NestedScrollView
             android:layout_width="match_parent"
@@ -77,10 +55,10 @@
                     android:id="@+id/webViewContent"
                     android:layout_width="0dp"
                     android:layout_height="wrap_content"
-                    android:paddingTop="@dimen/ui_components_dialogs_margin_inner"
-                    android:paddingBottom="@dimen/ui_components_dialogs_margin_inner"
                     android:focusable="true"
                     android:focusableInTouchMode="true"
+                    android:paddingTop="@dimen/ui_components_dialogs_margin_inner"
+                    android:paddingBottom="@dimen/ui_components_dialogs_margin_inner"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@id/textContent"
@@ -111,7 +89,8 @@
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@id/barrierContent"
-                    tools:hint="Your search query" />
+                    tools:hint="Your search query"
+                    tools:visibility="gone" />
 
                 <androidx.appcompat.widget.AppCompatImageView
                     android:id="@+id/imageClearSearchQuery"
@@ -134,7 +113,7 @@
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@id/editTextSearch"
                     tools:listitem="@layout/item_ui_components_selection_dialog"
-                    tools:visibility="visible" />
+                    tools:visibility="gone" />
 
                 <com.google.android.material.button.MaterialButton
                     android:id="@+id/buttonLeft"
@@ -151,7 +130,8 @@
                     app:layout_constraintWidth_default="percent"
                     app:layout_constraintWidth_percent="0.4"
                     app:strokeColor="?attr/colorAccent"
-                    tools:text="Cancel" />
+                    tools:text="Cancel"
+                    tools:visibility="gone" />
 
                 <com.google.android.material.button.MaterialButton
                     android:id="@+id/buttonRight"
@@ -165,7 +145,17 @@
                     app:layout_constraintTop_toTopOf="@id/buttonLeft"
                     app:layout_constraintWidth_default="percent"
                     app:layout_constraintWidth_percent="0.4"
-                    tools:text="Ok" />
+                    tools:text="Ok"
+                    tools:visibility="gone" />
+
+                <FrameLayout
+                    android:id="@+id/frameLayoutCustom"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="parent"/>
             </androidx.constraintlayout.widget.ConstraintLayout>
         </androidx.core.widget.NestedScrollView>
     </LinearLayout>

libraries/dialogs/src/main/res/layout/layout_dialog_header.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    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"
+    android:id="@+id/viewTitleBackground"
+    android:layout_width="match_parent"
+    android:layout_height="?attr/actionBarSize"
+    android:paddingStart="@dimen/ui_components_dialogs_margin_outer"
+    android:paddingEnd="@dimen/ui_components_dialogs_margin_outer">
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/textTitle"
+        style="@style/Trendyol.UIComponents.Dialogs.PrimaryText.Title"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:layout_weight="1"
+        tools:text="Lorem Ipsum" />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/imageClose"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:background="?selectableItemBackgroundBorderless"
+        android:padding="@dimen/ui_components_dialogs_margin_inner"
+        app:srcCompat="@drawable/ic_ui_components_dialogs_close" />
+</LinearLayout>

sample/src/main/java/com/trendyol/uicomponents/DialogsActivity.kt

@@ -21,6 +21,7 @@ class DialogsActivity : AppCompatActivity() {
     private val buttonSelectionWithSearchDialog by lazy { findViewById<Button>(R.id.button_selection_with_search_dialog) }
     private val buttonInfoDialogWithWebView by lazy { findViewById<Button>(R.id.button_info_dialog_webview) }
     private val buttonInfoListDialog by lazy { findViewById<Button>(R.id.button_info_list_dialog) }
+    private val buttonCustomDialog by lazy { findViewById<Button>(R.id.button_custom_dialog) }
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -32,6 +33,7 @@ class DialogsActivity : AppCompatActivity() {
         buttonSelectionWithSearchDialog.setOnClickListener { showSelectionWithSearchDialog() }
         buttonInfoDialogWithWebView.setOnClickListener { showInfoDialogWithWebView() }
         buttonInfoListDialog.setOnClickListener { showInfoListDialog() }
+        buttonCustomDialog.setOnClickListener { showCustomDialog() }
     }
 
     private val infoDialogClosed: (DialogFragment) -> Unit = { showToast("Info dialog closed.") }
@@ -152,6 +154,19 @@ class DialogsActivity : AppCompatActivity() {
         }.showDialog(supportFragmentManager)
     }
 
+    private fun showCustomDialog() {
+        val customView = ExampleCustomView(this@DialogsActivity)
+        val customDialog = customDialog {
+            title = "Custom View Dialog"
+            showCloseButton = true
+            view = customView
+        }
+
+        customView.setButtonCancelClickListener { customDialog.dismiss() }
+        customView.setButtonOkClickListener { Toast.makeText(this, "Ok", Toast.LENGTH_SHORT).show() }
+        customDialog.showDialog(supportFragmentManager)
+    }
+
     override fun onRestoreInstanceState(savedInstanceState: Bundle) {
         super.onRestoreInstanceState(savedInstanceState)
         setDialogFragmentListenersIfNecessary()

sample/src/main/java/com/trendyol/uicomponents/ExampleCustomView.kt

@@ -0,0 +1,24 @@
+package com.trendyol.uicomponents
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.FrameLayout
+import androidx.databinding.DataBindingUtil
+import com.trendyol.uicomponents.databinding.ViewCustomExampleBinding
+
+class ExampleCustomView @JvmOverloads constructor(
+    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
+) : FrameLayout(context, attrs, defStyleAttr) {
+
+    private val binding: ViewCustomExampleBinding =
+        DataBindingUtil.inflate(LayoutInflater.from(this.context), R.layout.view_custom_example, this, true)
+
+    fun setButtonCancelClickListener(listener: () -> Unit) {
+        binding.buttonCancel.setOnClickListener { listener.invoke() }
+    }
+
+    fun setButtonOkClickListener(listener: () -> Unit) {
+        binding.buttonOk.setOnClickListener { listener.invoke() }
+    }
+}

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

@@ -82,4 +82,14 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/button_info_dialog_webview" />
 
+    <com.google.android.material.button.MaterialButton
+        android:id="@+id/button_custom_dialog"
+        style="@style/Sample.ButtonStyle"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="32dp"
+        android:text="Show Custom Dialog"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/button_info_list_dialog" />
 </androidx.constraintlayout.widget.ConstraintLayout>