[Tutorial] Android ActionBar with Material Design and search field
In this post, I’ll show you how to create a custom and simple ActionBar/Toolbar to your Android application with Material Design.
And then we’ll add a custom search field to the ActionBar.
I - About Android Tutorials
I’ll be creating a big number of Android tutorials, showing you how to use nice libraries, UI, tips, and more.
I’ll be using Android Studio and Gradle in all tutorials.
If you need some help with any Android lib or feature, feel free to comment here and if possible, I can write a new tutorial about it :)
II - First, why??
Ok, you probably know that Android already provides a default ActionBar and search field, so why recode them?
Sometimes it’s necessary to do some deep modifications, create your own UI or even work with you own features.
So, in these cases, reusing something ready may not be the best choice. In this post I’ll show you how to create a Material Design ActionBar/Toobar with a search EditText.
III - Creating a new project
Ok, this first step is easy. Just open you Android Studio and create a new a blank activity. First, remove some auto-generated code from you activity_main.xml:
And as we are going to create our own ActionBar, go to styles.xml and edit to
Now the application has no ActionBar. So, let’s create a new one!
IV - Creating a custom Android Material Design ActionBar
Create it in a separated file.
Create a toolbar.xml inside your layouts folder, extending a LinearLayout.
This is a simple layout to represents our new ActionBar.
This ActionBar will have some features, so we’ll call it as a Toolbar from now. You can check my toolbar.xml here:
To display this new Toolbar on you Android application, add the following code to your activity_main.xml:
Now, if you run your app, you will see a simple green(horrible green :P ) bar in the top of the app.
We need to say to the Activity that this “green bar” is an ActionBar.
Open you MainActivity.java and create the following variable:
And inside your onCreate method, add these lines:
Now you can run your app and see the that toolbar is working fine!
V - Styling you App
It’s possible to change the notification bar color and others options with Android >= 5.0. Unfortunately it won’t work with pre-Lollipop devices.
In this image you can see some useful places to style. In this app we’ll be changing the colorPrimary and colorPrimaryDark.
Create the file colors.xml inside your values folder to add the default colors:
And now just update your toolbar.xml and set the line:
VII - The search bar
Now, let’s add a search bar.
Download the desired icons, one called ic_open_search and a ic_close_search.
I’m using these ones:
To add the search icon to the Toolbar, edit the menu_main.xml inside menu folder.
To search we need to add a EditText inside the ActionBar. So, create the file search_bar.xml inside you layouts folder.
We use the meOptions=”actionSearch” so the keyboard will show a search icon on Enter button.
VIII - Coding the search button
Let’s code it.
Add the following private variables inside your MainActivity.java:
The first thing is to get the action_search edit. Override this method:
To handle the click in the search button, edit the onOptionsItemSelected method.
The handleMenuSearch() will open and close the search EditText.
Take a look in my handleMenuSearch, it’s commented to help you to understand.
You’d add this method too, to close the search entry with the backbutton:
To this tutorial, I created an empty doSearch method.
You can anything here and do your custom search:
Now, it’s you can test and check it running!
Here you can see the app runinng on Android 4.1:
You can get the source code and APK in the github repository. That’s it, thx for reading.
If you have any problem/suggestion/or anything, feel free to comment here :)