Implement custom Toolbar View

app/src/main/java/gq/kirmanak/mealient/ui/activity/MainActivity.kt

@@ -4,10 +4,9 @@ import android.os.Bundle
 import android.view.MenuItem
 import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
-import androidx.appcompat.widget.SearchView
-import androidx.appcompat.widget.SearchView.OnQueryTextListener
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.core.view.WindowInsetsControllerCompat
+import androidx.core.view.isVisible
 import androidx.core.view.iterator
 import androidx.drawerlayout.widget.DrawerLayout
 import androidx.navigation.NavController
@@ -60,13 +59,15 @@ class MainActivity : AppCompatActivity(R.layout.main_activity) {
 
     private fun setupUi() {
         binding.toolbar.setNavigationOnClickListener { binding.drawer.open() }
+        binding.toolbar.onSearchQueryChanged { query ->
+            viewModel.onSearchQuery(query.trim().takeUnless { it.isEmpty() })
+        }
         binding.navigationView.setNavigationItemSelectedListener(::onNavigationItemSelected)
         with(WindowInsetsControllerCompat(window, window.decorView)) {
             val isAppearanceLightBars = !isDarkThemeOn()
             isAppearanceLightNavigationBars = isAppearanceLightBars
             isAppearanceLightStatusBars = isAppearanceLightBars
         }
-        setupSearchItem(binding.toolbar.menu.findItem(R.id.search_recipe_action))
         viewModel.uiStateLive.observe(this, ::onUiStateChange)
     }
 
@@ -104,44 +105,22 @@ class MainActivity : AppCompatActivity(R.layout.main_activity) {
             menuItem.isChecked = itemId == uiState.checkedMenuItemId
         }
 
-        if (uiState.navigationVisible) {
+        binding.toolbar.isVisible = uiState.navigationVisible
-            binding.root.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
+        binding.root.setDrawerLockMode(
-            binding.toolbar.setNavigationIcon(R.drawable.ic_menu)
+            if (uiState.navigationVisible) {
-        } else {
+                DrawerLayout.LOCK_MODE_UNLOCKED
-            binding.root.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
+            } else {
-            binding.toolbar.navigationIcon = null
+                DrawerLayout.LOCK_MODE_LOCKED_CLOSED
-        }
-
-        binding.toolbar.menu.findItem(R.id.search_recipe_action).isVisible = uiState.searchVisible
-    }
-
-    private fun setupSearchItem(searchItem: MenuItem) {
-        logger.v { "setupSearchItem() called with: searchItem = $searchItem" }
-        val searchView = searchItem.actionView as? SearchView
-        if (searchView == null) {
-            logger.e { "setupSearchItem: search item's actionView is null or not SearchView" }
-            return
-        }
-
-        searchView.queryHint = getString(R.string.search_recipes_hint)
-        searchView.isSubmitButtonEnabled = false
-        searchView.setIconifiedByDefault(false)
-
-        searchView.setOnCloseListener {
-            logger.v { "onClose() called" }
-            viewModel.onSearchQuery(null)
-            false
-        }
-
-        searchView.setOnQueryTextListener(object : OnQueryTextListener {
-            override fun onQueryTextSubmit(query: String?): Boolean = true
-
-            override fun onQueryTextChange(newText: String?): Boolean {
-                logger.v { "onQueryTextChange() called with: newText = $newText" }
-                viewModel.onSearchQuery(newText?.trim()?.takeUnless { it.isEmpty() })
-                return true
             }
-        })
+        )
+
+        binding.toolbar.isSearchVisible = uiState.searchVisible
+
+        if (uiState.searchVisible) {
+            binding.toolbarHolder.setBackgroundResource(R.drawable.bg_toolbar)
+        } else {
+            binding.toolbarHolder.background = null
+        }
     }
 
     private fun navigateTo(directions: NavDirections) {

app/src/main/java/gq/kirmanak/mealient/ui/activity/ToolbarView.kt

@@ -0,0 +1,41 @@
+package gq.kirmanak.mealient.ui.activity
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import androidx.annotation.AttrRes
+import androidx.annotation.StyleRes
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.core.view.isVisible
+import androidx.core.widget.doAfterTextChanged
+import gq.kirmanak.mealient.databinding.ViewToolbarBinding
+
+class ToolbarView @JvmOverloads constructor(
+    context: Context,
+    attributeSet: AttributeSet? = null,
+    @AttrRes defStyleAttr: Int = 0,
+    @StyleRes defStyleRes: Int = 0,
+) : ConstraintLayout(context, attributeSet, defStyleAttr, defStyleRes) {
+
+    private lateinit var binding: ViewToolbarBinding
+
+    var isSearchVisible: Boolean
+        get() = binding.searchEdit.isVisible
+        set(value) {
+            binding.searchEdit.isVisible = value
+        }
+
+    override fun onFinishInflate() {
+        super.onFinishInflate()
+        val inflater = LayoutInflater.from(context)
+        binding = ViewToolbarBinding.inflate(inflater, this)
+    }
+
+    fun setNavigationOnClickListener(listener: OnClickListener?) {
+        binding.navigationIcon.setOnClickListener(listener)
+    }
+
+    fun onSearchQueryChanged(block: (String) -> Unit) {
+        binding.searchEdit.doAfterTextChanged { block(it.toString()) }
+    }
+}

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

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+
+	<corners android:radius="20dp" />
+	<solid android:color="?colorSurfaceVariant" />
+
+</shape>

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

@@ -73,7 +73,7 @@
 
 		<com.google.android.material.card.MaterialCardView
 			android:id="@+id/ingredients_holder"
-			style="?materialCardViewElevatedStyle"
+			style="?materialCardViewFilledStyle"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
 			android:layout_marginHorizontal="@dimen/margin_small"
@@ -93,8 +93,8 @@
 					android:id="@+id/ingredients_header"
 					android:layout_width="match_parent"
 					android:layout_height="wrap_content"
-					android:layout_marginHorizontal="17dp"
+					android:layout_marginHorizontal="@dimen/margin_medium"
-					android:layout_marginTop="16dp"
+					android:layout_marginTop="@dimen/margin_medium"
 					android:text="@string/fragment_recipe_info_ingredients_header"
 					android:textAppearance="?textAppearanceHeadline6" />
 
@@ -102,7 +102,7 @@
 					android:id="@+id/ingredients_list"
 					android:layout_width="match_parent"
 					android:layout_height="wrap_content"
-					android:layout_marginHorizontal="10dp"
+					android:layout_marginHorizontal="@dimen/margin_small"
 					app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
 					tools:itemCount="3"
 					tools:listitem="@layout/view_holder_ingredient" />

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

@@ -17,16 +17,15 @@
 			android:id="@+id/toolbar_holder"
 			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
+			android:layout_marginHorizontal="@dimen/margin_medium"
+			android:background="@drawable/bg_toolbar"
 			app:liftOnScroll="true">
 
-			<com.google.android.material.appbar.MaterialToolbar
+			<gq.kirmanak.mealient.ui.activity.ToolbarView
 				android:id="@+id/toolbar"
-				style="?toolbarSurfaceStyle"
 				android:layout_width="match_parent"
-				android:layout_height="?actionBarSize"
+				android:layout_height="wrap_content"
-				app:layout_scrollFlags="scroll|snap|enterAlways"
+				app:layout_scrollFlags="scroll|snap|enterAlways" />
-				app:menu="@menu/main_toolbar"
-				app:navigationIcon="@drawable/ic_menu" />
 		</com.google.android.material.appbar.AppBarLayout>
 
 		<androidx.fragment.app.FragmentContainerView
@@ -34,6 +33,7 @@
 			android:name="androidx.navigation.fragment.NavHostFragment"
 			android:layout_width="match_parent"
 			android:layout_height="match_parent"
+			android:layout_marginTop="@dimen/margin_small"
 			app:defaultNavHost="true"
 			app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 	</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

@@ -2,7 +2,7 @@
 <com.google.android.material.card.MaterialCardView 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"
-	style="?materialCardViewElevatedStyle"
+	style="?materialCardViewFilledStyle"
 	android:layout_width="match_parent"
 	android:layout_height="wrap_content"
 	android:layout_margin="@dimen/margin_small">

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

@@ -2,12 +2,12 @@
 <com.google.android.material.card.MaterialCardView 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"
-	style="?materialCardViewElevatedStyle"
+	style="?materialCardViewFilledStyle"
 	android:layout_width="match_parent"
 	android:layout_height="wrap_content"
-	android:layout_marginVertical="7dp"
+	android:layout_marginVertical="@dimen/margin_small"
-	android:layout_marginStart="16dp"
+	android:layout_marginStart="@dimen/margin_medium"
-	android:layout_marginEnd="19dp">
+	android:layout_marginEnd="@dimen/margin_medium">
 
 	<androidx.constraintlayout.widget.ConstraintLayout
 		android:layout_width="match_parent"

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

@@ -7,7 +7,7 @@
 	<TextView
 		android:layout_width="0dp"
 		android:layout_height="wrap_content"
-		android:layout_marginStart="16dp"
+		android:layout_marginStart="@dimen/margin_medium"
 		android:layout_marginTop="@dimen/margin_small"
 		android:text="@string/menu_navigation_drawer_header"
 		android:textAppearance="?attr/textAppearanceHeadlineSmall"

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

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge 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"
+	tools:context=".ui.activity.ToolbarView"
+	tools:layout_height="wrap_content"
+	tools:layout_width="match_parent"
+	tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
+
+	<ImageView
+		android:id="@+id/navigation_icon"
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		android:layout_marginStart="@dimen/margin_small"
+		android:contentDescription="@string/view_toolbar_navigation_icon_content_description"
+		android:src="@drawable/ic_menu"
+		app:layout_constraintBottom_toBottomOf="parent"
+		app:layout_constraintStart_toStartOf="parent"
+		app:layout_constraintTop_toTopOf="parent" />
+
+	<EditText
+		android:id="@+id/search_edit"
+		android:layout_width="0dp"
+		android:layout_height="wrap_content"
+		android:layout_margin="@dimen/margin_small"
+		android:background="@null"
+		android:hint="@string/search_recipes_hint"
+		android:importantForAutofill="no"
+		android:inputType="textFilter"
+		android:textAppearance="?textAppearanceBodyLarge"
+		android:textColor="?colorOnSurfaceVariant"
+		app:layout_constraintBottom_toBottomOf="parent"
+		app:layout_constraintEnd_toEndOf="parent"
+		app:layout_constraintStart_toEndOf="@id/navigation_icon"
+		app:layout_constraintTop_toTopOf="parent" />
+</merge>

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

@@ -49,4 +49,5 @@
 	<string name="fragment_recipes_load_failure_toast_no_reason">Ошибка загрузки.</string>
 	<string name="menu_navigation_drawer_change_url">Сменить URL</string>
 	<string name="search_recipes_hint">Найти рецепты</string>
+	<string name="view_toolbar_navigation_icon_content_description">Открыть меню навигации</string>
 </resources>

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

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 	<dimen name="margin_small">8dp</dimen>
+	<dimen name="margin_medium">16dp</dimen>
 </resources>

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

@@ -52,4 +52,5 @@
 	<string name="menu_navigation_drawer_change_url">Change URL</string>
 	<string name="search_recipes_hint">Search recipes</string>
 	<string name="menu_navigation_drawer_header" translatable="false">@string/app_name</string>
+	<string name="view_toolbar_navigation_icon_content_description">Open navigation drawer</string>
 </resources>