How to implement a custom SearchView layout?

Question

I am trying to implement a custom SearchView layout. I have successfully changed many of the attributes of android.support.v7.appcompat.SearchView such as background color and text color, but I am wanting to customize even more. So I made my own search_view_layout.xml file, but I cannot figure out how to implement it. This is the search_view_layout.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_gravity="top"
              android:background="#FFFFFF"
              android:layout_width="match_parent"
              android:layout_height="40dp"
              android:paddingLeft="5dp"
              android:paddingTop="5dp"
              android:paddingRight="5dp"
              android:paddingBottom="5dp"
              android:padding="5dp">

    <SearchView
        android:id="@+id/leftMenuSearch"
        android:background="#FFFFFF"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:queryHint="What are you looking for?"
        android:layout_weight="1"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:maxWidth="1000dp"/>

    <Button
        android:id="@+id/cancel_button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="4"
        android:background="@color/beanBlue"
        android:text="Cancel"
        android:textColor="#FFFFFF"/>

</LinearLayout>

and this is my menu_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<menu 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"
      xmlns:appcompat="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_search"
          android:title="Search"
          android:icon="@drawable/search_icon"
          app:showAsAction="always|collapseActionView"
          app:actionLayout="@layout/search_view_layout"
          app:actionViewClass="android.support.v7.widget.SearchView"/>

    <item android:id="@+id/action_cart"
          android:title="Cart"
          android:icon="@drawable/cart_icon"
          app:showAsAction="ifRoom"/>
</menu>

and this is my toolbar.xml file:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#000000"
    android:elevation="5dp"
    android:contentInsetLeft="15dp"
    app:collapseIcon="@drawable/collapse_back_button">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bean"
        android:layout_gravity="center"
        android:textColor="@color/beanBlue"
        android:id="@+id/toolbar_title"
        android:textSize="25sp"/>


</android.support.v7.widget.Toolbar>

This is what the toolbar looks like before the search icon is pressed:

and this is what I want the SearchView to look like when the search icon is pressed:

How do I implement this custom SearchView layout in my android project?

Answer 1

final int layoutResId = a.getResourceId(R.styleable.SearchView_layout, R.layout.abc_search_view);
inflater.inflate(layoutResId, this, true);

I found the code above in android.support.v7.widget.SearchView.java, you can define your custom layout in xml, and just add the app:layout="@layout/resId".

Notice

You have to read the source code to provide all views with the same ids, or it will crash with NullPointerException. For detail, you can look at the source of SearchView(Context context, AttributeSet attrs, int defStyleAttr)