New Snackbar spec

catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/SnackBarCatalogFragment.kt

@@ -7,11 +7,11 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.inputmethod.InputMethodManager
 import android.widget.Button
-import android.widget.RadioButton
 import androidx.fragment.app.Fragment
 import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.feedback.SnackbarBuilder
 import com.telefonica.mistica.feedback.SnackbarLength
+import com.telefonica.mistica.input.CheckBoxInput
 import com.telefonica.mistica.input.DropDownInput
 import com.telefonica.mistica.input.TextInput
 
@@ -33,7 +33,8 @@ class SnackBarCatalogFragment : Fragment() {
         val inputAction: TextInput = view.findViewById(R.id.input_snackbar_action)
         val dropDownInput: DropDownInput = view.findViewById(R.id.dropdown_snackbar_type)
         val createButton: Button = view.findViewById(R.id.button_create_snackbar)
-        val snackbarLength10: RadioButton = view.findViewById(R.id.radio_button_10_sec)
+        val snackbarIndefiniteLength: CheckBoxInput = view.findViewById(R.id.infinite_length_checkbox)
+        val alwaysShowDismiss: CheckBoxInput = view.findViewById(R.id.always_show_dismiss_checkbox)
 
         with(dropDownInput.dropDown) {
             setAdapter(
@@ -51,21 +52,34 @@ class SnackBarCatalogFragment : Fragment() {
             SnackbarBuilder(view, inputText.text.toString()).apply {
                 inputAction.text.toString().let { actionText ->
                     if (actionText.isNotEmpty()) {
-                        withAction(actionText, { })
+                        withAction(actionText) { }
                     }
                 }
-                val duration = when {
-                    snackbarLength10.isChecked -> SnackbarLength.LONG
-                    else -> SnackbarLength.SHORT
+                if (alwaysShowDismiss.isChecked()) {
+                    withDismiss()
                 }
+
+                val withIndefiniteLength = snackbarIndefiniteLength.isChecked()
                 when (SnackBarType.valueOf(dropDownInput.dropDown.text.toString())) {
-                    SnackBarType.INFORMATIVE -> showInformative(duration)
-                    SnackBarType.CRITICAL -> showCritical(duration)
+                    SnackBarType.INFORMATIVE -> show(withIndefiniteLength, SnackbarBuilder::showInformative, SnackbarBuilder::showInformative)
+                    SnackBarType.CRITICAL -> show(withIndefiniteLength, SnackbarBuilder::showCritical, SnackbarBuilder::showCritical)
                 }
             }
         }
     }
 
+    private inline fun SnackbarBuilder.show(
+        withIndefiniteLength: Boolean,
+        showWithLength: SnackbarBuilder.(SnackbarLength) -> Unit,
+        showWithoutLength: SnackbarBuilder.() -> Unit,
+    ) {
+        if (withIndefiniteLength) {
+            showWithLength(SnackbarLength.INDEFINITE)
+        } else {
+            showWithoutLength()
+        }
+    }
+
     private fun View.hideKeyboard() {
         val inputMethodManager =
             context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager

catalog/src/main/res/layout/screen_snackbar_catalog.xml

@@ -31,41 +31,29 @@
         android:inputType="text"
         app:inputHint="SnackBar Action Text" />
 
-    <com.telefonica.mistica.input.DropDownInput
-        android:id="@+id/dropdown_snackbar_type"
-        android:layout_width="match_parent"
+    <com.telefonica.mistica.input.CheckBoxInput
+        android:id="@+id/always_show_dismiss_checkbox"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="8dp"
-        app:inputHint="SnackBar Type" />
-
-    <RadioGroup
-        android:id="@+id/radio_group_snackbar_length"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="12dp"
-        android:gravity="center"
-        android:orientation="horizontal">
-
-        <RadioButton
-            android:id="@+id/radio_button_5_sec"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:checked="true"
-            android:text="5 seconds" />
+        android:layout_gravity="start"
+        app:inputChecked="false"
+        app:inputCheckText="Always show dismiss"/>
 
-        <RadioButton
-            android:id="@+id/radio_button_10_sec"
+    <com.telefonica.mistica.input.CheckBoxInput
+            android:id="@+id/infinite_length_checkbox"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="10 seconds" />
+            android:layout_marginTop="8dp"
+            android:layout_gravity="start"
+            app:inputChecked="false"
+            app:inputCheckText="Infinite length"/>
 
-    </RadioGroup>
-
-    <TextView
-        android:layout_width="wrap_content"
+    <com.telefonica.mistica.input.DropDownInput
+        android:id="@+id/dropdown_snackbar_type"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center"
-        android:text="Time only applies if no action set" />
+        app:inputHint="SnackBar Type" />
 
     <com.telefonica.mistica.button.Button
         android:id="@+id/button_create_snackbar"

library/src/main/java/com/telefonica/mistica/feedback/README.md

@@ -1,6 +1,7 @@
 # Snackbars
 
-Snackbars allow to show contextual information usually after the user has done any action. Snackbars are displayed during 5 seconds on the screen if there isn't an action associated, and 10 when is it. There are also two types, informative and critical:
+Snackbars allow to show contextual information usually after the user has done any action. There are two types, informative and critical and they are 
+displayed during 5 seconds, 10 seconds or during an indefinite amount of time depending on the duration specified. 
 
 <p align="center">
     <img src="../../../../../../../../doc/images/snackbars/snackbars_informative.gif">
@@ -20,9 +21,25 @@ Builder allows SnackBar customization:
   * Adds an action with the given string resource and the given click listener
 * `withCallback(Callback callback)`
   * Adds a callback for dismiss action. Dismiss action by definition will only work when using a coordinator layout as anchor view for the SnackBar.
+* `withDismiss()`
+  * Adds a dismiss button to the Snackbar layout. 
 
-Finally, depending on the type of SnackBar, use one of the following to display it.
-These methods allow an argument to choose the duration betweeen SHORT (5 seconds) or LONG (10 seconds). SHORT is the default.
+Finally, depending on the type of SnackBar, use one of the following methods to display it:
+* `showInformative(snackbarLength: SnackbarLength)`
 * `showInformative()`
-* `showInformative(SnackbarLength.SHORT)`
+* `showCritical(snackbarLength: SnackbarLength)`
 * `showCritical()`
+
+Where `SnackbarLength` has three different possible values:
+* `SHORT`: 5 seconds
+* `LONG`: 10 seconds
+* `INDEFINITE`: The Snackbar won't dismiss unless it is done manually
+
+If no `SnackbarLength` is provided, the following logic will be applied:
+* If no action is provided: default length will be `SHORT`
+* If an action is provided: default length will be `LONG`
+
+However, if a `SnackbarLength` is provided, the following logic is applied:
+- If `LONG` length is provided and there is no action, `SHORT` will be set instead.
+- If `SHORT` length is provided and there is an action, `LONG` will be set instead.
+- `INFINTE` length is valid with and without an action.

library/src/main/java/com/telefonica/mistica/feedback/SnackbarBuilder.kt

@@ -1,16 +1,19 @@
 package com.telefonica.mistica.feedback
 
+import android.annotation.SuppressLint
 import android.content.res.ColorStateList
 import android.text.Spannable
 import android.text.SpannableString
 import android.text.style.ForegroundColorSpan
+import android.view.LayoutInflater
 import android.view.View
-import android.widget.TextView
 import androidx.annotation.AttrRes
 import androidx.annotation.StringRes
+import com.google.android.material.snackbar.BaseTransientBottomBar.BaseCallback
 import com.google.android.material.snackbar.Snackbar
 import com.telefonica.mistica.R
 import com.telefonica.mistica.feedback.SnackBarBehaviorConfig.areSticky
+import com.telefonica.mistica.feedback.snackbar.CustomSnackbarLayout
 import com.telefonica.mistica.util.getThemeColor
 
 open class SnackbarBuilder(view: View?, text: String) {
@@ -20,6 +23,10 @@ open class SnackbarBuilder(view: View?, text: String) {
     private var actionText: String? = null
     private var actionListener: View.OnClickListener? = null
     private var callback: Snackbar.Callback? = null
+    private var withDismiss = false
+
+    private val hasAction: Boolean
+        get() = actionText != null
 
     constructor(view: View, @StringRes resId: Int) : this(view, view.resources.getString(resId))
 
@@ -41,6 +48,10 @@ open class SnackbarBuilder(view: View?, text: String) {
         this.callback = callback
     }
 
+    open fun withDismiss(): SnackbarBuilder = apply{
+        this.withDismiss = true
+    }
+
     @JvmOverloads
     open fun showInformative(snackbarLength: SnackbarLength = SnackbarLength.SHORT): Snackbar {
         val spannable = getSpannable(R.attr.colorTextPrimaryInverse)
@@ -62,7 +73,7 @@ open class SnackbarBuilder(view: View?, text: String) {
     }
 
     private fun setActionTextColor(snackbar: Snackbar, @AttrRes colorRes: Int) {
-        snackbar.setActionTextColor(view.context.getThemeColor(colorRes))
+        snackbar.getCustomLayout().setActionTextColor(view.context.getThemeColor(colorRes))
     }
 
     private fun setBackgroundColor(snackbar: Snackbar, @AttrRes colorRes: Int) {
@@ -82,47 +93,100 @@ open class SnackbarBuilder(view: View?, text: String) {
         return spannable
     }
 
-    @Suppress("DEPRECATION")
     private fun createSnackbar(text: CharSequence, snackbarLength: SnackbarLength): Snackbar {
         val duration = when {
-            areSticky() -> Snackbar.LENGTH_INDEFINITE
-            actionText != null -> SnackbarLength.LONG.duration()
-            else -> snackbarLength.duration()
-        }
-        val snackbar = Snackbar.make(view, text, duration)
-        setTextStyles(snackbar)
-        if (actionText != null) {
-            snackbar.setAction(actionText, actionListener)
-        }
-        if (callback != null) {
-            snackbar.setCallback(callback)
-        }
+            areSticky() -> SnackbarLength.INDEFINITE
+            isInvalidLengthWhenThereIsAction(snackbarLength) ->  SnackbarLength.LONG
+            isInvalidLengthWhenThereIsNoAction(snackbarLength) -> SnackbarLength.SHORT
+            else -> snackbarLength
+        }.duration()
+
+        val snackbar = inflateCustomSnackbar(duration)
+
+        snackbar.getCustomLayout().setText(text)
+        snackbar.setCustomAction()
+        snackbar.showDismissActionIfNeeded(hasInfiniteDuration = snackbarLength == SnackbarLength.INDEFINITE)
+        snackbar.addCallbackIfNeeded()
+
+        return snackbar
+    }
+
+    private fun isInvalidLengthWhenThereIsAction(length: SnackbarLength): Boolean =
+        hasAction && length == SnackbarLength.SHORT
+
+    private fun isInvalidLengthWhenThereIsNoAction(length: SnackbarLength): Boolean =
+        !hasAction && length == SnackbarLength.LONG
+
+    // We are inflating a custom layout instead of reusing existing Snackbar layout implementation because
+    // we need to add a dismiss X button and despite of it being included by Material 3 definition,
+    // that dismiss button is not supported at the moment in the Android Material library.
+    // See: https://github.com/material-components/material-components-android/issues/3049
+    @SuppressLint("ShowToast")
+    private fun inflateCustomSnackbar(duration: Int): Snackbar {
+        // Since we are inflating a custom layout, we pass a dummy text and apply
+        // the expected one later on to our custom TextView
+        val snackbar = Snackbar.make(view, "", duration)
+        val snackbarLayout = snackbar.view as Snackbar.SnackbarLayout
+
+        snackbarLayout.removeAllViews()
+        val customLayout = LayoutInflater.from(snackbarLayout.context).inflate(R.layout.snackbar_layout, snackbarLayout, false)
+        snackbarLayout.addView(customLayout)
+
         return snackbar
     }
 
-    @Suppress("DEPRECATION")
-    private fun setTextStyles(snackbar: Snackbar) {
-        val text = snackbar.view.findViewById<TextView>(R.id.snackbar_text)
-        text.maxLines = MAX_TEXT_LINES
-        text.setTextAppearance(text.context, R.style.AppTheme_TextAppearance_Preset2)
-        val action = snackbar.view.findViewById<TextView>(R.id.snackbar_action)
-        action.setTextAppearance(action.context, R.style.AppTheme_TextAppearance_PresetLink)
-        action.isAllCaps = false
+    private fun Snackbar.setCustomAction() {
+        actionText?.let { text ->
+            getCustomLayout().setAction(
+                actionText = text,
+                listener = {
+                    actionListener?.onClick(it)
+                    dispatchDismissedByActionEvent()
+                }
+            )
+        }
     }
 
-    companion object {
-        private const val MAX_TEXT_LINES = 4
+    private fun Snackbar.dispatchDismissedByActionEvent() {
+        // We are overwriting the Snackbar implementation in order to have support for certain UI elements like the dismiss button.
+        // Given that, we are losing some built in capabilities such as BaseCallback.DISMISS_EVENT_ACTION event.
+        // The correct way to dispatch a BaseCallback.DISMISS_EVENT_ACTION event would be to use Snackbar::dispatchDismiss method.
+        // However that method is protected (we don't have access to it) and invoking Snackbar::dismiss with a registered callback would trigger
+        // the DISMISS_EVENT_MANUAL event. The workaround is to remove the callback if present, manually invoke the callback method and then invoking
+        // a dismiss that won't trigger a second event.
+        removeCallback(callback)
+        callback?.onDismissed(this, BaseCallback.DISMISS_EVENT_ACTION)
+        dismiss()
+    }
+
+    private fun Snackbar.getCustomLayout(): CustomSnackbarLayout =
+        this.view.findViewById(R.id.custom_layout)
+
+    private fun Snackbar.showDismissActionIfNeeded(hasInfiniteDuration: Boolean) {
+        val userShouldBeAbleToDismissSnackbar = !hasAction && hasInfiniteDuration
+
+        if (withDismiss || userShouldBeAbleToDismissSnackbar) {
+            getCustomLayout().setOnDismissClickListener { dismiss() }
+        }
+    }
+
+    private fun Snackbar.addCallbackIfNeeded() {
+        if (callback != null) {
+            addCallback(callback)
+        }
     }
 }
 
 enum class SnackbarLength {
     SHORT,
-    LONG;
+    LONG,
+    INDEFINITE;
 
     fun duration(): Int =
         when (this) {
             SHORT -> DURATION_WITHOUT_ACTION
             LONG -> DURATION_WITH_ACTION
+            INDEFINITE -> Snackbar.LENGTH_INDEFINITE
         }
 
     companion object {