Creating a SearchView that looks like the material design guidelines

Question

I m currently in the process of learning how to convert my app to Material design and I m a bit stuck right now  I ve got the Toolbar added and I have made my navigation drawer overlay all the content I m now trying to create an expandable search that looks like the one in the material guidelines   This is what I ve got right now and I can t figure out how to make it like the above    This is my menu xml    lt  xml version  1 0  encoding  utf-8   gt   lt menu xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto  gt       lt item         android id    id action search          android icon   android drawable ic menu search          android title  Search          app showAsAction  always          app actionViewClass  android support v7 widget SearchView    gt   lt  menu gt    That works  I get a menu item that expands to the SearchView and I can filter my list fine  It doesn t look anything like the 1st picture though  I tried to use MenuItemCompat setOnActionExpandListener   on R id action search so I could change the home icon to a back arrow  but that doesn t seem to work  Nothing gets fired in the listener  Even if that worked it still wouldn t be very close to the 1st image  How do I create a SearchView in the new appcompat toolbar that looks like the material guidelines

User · Answer

I know its a old thread but still posting the library I just made  Hope this might help someone   https   github com Shahroz16 material-searchview

User · Answer

The first screenshot in your question is not a public widget  The support SearchView  android support v7 widget SearchView  mimics Android 5 0 Lollipop s SearchView  android widget SearchView   Your second screenshot is used by other material designed apps like Google Play   The SearchView in your first screenshot is used in Drive  YouTube and other closed source Google Apps  Fortunately  it is also used in the Android 5 0 Dialer  You can try to backport the view  but it uses some 5 0 APIs   The classes which you will want to look at are   SearchEditTextLayout  AnimUtils  and DialtactsActivity to understand how to use the View  You will also need resources from ContactsCommon   Best of luck

User · Answer

Another way you can achieve the desired effect is to use this Material Search View library  It handles search history automatically and it s possible to provide search suggestions to the view as well   Sample   It s shown in Portuguese  but it also works in english and italian      Setup  Before you can use this lib  you have to implement a class named MsvAuthority inside the br com mauker package on your app module  and it should have a public static String variable called CONTENT AUTHORITY  Give it the value you want and don t forget to add the same name on your manifest file  The lib will use this file to set the Content Provider authority   Example   MsvAuthority java  package br com mauker   public class MsvAuthority       public static final String CONTENT AUTHORITY    br com mauker materialsearchview searchhistorydatabase       AndroidManifest xml   lt  xml version  1 0  encoding  utf-8   gt   lt manifest     gt        lt application      gt           lt provider         android name  br com mauker materialsearchview db HistoryProvider          android authorities  br com mauker materialsearchview searchhistorydatabase          android exported  false          android protectionLevel  signature          android syncable  true   gt       lt  application gt    lt  manifest gt    Usage  To use it  add the dependency   compile  br com mauker materialsearchview materialsearchview 1 2 0    And then  on your Activity layout file  add the following    lt br com mauker materialsearchview MaterialSearchView     android id    id search view      android layout width  match parent      android layout height  match parent   gt    After that  you ll just need to get the MaterialSearchView reference by using getViewById    and open it up or close it using MaterialSearchView openSearch   and MaterialSearchView closeSearch     P S   It s possible to open and close the view not only from the Toolbar  You can use the openSearch   method from basically any Button  such as a Floating Action Button      Inside onCreate   MaterialSearchView searchView    MaterialSearchView  findViewById R id search view   Button bt    Button  findViewById R id button    bt setOnClickListener new View OnClickListener              Override         public void onClick View v                searchView openSearch                        You can also close the view using the back button  doing the following    Override public void onBackPressed         if  searchView isOpen                 Close the search on the back button press          searchView closeSearch          else           super onBackPressed              For more information on how to use the lib  check the github page

User · Answer

The following will create a SearchView identical to the one in Gmail and add it to the given Toolbar   You ll just have to implement your own  ViewUtil convertDpToPixel  method   private SearchView createMaterialSearchView Toolbar toolbar  String hintText         setSupportActionBar toolbar       ActionBar actionBar   getSupportActionBar        actionBar setDisplayHomeAsUpEnabled true       actionBar setDisplayShowCustomEnabled true       actionBar setDisplayShowTitleEnabled false        SearchView searchView   new SearchView this       searchView setIconifiedByDefault false       searchView setMaxWidth Integer MAX VALUE       searchView setMinimumHeight Integer MAX VALUE       searchView setQueryHint hintText        int rightMarginFrame   0      View frame   searchView findViewById getResources   getIdentifier  android id search edit frame   null  null        if  frame    null            LinearLayout LayoutParams frameParams   new LinearLayout LayoutParams ViewGroup LayoutParams MATCH PARENT  ViewGroup LayoutParams MATCH PARENT           rightMarginFrame     LinearLayout LayoutParams  frame getLayoutParams    rightMargin          frameParams setMargins 0  0  0  0           frame setLayoutParams frameParams              View plate   searchView findViewById getResources   getIdentifier  android id search plate   null  null        if  plate    null            plate setLayoutParams new LinearLayout LayoutParams ViewGroup LayoutParams MATCH PARENT  ViewGroup LayoutParams MATCH PARENT            plate setPadding 0  0  rightMarginFrame  0           plate setBackgroundColor Color TRANSPARENT              int autoCompleteId   getResources   getIdentifier  android id search src text   null  null       if  searchView findViewById autoCompleteId     null            EditText autoComplete    EditText  searchView findViewById autoCompleteId           LinearLayout LayoutParams params   new LinearLayout LayoutParams 0   int  ViewUtil convertDpToPixel 36            params weight   1          params gravity   Gravity CENTER VERTICAL          params leftMargin   rightMarginFrame          autoComplete setLayoutParams params           autoComplete setTextSize 16f              int searchMagId   getResources   getIdentifier  android id search mag icon   null  null       if  searchView findViewById searchMagId     null            ImageView v    ImageView  searchView findViewById searchMagId           v setImageDrawable null           v setPadding 0  0  0  0           LinearLayout LayoutParams params   new LinearLayout LayoutParams LinearLayout LayoutParams WRAP CONTENT  LinearLayout LayoutParams WRAP CONTENT           params setMargins 0  0  0  0           v setLayoutParams params              toolbar setTitle null       toolbar setContentInsetsAbsolute 0  0       toolbar addView searchView        return searchView

User · Answer

Here s  my attempt at doing this     Step 1  Create a style named SearchViewStyle   lt style name  SearchViewStyle  parent  Widget AppCompat SearchView  gt       lt  -- Gets rid of the search icon -- gt       lt item name  searchIcon  gt  drawable search lt  item gt       lt  -- Gets rid of the  underline  in the text -- gt       lt item name  queryBackground  gt  null lt  item gt       lt  -- Gets rid of the search icon when the SearchView is expanded -- gt       lt item name  searchHintIcon  gt  null lt  item gt       lt  -- The hint text that appears when the user has not typed anything -- gt       lt item name  queryHint  gt  string search hint lt  item gt   lt  style gt    Step 2  Create a layout named simple search view item xml   lt  xml version  1 0  encoding  utf-8   gt   lt android support v7 widget SearchView     android layout gravity  end      android layout height  wrap content      android layout width  match parent      style   style SearchViewStyle      xmlns android  http   schemas android com apk res android    gt      Step 3  Create a menu item for this search view   lt  xml version  1 0  encoding  utf-8   gt   lt menu xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto  gt       lt item         app actionLayout   layout simple search view item          android title   string search          android icon   drawable search          app showAsAction  always    gt   lt  menu gt      Step 4  Inflate the menu   Override public boolean onCreateOptionsMenu Menu menu        MenuInflater inflater   getMenuInflater        inflater inflate R menu menu searchable activity  menu       return true        Result       The only thing I wasn t able to do was to make it fill the entire width of the Toolbar  If someone could help me do that then that d be golden

User · Answer

It is actually quite easy to do this  if you are using android support v7 library   Step - 1  Declare a menu item   lt item android id    id action search      android title  Search      android icon   drawable abc ic search api mtrl alpha      app showAsAction  ifRoom collapseActionView      app actionViewClass  android support v7 widget SearchView    gt    Step - 2  Extend AppCompatActivity and in the onCreateOptionsMenu setup the SearchView   import android support v7 widget SearchView        public class YourActivity extends AppCompatActivity                  Override     public boolean onCreateOptionsMenu Menu menu            getMenuInflater   inflate R menu menu home  menu              Retrieve the SearchView and plug it into SearchManager         final SearchView searchView    SearchView  MenuItemCompat getActionView menu findItem R id action search            SearchManager searchManager    SearchManager  getSystemService SEARCH SERVICE           searchView setSearchableInfo searchManager getSearchableInfo getComponentName              return true                       Result

User · Answer

To achieve desired look of SearchView  you can use styles   First  you need to create style for your SearchView  which should look something like this    lt style name  CustomSearchView  parent  Widget AppCompat SearchView  gt       lt item name  searchIcon  gt  null lt  item gt       lt item name  queryBackground  gt  null lt  item gt   lt  style gt    Whole list of attributes you can find at this article  under the  SearchView  section   Secondly  you need to create a style for your Toolbar  which is used as ActionBar    lt style name  ToolbarSearchView  parent  Base ThemeOverlay AppCompat Dark ActionBar  gt       lt item name  searchViewStyle  gt  style CustomSearchView lt  item gt   lt  style gt    And finally you need to update your Toolbar theme attribute this way    lt android support v7 widget Toolbar xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android id    id toolbar      android layout width  match parent      android layout height   attr actionBarSize      app theme   style ToolbarSearchView    gt    Result     NOTE  You need to change your Toolbar theme attribute directly  If you ll just update your main theme searchViewStyle attribute it wouldn t affect your Toolbar

User · Answer

After a week of puzzling over this  I think I ve figured it out  I m now using just an EditText inside of the Toolbar  This was suggested to me by oj88 on reddit   I now have this   First inside onCreate   of my activity I added the EditText with an image view on the right hand side to the Toolbar like this            Setup search container view     searchContainer   new LinearLayout this       Toolbar LayoutParams containerParams   new Toolbar LayoutParams ViewGroup LayoutParams MATCH PARENT  ViewGroup LayoutParams MATCH PARENT       containerParams gravity   Gravity CENTER VERTICAL      searchContainer setLayoutParams containerParams           Setup search view     toolbarSearchView   new EditText this          Set width   height   gravity     int   textSizeAttr   new int   android R attr actionBarSize       int indexOfAttrTextSize   0      TypedArray a   obtainStyledAttributes new TypedValue   data  textSizeAttr       int actionBarHeight   a getDimensionPixelSize indexOfAttrTextSize  -1       a recycle        LinearLayout LayoutParams params   new LinearLayout LayoutParams 0  actionBarHeight       params gravity   Gravity CENTER VERTICAL      params weight   1      toolbarSearchView setLayoutParams params           Setup display     toolbarSearchView setBackgroundColor Color TRANSPARENT       toolbarSearchView setPadding 2  0  0  0       toolbarSearchView setTextColor Color WHITE       toolbarSearchView setGravity Gravity CENTER VERTICAL       toolbarSearchView setSingleLine true       toolbarSearchView setImeActionLabel  Search   EditorInfo IME ACTION UNSPECIFIED       toolbarSearchView setHint  Search        toolbarSearchView setHintTextColor Color parseColor   b3ffffff         try              Set cursor colour to white            https   stackoverflow com a 26544231 1692770            https   github com android platform frameworks base blob kitkat-release core java android widget TextView java L562-564         Field f   TextView class getDeclaredField  mCursorDrawableRes            f setAccessible true           f set toolbarSearchView  R drawable edittext whitecursor         catch  Exception ignored                  Search text changed listener     toolbarSearchView addTextChangedListener new TextWatcher              Override         public void beforeTextChanged CharSequence s  int start  int count  int after                        Override         public void onTextChanged CharSequence s  int start  int before  int count                Fragment mainFragment   getFragmentManager   findFragmentById R id container               if  mainFragment    null  amp  amp  mainFragment instanceof MainListFragment                      MainListFragment  mainFragment  search s toString                                       Override         public void afterTextChanged Editable s                   https   stackoverflow com a 6438918 1692770             if  s toString   length    lt   0                    toolbarSearchView setHintTextColor Color parseColor   b3ffffff                                           LinearLayout  searchContainer  addView toolbarSearchView           Setup the clear button     searchClearButton   new ImageView this       Resources r   getResources        int px    int  TypedValue applyDimension TypedValue COMPLEX UNIT DIP  16  r getDisplayMetrics         LinearLayout LayoutParams clearParams   new LinearLayout LayoutParams ViewGroup LayoutParams WRAP CONTENT  ViewGroup LayoutParams WRAP CONTENT       clearParams gravity   Gravity CENTER      searchClearButton setLayoutParams clearParams       searchClearButton setImageResource R drawable ic close white 24dp      TODO  Get this image from here  https   github com google material-design-icons     searchClearButton setPadding px  0  px  0       searchClearButton setOnClickListener new View OnClickListener              Override         public void onClick View v                toolbarSearchView setText                              LinearLayout  searchContainer  addView searchClearButton           Add search view to toolbar and hide it     searchContainer setVisibility View GONE       toolbar addView searchContainer     This worked  but then I came across an issue where onOptionsItemSelected   wasn t being called when I tapped on the home button  So I wasn t able to cancel the search by pressing the home button  I tried a few different ways of registering the click listener on the home button but they didn t work  Eventually I found out that the ActionBarDrawerToggle I had was interfering with things  so I removed it  This listener then started working       toolbar setNavigationOnClickListener new View OnClickListener              Override         public void onClick View v                   toolbarHomeButtonAnimating is a boolean that is initialized as false  It s used to stop the user pressing the home button while it is animating and breaking things              if   toolbarHomeButtonAnimating                       Here you ll want to check if you have a search query set  if you don t then hide the search box                     My main fragment handles this stuff  so I call its methods                  FragmentManager fragmentManager   getFragmentManager                    final Fragment fragment   fragmentManager findFragmentById R id container                   if  fragment    null  amp  amp  fragment instanceof MainListFragment                        if    MainListFragment  fragment  hasSearchQuery      searchContainer getVisibility      View VISIBLE                            displaySearchView false                           return                                                                     if  mDrawerLayout isDrawerOpen findViewById R id navigation drawer                    mDrawerLayout closeDrawer findViewById R id navigation drawer                else                 mDrawerLayout openDrawer findViewById R id navigation drawer                        So I can now cancel the search with the home button  but I can t press the back button to cancel it yet  So I added this to onBackPressed           FragmentManager fragmentManager   getFragmentManager        final Fragment mainFragment   fragmentManager findFragmentById R id container       if  mainFragment    null  amp  amp  mainFragment instanceof MainListFragment            if    MainListFragment  mainFragment  hasSearchQuery      searchContainer getVisibility      View VISIBLE                displaySearchView false               return                    I created this method to toggle visibility of the EditText and menu item     public void displaySearchView boolean visible        if  visible               Stops user from being able to open drawer while searching         mDrawerLayout setDrawerLockMode DrawerLayout LOCK MODE LOCKED CLOSED               Hide search button  display EditText         menu findItem R id action search  setVisible false           searchContainer setVisibility View VISIBLE               Animate the home icon to the back arrow         toggleActionBarIcon ActionDrawableState ARROW  mDrawerToggle  true               Shift focus to the search EditText         toolbarSearchView requestFocus                Pop up the soft keyboard         new Handler   postDelayed new Runnable                 public void run                     toolbarSearchView dispatchTouchEvent MotionEvent obtain SystemClock uptimeMillis    SystemClock uptimeMillis    MotionEvent ACTION DOWN  0  0  0                    toolbarSearchView dispatchTouchEvent MotionEvent obtain SystemClock uptimeMillis    SystemClock uptimeMillis    MotionEvent ACTION UP  0  0  0                             200         else              Allows user to open drawer again         mDrawerLayout setDrawerLockMode DrawerLayout LOCK MODE UNLOCKED               Hide the EditText and put the search button back on the Toolbar             This sometimes fails when it isn t postDelayed    don t know why          toolbarSearchView postDelayed new Runnable                  Override             public void run                     toolbarSearchView setText                      searchContainer setVisibility View GONE                   menu findItem R id action search  setVisible true                            200               Turn the home button back into a drawer icon         toggleActionBarIcon ActionDrawableState BURGER  mDrawerToggle  true               Hide the keyboard because the search box has been hidden         InputMethodManager imm    InputMethodManager  getSystemService Context INPUT METHOD SERVICE           imm hideSoftInputFromWindow toolbarSearchView getWindowToken    0             I needed a way to toggle the home button on the toolbar between the drawer icon and the back button  I eventually found the method below in this SO answer  Though I modified it slightly to made more sense to me     private enum ActionDrawableState       BURGER  ARROW           Modified version of this  https   stackoverflow com a 26836272 1692770 lt br gt     I flipped the start offset around for the animations because it seemed like it was the wrong way around to me  lt br gt     I also added a listener to the animation so I can find out when the home button has finished rotating      private void toggleActionBarIcon final ActionDrawableState state  final ActionBarDrawerToggle toggle  boolean animate        if  animate            float start   state    ActionDrawableState BURGER   1 0f   0f          float end   Math abs start - 1           if  Build VERSION SDK INT  gt   Build VERSION CODES HONEYCOMB                ValueAnimator offsetAnimator   ValueAnimator ofFloat start  end               offsetAnimator setDuration 300               offsetAnimator setInterpolator new AccelerateDecelerateInterpolator                 offsetAnimator addUpdateListener new ValueAnimator AnimatorUpdateListener                      Override                 public void onAnimationUpdate ValueAnimator animation                        float offset    Float  animation getAnimatedValue                        toggle onDrawerSlide null  offset                                                 offsetAnimator addListener new Animator AnimatorListener                      Override                 public void onAnimationStart Animator animation                                         Override                 public void onAnimationEnd Animator animation                        toolbarHomeButtonAnimating   false                                      Override                 public void onAnimationCancel Animator animation                                         Override                 public void onAnimationRepeat Animator animation                                                   toolbarHomeButtonAnimating   true              offsetAnimator start                    else           if  state    ActionDrawableState BURGER                toggle onDrawerClosed null             else               toggle onDrawerOpened null                       This works  I ve managed to work out a few bugs that I found along the way  I don t think it s 100  but it works well enough for me   EDIT  If you want to add the search view in XML instead of Java do this   toolbar xml    lt android support v7 widget Toolbar      xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android id    id toolbar      contentInsetLeft  72dp      contentInsetStart  72dp      android layout width  match parent      android layout height   attr actionBarSize      android background   attr colorPrimary      android elevation  4dp      android minHeight   attr actionBarSize      app contentInsetLeft  72dp      app contentInsetStart  72dp      app popupTheme   style ActionBarPopupThemeOverlay      app theme   style ActionBarThemeOverlay  gt        lt LinearLayout         android id    id search container          android layout width  match parent          android layout height  match parent          android gravity  center vertical          android orientation  horizontal  gt            lt EditText             android id    id search view              android layout width  0dp              android layout height   attr actionBarSize              android layout weight  1              android background   android color transparent              android gravity  center vertical              android hint  Search              android imeOptions  actionSearch              android inputType  text              android maxLines  1              android paddingLeft  2dp              android singleLine  true              android textColor   ffffff              android textColorHint   b3ffffff    gt            lt ImageView             android id    id search clear              android layout width  wrap content              android layout height  wrap content              android layout gravity  center              android paddingLeft  16dp              android paddingRight  16dp              android src   drawable ic close white 24dp    gt       lt  LinearLayout gt   lt  android support v7 widget Toolbar gt    onCreate   of your Activity       searchContainer   findViewById R id search container       toolbarSearchView    EditText  findViewById R id search view       searchClearButton    ImageView  findViewById R id search clear           Setup search container view     try              Set cursor colour to white            https   stackoverflow com a 26544231 1692770            https   github com android platform frameworks base blob kitkat-release core java android widget TextView java L562-564         Field f   TextView class getDeclaredField  mCursorDrawableRes            f setAccessible true           f set toolbarSearchView  R drawable edittext whitecursor         catch  Exception ignored                  Search text changed listener     toolbarSearchView addTextChangedListener new TextWatcher              Override         public void beforeTextChanged CharSequence s  int start  int count  int after                        Override         public void onTextChanged CharSequence s  int start  int before  int count                Fragment mainFragment   getFragmentManager   findFragmentById R id container               if  mainFragment    null  amp  amp  mainFragment instanceof MainListFragment                      MainListFragment  mainFragment  search s toString                                       Override         public void afterTextChanged Editable s                              Clear search text when clear button is tapped     searchClearButton setOnClickListener new View OnClickListener              Override         public void onClick View v                toolbarSearchView setText                                Hide the search view     searchContainer setVisibility View GONE

[android] Creating a SearchView that looks like the material design guidelines

Examples related to android

Examples related to android-appcompat

Examples related to searchview

Examples related to material-design

[android] Creating a SearchView that looks like the material design guidelines

Examples related to android

Examples related to toolbar

Examples related to android-appcompat

Examples related to searchview

Examples related to material-design