How do I add a searchbar on an ImageButton, which when clicked expands horizontally to show the textbox?

Question

UI

The top where it says Artists, Songs is a PagerTitleStrip. And next to it is an ImageButton with a search icon. Artists, Songs are implemented using fragments. What I want to achieve is that when I click the search icon, the search icon should expand over the pagetitlestrip and doing so, the place where you put the search query should be visible. I want to add a nice animation effect to it too like linear interpolation and expansion. I am new to android and I am finding it difficult to implement it. Note that there is no action bar. So I am trying to implement a search box in a layout beside a PagerTitleStrip.

Here is the main layout of the screen shown above.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/xcmain"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:background="@color/layout_background_layer_a020a2f34"
    tools:context="com.example.harshil.fallenstar.MainActivity"
    tools:showIn="@layout/xa_main">

    <android.support.v4.view.ViewPager
        android:id="@+id/xcmain_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/xcmain_pagertabstrip"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:paddingRight="100dp"
            android:paddingEnd="100dp"
            android:layout_gravity="top"
            android:gravity="center"
            android:textSize="16sp"
            android:background="@color/transparent_bg"
            android:textColor="@color/white"
            android:paddingTop="0dp"
            android:paddingBottom="0dp" />
    </android.support.v4.view.ViewPager>

    <ImageButton
        android:id="@+id/xcmain_search"
        android:layout_width="35dp"
        android:layout_height="50dp"
        android:src="@drawable/search_icon"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:background="@color/transparent_bg"
        android:paddingTop="12dp"
        android:paddingBottom="18dp"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/xcmain_settings"
        android:layout_toStartOf="@+id/xcmain_settings"
        android:onClick="searchOnClick">
    </ImageButton>
    <ImageButton
        android:id="@+id/xcmain_settings"
        android:layout_width="35dp"
        android:layout_height="50dp"
        android:src="@drawable/settings"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:background="@color/transparent_bg"
        android:paddingTop="12dp"
        android:paddingBottom="18dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

Answer 1

1- add the permission for it.

<uses-permission android:name="android.permission.REORDER_TASKS" />

2-in the Menu add an item

<item
        app:showAsAction="ifRoom|collapseActionView"        
        android:id="@+id/serch_click"
        android:icon="@drawable/your_search_icon"
        android:title="@string/searchstring"
        app:actionViewClass="android.support.v7.widget.SearchView"
         />

3- finally onCreateOptionsMenu

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        final SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.serch_icon));
        SearchManager searchManager = (SearchManager) getSystemService(SEARCH_SERVICE);
        searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

        return true;
    }