Collapsing Toolbar Layout with search bar

Question

I had a problem with creating something like a search bar on my collapsing toolbar.

Here is the problem:

First, I create a collapsing toolbar

<android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleTextAppearance="@android:color/transparent"
        android:fitsSystemWindows="true"> 
    ... 
</android.support.design.widget.CollapsingToolbarLayout>

Inside CollapsingToolbarLayout, I add some layered image, back button, and a title. It looked like this:

<!-- Background on Verified Store -->
<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:background="@drawable/verifiedkosong"
        app:layout_collapseMode="parallax"
        android:scaleType="centerCrop">

    <!-- Back arrow -->
    <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/arrow_back_white"
            android:layout_margin="16dp"
            android:id="@+id/close" />

    <!-- Activity title on center -->
    <LinearLayout
            android:gravity="center_horizontal|left"
            android:layout_marginEnd="-23dp"
            android:layout_marginTop="-15dp"
            android:id="@+id/viewtext"
            android:layout_below="@+id/close"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <!-- Text image -->
        <ImageView
                android:layout_marginTop="20dp"
                android:id="@+id/imgVerifIcon"
                android:layout_width="match_parent"
                android:layout_height="32dp"
                android:src="@drawable/textshadow"
                android:layout_gravity="bottom" />

    </LinearLayout>

    <!-- Layered image for background -->
    <ImageView
            android:layout_marginTop="110dp"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:src="@drawable/detail_verified"
            android:layout_gravity="bottom"
            android:layout_marginLeft="8dp"/>

</RelativeLayout>

And then, I add a search bar. I make it work as a button. If it tapped, it will be going to another activity (search activity for a sample)

<RelativeLayout
        android:layout_marginTop="185dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@drawable/backallborderradiusstore">

    <!-- SearchBar LinearLayout -->
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        My SearchBar is here
    </LinearLayout>
</RelativeLayout>

After that, I add a toolbar. I still have no clue how to add my search bar on this Toolbar. Here is my Toolbar:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="Verified Store"
        app:layout_collapseMode="pin"/>

Answer 1

I had a problem with creating something like a search bar on my collapsing toolbar.

Here is the problem:

First, I create a collapsing toolbar

<android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleTextAppearance="@android:color/transparent"
        android:fitsSystemWindows="true"> 
    ... 
</android.support.design.widget.CollapsingToolbarLayout>

Inside CollapsingToolbarLayout, I add some layered image, back button, and a title. It looked like this:

<!-- Background on Verified Store -->
<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:background="@drawable/verifiedkosong"
        app:layout_collapseMode="parallax"
        android:scaleType="centerCrop">

    <!-- Back arrow -->
    <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/arrow_back_white"
            android:layout_margin="16dp"
            android:id="@+id/close" />

    <!-- Activity title on center -->
    <LinearLayout
            android:gravity="center_horizontal|left"
            android:layout_marginEnd="-23dp"
            android:layout_marginTop="-15dp"
            android:id="@+id/viewtext"
            android:layout_below="@+id/close"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <!-- Text image -->
        <ImageView
                android:layout_marginTop="20dp"
                android:id="@+id/imgVerifIcon"
                android:layout_width="match_parent"
                android:layout_height="32dp"
                android:src="@drawable/textshadow"
                android:layout_gravity="bottom" />

    </LinearLayout>

    <!-- Layered image for background -->
    <ImageView
            android:layout_marginTop="110dp"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:src="@drawable/detail_verified"
            android:layout_gravity="bottom"
            android:layout_marginLeft="8dp"/>

</RelativeLayout>

And then, I add a search bar. I make it work as a button. If it tapped, it will be going to another activity (search activity for a sample)

<RelativeLayout
        android:layout_marginTop="185dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@drawable/backallborderradiusstore">

    <!-- SearchBar LinearLayout -->
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        My SearchBar is here
    </LinearLayout>
</RelativeLayout>

After that, I add a toolbar. I still have no clue how to add my search bar on this Toolbar. Here is my Toolbar:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="Verified Store"
        app:layout_collapseMode="pin"/>

Answer 2

Not exactly what you looking for, but on scroll hiding the toolbar and showing only the searchview is possible with this code. To achieve something similar to this, just paste this code inside your XML Layout:

      <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.appbar.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true">

                <com.google.android.material.appbar.MaterialToolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|enterAlways" />

                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginHorizontal="10dp"
                    android:background="@color/white"
                    android:orientation="horizontal">

                    <androidx.appcompat.widget.AppCompatEditText
                        android:id="@+id/etSearch"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@null"
                        android:drawableStart="@drawable/ic_toolbar_search"
                        android:drawablePadding="@dimen/margin_6"
                        android:hint="@string/search_hint"
                        android:imeOptions="actionSearch"
                        android:inputType="text"
                        android:maxLines="1"
                        android:padding="5dp"
                        android:textColor="@color/black"
                        android:textColorHint="@color/text_hint"
                        android:textSize="@dimen/text_size_13sp" />

                    <androidx.appcompat.widget.AppCompatImageView
                        android:id="@+id/ivCLear"
                        android:layout_width="@dimen/xlarge_margin"
                        android:layout_height="@dimen/xlarge_margin"
                        android:layout_gravity="center_vertical"
                        android:layout_marginEnd="@dimen/margin_6"
                        android:src="@drawable/ic_close"
                        android:visibility="gone" />
                </androidx.appcompat.widget.LinearLayoutCompat>
            </com.google.android.material.appbar.AppBarLayout>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>