Search option in toolbar as second line

Question

I have used toolbar for search option but what I am unable to understand is how to get the search menu inside toolbar second line like this below.

I have used SearchDialog and done it but it comes like below.

[ 2

but its overlapping like this

Do I have to use collapse bar? Have tried both SearchView and SearchDialog but not sure how to get above result.

Here is my toolbar xml code.

 <com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.GoodIes.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/teal_200"
        app:popupTheme="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" />

</com.google.android.material.appbar.AppBarLayout>

Answer 1

You can add child component inside the Toolbar like below:

    <com.google.android.material.appbar.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#F45465"
        app:popupTheme="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textColor="#000000"
                android:text="Title"
                android:textStyle="bold"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textColor="#000000"
                android:text="Subtitle"
                android:textStyle="bold"/>
        </LinearLayout>
    </androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>

There is many way to archive view like your example, usually I only use Cardview and some TextView for customing my Toolbar.

Edit

For collapsing toolbar you need CoordinatorLayout and CollapsingToolbarLayout, so you need to do something like:

 <?xml version="1.0" encoding="utf-8"?>
 <androidx.coordinatorlayout.widget.CoordinatorLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">
    <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
       <com.google.android.material.appbar.CollapsingToolbarLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:contentScrim="?attr/colorPrimary"
          app:expandedTitleTextAppearance="@android:color/transparent"
          app:layout_scrollFlags="scroll|exitUntilCollapsed">
          <ImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:scaleType="fitXY"
            android:contentDescription="@string/image_desc_movie_detail"
            app:layout_collapseMode="parallax"
            android:layout_marginBottom="1dp"/>

          <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
   
   <androidx.core.widget.NestedScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:clipToPadding="false"
      app:layout_behavior="@string/appbar_scrolling_view_behavior">
          
      Your content here ...

    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

The short explanation, there is ImageView and Toolbar inside CollapsingToolbarLayout. The ImageView will hide/show when your content scroll. There is many long explanation on Google, you will find one.