How to add a search bar with text editing on the toolbar

Question

I want to add a search bar with edit text in the toolbar as shown below.

My toolbar .xml: -

<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:local="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" local:popupTheme="@style/ThemeOverlay.AppCompat.Light" > <EditText android:id="@+id/searchEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" /> </android.support.v7.widget.Toolbar> 

After adding the edit text to the toolbar, my toolbar looks like this: -

Answer 1

as I understand it, I hope this code can help you ...

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:elevation="10dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/gray_500" android:orientation="vertical" android:gravity="center|right"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/white" android:orientation="horizontal" android:gravity="center|right"> <TextView android:layout_width="0dp" android:layout_height="60dp" android:layout_weight="8" android:layout_margin="5dp" android:text="snap deal" android:gravity="center" > </TextView> <TextView android:layout_width="0dp" android:layout_height="60dp" android:layout_weight="2" android:layout_margin="5dp" android:ems="10" android:text="Img" android:gravity="center" > </TextView> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/white" android:gravity="center|right"> <EditText android:id="@+id/editMobileNo" android:layout_width="match_parent" android:layout_height="40dp" android:layout_margin="5dp" android:background="@drawable/login_edittext" android:ems="10" android:hint="Find your dil ki deal" android:drawableLeft="@drawable/search" android:gravity="center" > </EditText> </LinearLayout> </LinearLayout> </android.support.v7.widget.Toolbar> 

this is a custom form for EditText login_edittext.xml

  <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:angle="270" android:endColor="@color/white" android:startColor="@color/white" /> <stroke android:width="1dp" android:color="@color/gray_500" /> <corners android:radius="1dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> </selector> 

This is just a sketch ... you need to change the color, size, image, etc.

Answer 2

I believe the view you are looking for is a SearchView . You can define in your menu.xml that you want to add it to your ActionBar / ToolBar. Like this:

 <?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"> <item android:id="@+id/search" android:icon="@drawable/search_icon" android:title="@string/search" app:actionViewClass="android.support.v7.widget.SearchView" app:showAsAction="always" /> </menu> 

Returning to your Activity or Fragment, you can manipulate the behavior of the search view and appearance:

 @Override public void onPrepareOptionsMenu(Menu menu) { super.onPrepareOptionsMenu(menu); MenuItem searchViewMenuItem = menu.findItem(R.id.search); searchView = (SearchView) searchViewMenuItem.getActionView(); ImageView v = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button); v.setImageResource(R.drawable.search_icon); //Changing the image if (!searchFor.isEmpty()) { searchView.setIconified(false); searchView.setQuery(searchFor, false); } searchView.setQueryHint(getResources().getString(R.string.search_hint)); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { //Do your search } @Override public boolean onQueryTextChange(String newText) { if(newText.isEmpty()) clearSearch(); return false; } }); } 

This is an easier way to do this. The most recommended way is to actually have activity that matches your search intentions. For more information about this name, visit: http://developer.android.com/intl/pt-br/guide/topics/search/search-dialog.html

Answer 3

Just add the edit text as part of your toolbar, something like this:

 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primaryColor" android:elevation="4dp"> <EditText android:id="@+id/searchEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" /> </android.support.v7.widget.Toolbar> 

Answer 4

you can directly place the searchview in your activity.xml file inside your toolbar and initialize it. I think you will get the desired layout.

Answer 5

I like the TextEdit solution above for backward compatibility.

Here are two more things to consider in order to achieve the original example:

1. In the Activity xml TextEdit definition add:

android: drawableStart = "@ android: draw / ic_menu_search"

  // To add the magnifying glass. 

Android: hint = "@ string / Search_Txt"

  // To add the hint message. 

2. In the String XML file, add:

   string name = "Search_Txt"> Find your deal

     // Customize your message here. 

Note. An alternative to SearchView will require API 21.

Enjoy.