Pimp my Search Bar: Using Material Design to Create a Slick EditText

Creating intuitive user interfaces is the name of the game when it comes to app development. If users can’t quickly navigate to the information they’re looking for, it won’t be long until they navigate away from your app for good. With that said, this post will cover the steps required to create an efficient search bar with the following features:

• A Clear All icon
• A Search Icon
• (Bonus) A keyboard button to kick off the search

Implement the Material Dependency

According to the Material Design Components release notes, the most recent version of the Material library is 1.2.0-alpha04. Add this to dependency to the (Module: app) build.gradle file like so:

Android Studio won’t recommend this update since some of the newer libraries are in beta. Your implementation will probably be set up to use the 1.1.0 version. Sync those gradles.

Add the TextInputLayout to your Layout

In order to take advantage of the Material EditText goodies, you need to wrap a TextInputEditText inside a TextInputLayout.

Add the Clear Text EndIconMode

An icon for clearing text entered into the TextInputEditText can be added by setting app:endIconMode=”clear_text”. This causes a small ‘x’ icon to appear at the end of the search bar whenever text is entered. You can change the color by updating the app:endIconTint property inside the TextInputLayout.

Add the Search Action to the Keyboard

Rather than add a separate button to your layout to kick off your search, you can update the action button on the keyboard to display a search icon.

To do this, add the following line to the TextInputEditText view.

Then, inside the fragment where this search field will be accessed, add a setOnEditorActionListener to the TextInputEditText. Inside the listener, write out the action you want to perform and….walla! Your UI just leveled up.