{"id":13637516,"url":"https://github.com/MiguelCatalan/MaterialSearchView","last_synced_at":"2025-04-19T08:34:22.093Z","repository":{"id":1762340,"uuid":"42464201","full_name":"MiguelCatalan/MaterialSearchView","owner":"MiguelCatalan","description":"Cute library to implement SearchView in a Material Design Approach","archived":false,"fork":false,"pushed_at":"2020-07-24T16:31:11.000Z","size":4665,"stargazers_count":3832,"open_issues_count":169,"forks_count":616,"subscribers_count":82,"default_branch":"develop","last_synced_at":"2024-10-29T15:39:47.470Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://miguelcatalan.info/2015/09/23/MaterialSearchView/","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MiguelCatalan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-14T17:13:46.000Z","updated_at":"2024-10-24T17:03:28.000Z","dependencies_parsed_at":"2022-09-25T03:51:38.016Z","dependency_job_id":null,"html_url":"https://github.com/MiguelCatalan/MaterialSearchView","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MiguelCatalan%2FMaterialSearchView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MiguelCatalan%2FMaterialSearchView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MiguelCatalan%2FMaterialSearchView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MiguelCatalan%2FMaterialSearchView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MiguelCatalan","download_url":"https://codeload.github.com/MiguelCatalan/MaterialSearchView/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223795271,"owners_count":17204137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T00:01:18.747Z","updated_at":"2024-11-09T06:31:23.238Z","avatar_url":"https://github.com/MiguelCatalan.png","language":"Java","funding_links":[],"categories":["Android","SearchView","Java","Libs"],"sub_categories":["Components","\u003cA NAME=\"Widget\"\u003e\u003c/A\u003eWidget"],"readme":"# MaterialSearchView\nCute library to implement SearchView in a Material Design Approach. *Works from Android API 14 (ICS) and above*.\n\n![sample](https://raw.githubusercontent.com/MiguelCatalan/MaterialSearchView/master/art/voice.gif) ![sample](https://raw.githubusercontent.com/MiguelCatalan/MaterialSearchView/master/art/default.gif)\n\n\u003ca href=\"https://play.google.com/store/apps/details?id=com.miguelcatalan.materialsearchview.sample\"\u003e\n  \u003cimg alt=\"Get it on Google Play\"\n       src=\"https://developer.android.com/images/brand/en_generic_rgb_wo_60.png\" /\u003e\n\u003c/a\u003e\n\n#Native version\nMaybe it would be useful to take a look into the new official approach\nhttp://www.materialdoc.com/search-filter/\n\n# Usage\n**Add the dependencies to your gradle file:**\n```javascript\n\tdependencies {\n    \tcompile 'com.miguelcatalan:materialsearchview:1.4.0'\n\t}\n```\n**Add MaterialSearchView to your layout file along with the Toolbar** *(Add this block at the bottom of your layout, in order to display it over the rest of the view)*:\n\n```xml\n    \u003c!— Must be last for right layering display —\u003e\n    \u003cFrameLayout\n        android:id=\"@+id/toolbar_container\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\u003e\n\n        \u003candroid.support.v7.widget.Toolbar\n            android:id=\"@+id/toolbar\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"?attr/actionBarSize\"\n            android:background=\"@color/theme_primary\" /\u003e\n\n        \u003ccom.miguelcatalan.materialsearchview.MaterialSearchView\n            android:id=\"@+id/search_view\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\" /\u003e\n    \u003c/FrameLayout\u003e\n```\n\n**Add the search item into the menu file:**\n```xml\n\t\u003citem\n        android:id=\"@+id/action_search\"\n        android:icon=\"@drawable/ic_action_action_search\"\n        android:orderInCategory=\"100\"\n        android:title=\"@string/abc_search_hint\"\n        app:showAsAction=\"always\" /\u003e\n```\n**Add define it in the *onCreateOptionsMenu*:**\n```java\n\t@Override\n\tpublic boolean onCreateOptionsMenu(Menu menu) {\n        getMenuInflater().inflate(R.menu.menu_main, menu);\n\n        MenuItem item = menu.findItem(R.id.action_search);\n        searchView.setMenuItem(item);\n\n        return true;\n    }\n```\n**Set the listeners:**\n```java\n\tMaterialSearchView searchView = (MaterialSearchView) findViewById(R.id.search_view);\n\tsearchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() {\n            @Override\n            public boolean onQueryTextSubmit(String query) {\n                //Do some magic\n                return false;\n            }\n\n            @Override\n            public boolean onQueryTextChange(String newText) {\n                //Do some magic\n                return false;\n            }\n        });\n        \n        searchView.setOnSearchViewListener(new MaterialSearchView.SearchViewListener() {\n            @Override\n            public void onSearchViewShown() {\n                //Do some magic\n            }\n\n            @Override\n            public void onSearchViewClosed() {\n                //Do some magic\n            }\n        });\n```\n# Use VoiceSearch\n**Allow/Disable it in the code:**\n```java\n\tsearchView.setVoiceSearch(true); //or false\n```\n**Handle the response:**\n```java\n    @Override\n    protected void onActivityResult(int requestCode, int resultCode, Intent data) {\n        if (requestCode == MaterialSearchView.REQUEST_VOICE \u0026\u0026 resultCode == RESULT_OK) {\n            ArrayList\u003cString\u003e matches = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);\n            if (matches != null \u0026\u0026 matches.size() \u003e 0) {\n                String searchWrd = matches.get(0);\n                if (!TextUtils.isEmpty(searchWrd)) {\n                    searchView.setQuery(searchWrd, false);\n                }\n            }\n\n            return;\n        }\n        super.onActivityResult(requestCode, resultCode, data);\n    }\n```\n# Add suggestions\n**Define them in the resources as a *string-array*:**\n```xml\n    \u003cstring-array name=\"query_suggestions\"\u003e\n        \u003citem\u003eAndroid\u003c/item\u003e\n        \u003citem\u003eiOS\u003c/item\u003e\n        \u003citem\u003eSCALA\u003c/item\u003e\n        \u003citem\u003eRuby\u003c/item\u003e\n        \u003citem\u003eJavaScript\u003c/item\u003e\n    \u003c/string-array\u003e\n```\n**Add them to the object:**\t\n```java\n\tsearchView.setSuggestions(getResources().getStringArray(R.array.query_suggestions));\n```\n# Style it!\n```xml\n    \u003cstyle name=\"MaterialSearchViewStyle\"\u003e\n        \u003c!-- Background for the search bar --\u003e\n        \u003citem name=\"searchBackground\"\u003e@color/theme_primary\u003c/item\u003e\n\n        \u003c!-- Change voice icon --\u003e\n        \u003citem name=\"searchVoiceIcon\"\u003e@drawable/ic_action_voice_search_inverted\u003c/item\u003e\n\n        \u003c!-- Change clear text icon --\u003e\n        \u003citem name=\"searchCloseIcon\"\u003e@drawable/ic_action_navigation_close_inverted\u003c/item\u003e\n\n        \u003c!-- Change up icon --\u003e\n        \u003citem name=\"searchBackIcon\"\u003e@drawable/ic_action_navigation_arrow_back_inverted\u003c/item\u003e\n        \n        \u003c!-- Change icon for the suggestions --\u003e\n        \u003citem name=\"searchSuggestionIcon\"\u003e@drawable/ic_suggestion\u003c/item\u003e\n\n        \u003c!-- Change background for the suggestions list view --\u003e\n        \u003citem name=\"searchSuggestionBackground\"\u003e@android:color/white\u003c/item\u003e\n\n        \u003c!-- Change text color for edit text. This will also be the color of the cursor --\u003e\n        \u003citem name=\"android:textColor\"\u003e@color/theme_primary_text_inverted\u003c/item\u003e\n\n        \u003c!-- Change hint text color for edit text --\u003e\n        \u003citem name=\"android:textColorHint\"\u003e@color/theme_secondary_text_inverted\u003c/item\u003e\n\n        \u003c!-- Hint for edit text --\u003e\n        \u003citem name=\"android:hint\"\u003e@string/search_hint\u003c/item\u003e\n    \u003c/style\u003e\n```    \n#Custom cursor\n**Create the drawable:**\n```xml\t\n    \u003cshape xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \t\u003csize android:width=\"2dp\" /\u003e\n    \t\u003csolid android:color=\"@color/theme_primary\" /\u003e\n    \u003c/shape\u003e\n```\t\n**And add it to the object:**\n```java\n\tsearchView.setCursorDrawable(R.drawable.custom_cursor);\n```    \n\n# Using AppBarLayout?\nIt is a little bit tricky but can be achieved using this:\n```xml\n\t\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:id=\"@+id/container\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\u003e\n\n    \u003c!— Irrelevant stuff —\u003e\n    \u003candroid.support.v4.view.ViewPager\n        android:id=\"@+id/viewpager\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:layout_below=\"@+id/appbarlayout\"\n        app:layout_behavior=\"@string/appbar_scrolling_view_behavior\" /\u003e\n\n    \u003c!— Must be last for right layering display —\u003e\n    \u003candroid.support.design.widget.AppBarLayout\n        android:id=\"@+id/appbarlayout\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:background=\"@color/search_layover_bg\"\u003e\n\n        \u003cFrameLayout\n            android:id=\"@+id/toolbar_container\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\u003e\n\n            \u003candroid.support.v7.widget.Toolbar\n                android:id=\"@+id/toolbar\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"?attr/actionBarSize\"\n                android:background=\"@color/theme_primary\" /\u003e\n\n            \u003ccom.miguelcatalan.materialsearchview.MaterialSearchView\n                android:id=\"@+id/search_view\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"wrap_content\"\n                android:visibility=\"gone\" /\u003e\n        \u003c/FrameLayout\u003e\n\n        \u003candroid.support.design.widget.TabLayout\n            android:id=\"@+id/tabs\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\n            android:background=\"@color/theme_primary\"\n            app:tabGravity=\"fill\"\n            app:tabMode=\"fixed\" /\u003e\n\n    \u003c/android.support.design.widget.AppBarLayout\u003e\n\n\u003c/RelativeLayout\u003e\n```  \n# Bonus\n**Close on backpressed:**\n```java\n    @Override\n    public void onBackPressed() {\n        if (searchView.isSearchOpen()) {\n            searchView.closeSearch();\n        } else {\n            super.onBackPressed();\n        }\n    }\n```\n# Help me\nPull requests are more than welcome, help me and others improve this awesome library.\n\nThe code is based in the Krishnakapil original concept.\n\n# License\n\tCopyright 2015 Miguel Catalan Bañuls\n\n\tLicensed under the Apache License, Version 2.0 (the \"License\");\n\tyou may not use this file except in compliance with the License.\n\tYou may obtain a copy of the License at\n\n\t\thttp://www.apache.org/licenses/LICENSE-2.0\n\n\tUnless required by applicable law or agreed to in writing, software\n\tdistributed under the License is distributed on an \"AS IS\" BASIS,\n\tWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n\tSee the License for the specific language governing permissions and\n\tlimitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMiguelCatalan%2FMaterialSearchView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMiguelCatalan%2FMaterialSearchView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMiguelCatalan%2FMaterialSearchView/lists"}