Add EditText to Toolbar

Question

My Toolbar and EditText look like this:

I tried adding it as an ActionView but I got this result:

It basically just added my words 'Tap Below' as a title without the TextView

Here's what I did:

menu.xml

<menu>
    ... 
    ...
    <item
        android:id="@+id/edit_text_menu"
        android:orderInCategory="300"
        android:title="Tap Below"
        android:actionLayout="@layout/edit_text_layout"
        app:showAsAction="ifRoom|collapseActionView"
        />
</menu>

edit_text_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/myEditText"
    android:background="#000000">

</EditText>

I thought by doing this I add my EditText layout to the Toolbar... Can someone please help?

Alternatively, is there a trick where I can overlay the EditText on the Toolbar?

I tried adding <item name="windowActionModeOverlay">true</item> but it didn't do anything.

Answer 1

Just add the EditText to the XML for your ToolBar. That is probably the easiest way.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
      <EditText
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:id="@+id/myEditText"
         android:background="#000000" />
</android.support.v7.widget.Toolbar>

Answer 2

1. Add the EditText to the Toolbar xml.

2. Add the Toolbar to your Activity's xml layout, at the top.

3. Set the toolbar as ActionBar:

   @Override
   protected void onCreate(@Nullable Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
   }
   

This will make the toolbar "become" the ActionBar with EditText inside.