Add editText on action bar

Question

I wonder how to achieve this ?

I have a search icon in action bar as image below

When it is clicked, I want the action bar change to editText and has a search icon beside the editText

I know how to make an editText with an image, but how to put the editText on the action bar like image below ?

Answer 1

What you are looking for is called the SearchView or Search Widget

Check it out here

Answer 2

ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setIcon(R.drawable.ic_action_search);

LayoutInflater inflator = (LayoutInflater) this .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflator.inflate(R.layout.search, null);

actionBar.setCustomView(v);

create layout search with your EditText.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?attr/actionButtonStyle"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"
android:focusable="true" >



    <EditText
        android:id="@+id/search_query"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center"
        android:background="@drawable/bg_search_edit_text"
        android:imeOptions="actionSearch"
        android:inputType="text" />


</LinearLayout>

Hope it helps.