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

Use belove code

       <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:titleTextColor="@color/colorAccent"
        app:theme="@style/ToolbarColoredBackArrow"
        app:subtitleTextColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <TextView
            android:textColor="@color/colorAccent"
            android:text="June 14"
            android:textAllCaps="true"
            android:layout_gravity="right"
            android:layout_marginRight="11dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_daily" />

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

Answer 2

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 3

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(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.