ActionBar with Search Option and other options in Android.

By | October 20, 2012

I have already shown some examples with ActionBar.
This is the example showing how to start with ActionBar in android.

1. Android removes the need of Menu button from devices with ActionBar.

2. How to start with ActionBar in Android?

3. Dynamically Adding, Removing, Toggling and Removing all ActionBar Tabs in Android – Part 2?

Now today I will show you another example in which we will put a searchbar along with other buttons in the ActionBar and Listen to the search and Listen to the button select.

This is how we do this.

Take a look at the screenshot.

ActionBar

ActionBar

ActionBar

ActionBar

First in your project “res” folder create a folder named “menu”. the create an xml inside this folder named “actions.xml”.
Now copy these to this xml.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_search"
          android:icon="@android:drawable/ic_menu_search"
          android:title="Action Bar Search"
          android:showAsAction="ifRoom"
          android:actionViewClass="android.widget.SearchView" />
    <item android:id="@+id/action_add"
          android:icon="@android:drawable/ic_menu_add"
          android:title="Action Bar Add" />
    <item android:id="@+id/action_edit"
          android:icon="@android:drawable/ic_menu_edit"
          android:showAsAction="always"
          android:title="Action Bar Edit" />
    <item android:id="@+id/action_share"
          android:icon="@android:drawable/ic_menu_share"
          android:title="Action Bar Share"
          android:showAsAction="ifRoom" />
</menu>

OK now we go to the java code. In your Activity file copy this code.

package com.coderzheaven.actionbarsearch;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.SearchView;
import android.widget.SearchView.OnQueryTextListener;
import android.widget.TextView;
import android.widget.Toast;

public class ActionBarWithSearch extends Activity  implements OnQueryTextListener {
    TextView mSearchText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mSearchText = new TextView(this);
        mSearchText.setPadding(10, 10, 10, 10);
        mSearchText.setText("Action Bar Usage example from CoderzHeaven");
        setContentView(mSearchText);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.actions, menu);
        SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
        searchView.setOnQueryTextListener(this);
        return true;
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean    onOptionsItemSelected       (MenuItem item) {
        Toast.makeText(this, "Selected Item: " + item.getTitle(), Toast.LENGTH_SHORT).show();
        return true;
    }

    // The following callbacks are called for the SearchView.OnQueryChangeListener
    public boolean onQueryTextChange(String newText) {
        newText = newText.isEmpty() ? "" : "Query so far: " + newText;
        mSearchText.setText(newText);
        mSearchText.setTextColor(Color.GREEN);
        return true;
    }

    public boolean      onQueryTextSubmit      (String query) {
        //Toast.makeText(this, "Searching for: " + query + "...", Toast.LENGTH_SHORT).show();
        mSearchText.setText("Searching for: " + query + "...");
        mSearchText.setTextColor(Color.RED);
        return true;
    }
}

Here “onQueryTextChange” function Listens to the search textbox when we type and “onQueryTextSubmit” function Listens when we hit search in the keyboard.

PLease leave your comments.

5 thoughts on “ActionBar with Search Option and other options in Android.

  1. Pingback: http www coderzheaven com 2012 10 20 actionbar… « san script

  2. Pingback: SearchView to filter ListView which is populated through a webservice : Android Community - For Application Development

  3. Govarthanan

    Thank you for posting this tutorial.
    Will action bar show edit box when user clicks @+id/action_search”. If not, could you please tell me how to add edit box in action bar.

    Thanks,
    Govarthanan

    Reply

Leave a Reply to wasim Cancel reply

Your email address will not be published. Required fields are marked *