Show cancel button when searching

presentation/src/main/java/com/moez/QKSMS/feature/contacts/ContactsActivity.kt

@@ -21,7 +21,9 @@ package com.moez.QKSMS.feature.contacts
 import android.app.Activity
 import android.content.Intent
 import android.os.Bundle
+import androidx.core.view.isVisible
 import androidx.lifecycle.ViewModelProviders
+import com.jakewharton.rxbinding2.view.clicks
 import com.jakewharton.rxbinding2.widget.editorActions
 import com.jakewharton.rxbinding2.widget.textChanges
 import com.moez.QKSMS.R
@@ -53,7 +55,7 @@ class ContactsActivity : QkThemedActivity(), ContactsContract {
     @Inject lateinit var viewModelFactory: ViewModelFactory
 
     override val queryChangedIntent: Observable<CharSequence> by lazy { search.textChanges() }
-    override val queryBackspaceIntent: Observable<*> by lazy { search.backspaces }
+    override val queryClearedIntent: Observable<*> by lazy { cancel.clicks() }
     override val queryEditorActionIntent: Observable<Int> by lazy { search.editorActions() }
     override val composeItemPressedIntent: Subject<ComposeItem> by lazy { contactsAdapter.clicks }
     override val composeItemLongPressedIntent: Subject<ComposeItem> by lazy { contactsAdapter.longClicks }
@@ -86,6 +88,8 @@ class ContactsActivity : QkThemedActivity(), ContactsContract {
     }
 
     override fun render(state: ContactsState) {
+        cancel.isVisible = state.query.length > 1
+
         contactsAdapter.data = state.composeItems
 
         if (state.selectedContact != null && !phoneNumberDialog.isShowing) {
@@ -97,6 +101,10 @@ class ContactsActivity : QkThemedActivity(), ContactsContract {
         }
     }
 
+    override fun clearQuery() {
+        search.text = null
+    }
+
     override fun openKeyboard() {
         search.postDelayed({
             search.showKeyboard()

presentation/src/main/java/com/moez/QKSMS/feature/contacts/ContactsContract.kt

@@ -28,13 +28,14 @@ import io.reactivex.subjects.Subject
 interface ContactsContract : QkView<ContactsState> {
 
     val queryChangedIntent: Observable<CharSequence>
-    val queryBackspaceIntent: Observable<*>
+    val queryClearedIntent: Observable<*>
     val queryEditorActionIntent: Observable<Int>
     val composeItemPressedIntent: Subject<ComposeItem>
     val composeItemLongPressedIntent: Subject<ComposeItem>
     val phoneNumberSelectedIntent: Subject<Optional<Long>>
     val phoneNumberActionIntent: Subject<PhoneNumberAction>
 
+    fun clearQuery()
     fun openKeyboard()
     fun finish(result: HashMap<String, String?>)
 

presentation/src/main/java/com/moez/QKSMS/feature/contacts/ContactsState.kt

@@ -22,6 +22,7 @@ import com.moez.QKSMS.feature.compose.editing.ComposeItem
 import com.moez.QKSMS.model.Contact
 
 data class ContactsState(
+    val query: String = "",
     val composeItems: List<ComposeItem> = ArrayList(),
     val selectedContact: Contact? = null // For phone number picker
 )

presentation/src/main/java/com/moez/QKSMS/feature/contacts/ContactsViewModel.kt

@@ -85,6 +85,16 @@ class ContactsViewModel @Inject constructor(
             shouldOpenKeyboard = false
         }
 
+        // Update the state's query, so we know if we should show the cancel button
+        view.queryChangedIntent
+                .autoDisposable(view.scope())
+                .subscribe { query -> newState { copy(query = query.toString()) } }
+
+        // Clear the query
+        view.queryClearedIntent
+                .autoDisposable(view.scope())
+                .subscribe { view.clearQuery() }
+
         // Update the list of contact suggestions based on the query input, while also filtering out any contacts
         // that have already been selected
         Observables

presentation/src/main/res/layout/contacts_activity.xml

@@ -47,21 +47,47 @@
         style="@style/Toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        app:contentInsetStartWithNavigation="0dp"
         app:layout_constrainedHeight="true"
         app:layout_constraintTop_toTopOf="parent">
 
-        <com.moez.QKSMS.common.widget.QkEditText
-            android:id="@+id/search"
+        <FrameLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:background="@null"
-            android:hint="@string/title_compose"
-            android:imeOptions="flagNoExtractUi"
-            android:inputType="textFilter|textNoSuggestions"
-            android:privateImeOptions="nm"
-            android:textColor="?android:attr/textColorPrimary"
-            android:textColorHint="?android:attr/textColorTertiary"
-            app:textSize="primary" />
+            android:animateLayoutChanges="true">
+
+            <com.moez.QKSMS.common.widget.QkEditText
+                android:id="@+id/search"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_marginTop="8dp"
+                android:layout_marginEnd="8dp"
+                android:layout_marginBottom="8dp"
+                android:background="@drawable/rounded_rectangle_24dp"
+                android:backgroundTint="?attr/bubbleColor"
+                android:hint="@string/title_compose"
+                android:imeOptions="flagNoExtractUi"
+                android:inputType="textFilter|textNoSuggestions"
+                android:paddingStart="16dp"
+                android:paddingEnd="16dp"
+                android:privateImeOptions="nm"
+                android:textColor="?android:attr/textColorPrimary"
+                android:textColorHint="?android:attr/textColorTertiary"
+                app:textSize="primary" />
+
+            <ImageView
+                android:id="@+id/cancel"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:layout_gravity="center_vertical|end"
+                android:layout_marginEnd="8dp"
+                android:background="?android:attr/selectableItemBackgroundBorderless"
+                android:padding="8dp"
+                android:src="@drawable/ic_cancel_black_24dp"
+                android:tint="?android:attr/textColorSecondary"
+                android:visibility="gone" />
+
+        </FrameLayout>
 
     </androidx.appcompat.widget.Toolbar>
 

presentation/src/main/res/layout/main_activity.xml

@@ -53,7 +53,7 @@
                 android:layout_marginEnd="8dp"
                 android:layout_marginBottom="8dp"
                 android:background="@drawable/rounded_rectangle_24dp"
-                android:backgroundTint="?android:attr/queryBackground"
+                android:backgroundTint="?attr/bubbleColor"
                 android:hint="@string/title_conversations"
                 android:paddingStart="16dp"
                 android:paddingEnd="16dp"

presentation/src/main/res/values-night/themes.xml

@@ -24,7 +24,7 @@
     <style name="AppBaseTheme" parent="Theme.AppCompat.NoActionBar">
         <item name="android:divider">@color/separatorDark</item>
         <item name="android:navigationBarColor">@color/backgroundDark</item>
-        <item name="android:queryBackground">@color/toolbarSearchBackgroundDark</item>
+        <item name="android:queryBackground">@color/bubbleDark</item>
         <item name="android:statusBarColor">@color/statusBarDark</item>
         <item name="android:textColorPrimary">@color/text_primary</item>
         <item name="android:textColorSecondary">@color/text_secondary</item>

presentation/src/main/res/values/colors.xml

@@ -30,8 +30,6 @@
     <color name="toolbarLight">#FFFFFF</color>
     <color name="toolbarDark">#1d262b</color>
     <color name="toolbarTranslucent">#88000000</color>
-    <color name="toolbarSearchBackgroundLight">#0D000000</color>
-    <color name="toolbarSearchBackgroundDark">#26000000</color>
 
     <color name="backgroundLight">#FFFFFF</color>
     <color name="backgroundDark">#192025</color>

presentation/src/main/res/values/themes.xml

@@ -35,7 +35,7 @@
 
     <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:divider">@color/separatorLight</item>
-        <item name="android:queryBackground">@color/toolbarSearchBackgroundLight</item>
+        <item name="android:queryBackground">@color/bubbleLight</item>
         <item name="android:statusBarColor">@color/black</item>
         <item name="android:textColorPrimary">@color/text_primary</item>
         <item name="android:textColorSecondary">@color/text_secondary</item>