Replace search bar with custom layouts

app/src/main/java/de/christinecoenen/code/zapp/tv/mediathek/MediathekListFragment.kt

@@ -5,8 +5,8 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.core.view.isVisible
+import androidx.core.widget.addTextChangedListener
 import androidx.fragment.app.Fragment
-import androidx.leanback.widget.SearchBar
 import androidx.lifecycle.lifecycleScope
 import androidx.paging.LoadState
 import androidx.recyclerview.widget.LinearLayoutManager
@@ -25,8 +25,7 @@ import org.koin.androidx.viewmodel.ext.android.viewModel
 
 
 class MediathekListFragment : Fragment(),
-	de.christinecoenen.code.zapp.app.mediathek.ui.list.adapter.ListItemListener,
-	SearchBar.SearchBarListener {
+	de.christinecoenen.code.zapp.app.mediathek.ui.list.adapter.ListItemListener {
 
 	private val mediathekRepository: MediathekRepository by inject()
 
@@ -47,7 +46,20 @@ class MediathekListFragment : Fragment(),
 		val layoutManager = LinearLayoutManager(binding.root.context)
 		binding.list.layoutManager = layoutManager
 
-		binding.search.setSearchBarListener(this)
+		// clear search field
+		binding.deleteSearchButton.setOnClickListener { binding.search.editableText.clear() }
+
+		// search text change
+		binding.search.addTextChangedListener {
+			viewmodel.setSearchQueryFilter(it?.toString())
+		}
+
+		// hack to get focus to the input field
+		binding.searchWrapper.setOnFocusChangeListener { _, isFocused ->
+			if (isFocused) {
+				binding.search.requestFocus()
+			}
+		}
 
 		adapter = MediathekItemAdapter(MediathekShowComparator, this)
 		binding.list.adapter = adapter.withLoadStateFooter(FooterLoadStateAdapter(adapter::retry))
@@ -98,18 +110,6 @@ class MediathekListFragment : Fragment(),
 		// no action
 	}
 
-	override fun onSearchQueryChange(query: String?) {
-		viewmodel.setSearchQueryFilter(query)
-	}
-
-	override fun onSearchQuerySubmit(query: String?) {
-
-	}
-
-	override fun onKeyboardDismiss(query: String?) {
-
-	}
-
 	private suspend fun saveAndOpenShow(show: MediathekShow) {
 		val persistedShow = mediathekRepository.persistOrUpdateShow(show).first()
 

app/src/main/res/drawable/ic_baseline_close_24.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
+</vector>

app/src/main/res/layout/tv_fragment_mediathek_list.xml

@@ -7,16 +7,57 @@
 	android:layout_marginVertical="4dp"
 	android:paddingHorizontal="64dp">
 
-	<androidx.leanback.widget.SearchBar
-		android:id="@+id/search"
+	<LinearLayout
+		android:id="@+id/search_wrapper"
 		android:layout_width="0dp"
 		android:layout_height="wrap_content"
 		android:layout_marginVertical="16dp"
-		android:nextFocusDown="@id/list"
+		android:background="@color/colorSurface"
+		android:focusable="true"
+		android:orientation="horizontal"
+		android:padding="8dp"
 		app:layout_constraintBottom_toTopOf="@id/list"
 		app:layout_constraintEnd_toEndOf="parent"
 		app:layout_constraintStart_toStartOf="parent"
-		app:layout_constraintTop_toTopOf="parent" />
+		app:layout_constraintTop_toTopOf="parent">
+
+		<ImageView
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_weight="1"
+			android:alpha="0.5"
+			android:contentDescription="@null"
+			android:gravity="center_vertical"
+			android:paddingVertical="8dp"
+			android:paddingEnd="8dp"
+			android:src="@drawable/ic_baseline_search_24" />
+
+		<androidx.leanback.widget.SearchEditText
+			android:id="@+id/search"
+			android:layout_width="0dp"
+			android:layout_height="match_parent"
+			android:layout_weight="16"
+			android:clickable="true"
+			android:focusable="true"
+			android:focusableInTouchMode="true"
+			android:gravity="center_vertical"
+			android:hint="@string/search_query_hint_mediathek"
+			android:imeOptions="actionSearch"
+			android:inputType="text"
+			android:maxLines="1"
+			android:textAppearance="@style/TextAppearance.Leanback.Header" />
+
+		<ImageButton
+			android:id="@+id/delete_search_button"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_weight="1"
+			android:background="@color/tv_card_foreground_color"
+			android:contentDescription="@string/delete_search_query_content_description"
+			android:padding="8dp"
+			android:src="@drawable/ic_baseline_close_24" />
+
+	</LinearLayout>
 
 	<androidx.recyclerview.widget.RecyclerView
 		android:id="@+id/list"
@@ -27,9 +68,8 @@
 		android:nextFocusUp="@id/search"
 		android:paddingBottom="16dp"
 		android:verticalSpacing="16dp"
-		app:focusOutFront="true"
 		app:layout_constraintBottom_toBottomOf="parent"
-		app:layout_constraintTop_toBottomOf="@id/search"
+		app:layout_constraintTop_toBottomOf="@id/search_wrapper"
 		tools:listitem="@layout/tv_fragment_mediathek_list_item" />
 
 	<ProgressBar

app/src/main/res/values-en/strings.xml

@@ -79,6 +79,7 @@
 	<string name="action_remove">Remove</string>
 
 	<string name="search_query_hint_mediathek">Search media center…</string>
+	<string name="delete_search_query_content_description">Delete query</string>
 
 	<string name="menu_refresh">Refresh</string>
 	<string name="menu_retry">Reload</string>

app/src/main/res/values/strings.xml

@@ -79,6 +79,7 @@
 	<string name="action_remove">Entfernen</string>
 
 	<string name="search_query_hint_mediathek">Mediathek durchsuchen…</string>
+	<string name="delete_search_query_content_description">Suche löschen</string>
 
 	<string name="menu_refresh">Aktualisieren</string>
 	<string name="menu_retry">Wiederholen</string>