Adding Custom Action View to Action Bar in Android

In an Action bar, action items are buttons in nature.  Instead of buttons, we can include other views such as edittext or other simple widgets by which the functionalities of the action items can be extended.

In this article we will create an application which will display an edittext on the action bar when the user selects the menu item “Search”. User can input some text into this edittext and press enter. Then the entered data will be displayed in a toast message.

This application is developed in Eclipse 3.7.2 and tested in Android Virtual device of API level 14.

1. Create an Android Project namely “ActionBarActionView”

Figure 1 : New Android Project

2. Select Android Build Target

Figure 2 : Select Android Build Target

3. Enter Application Details

Figure 3 : Enter Application Details

4. Create a folder called “menu” in res and create an Android XML file namely “items.xml”

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/photo"
        android:title="Photo"
        android:showAsAction="ifRoom|withText"
    />

    <item
        android:id="@+id/video"
        android:title="Video"
        android:showAsAction="ifRoom|withText"
    />

    <item
        android:id="@+id/mobile"
        android:title="Mobile"
        android:showAsAction="ifRoom|withText"
    />

    <item
        android:id="@+id/search"
        android:title="Search"
        android:showAsAction="ifRoom|collapseActionView"
        android:actionLayout="@layout/search_layout"
    />

</menu>

5. Create a layout file namely “seach_layout.xml” in the folder res/layout for the custom action view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/txt_search"
        android:inputType="text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    />

</LinearLayout>

6. Update the file src/in/wptrafficanalyzer/actionbaractionview/MainActivity.java

package in.wptrafficanalyzer.actionbaractionview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;
import android.widget.Toast;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    /** Callback function */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        /** Create an option menu from res/menu/items.xml */
        getMenuInflater().inflate(R.menu.items, menu);

        /** Get the action view of the menu item whose id is search */
        View v = (View) menu.findItem(R.id.search).getActionView();

        /** Get the edit text from the action view */
        EditText txtSearch = ( EditText ) v.findViewById(R.id.txt_search);

        /** Setting an action listener */
        txtSearch.setOnEditorActionListener(new OnEditorActionListener() {

            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                Toast.makeText(getBaseContext(), "Search : " + v.getText(), Toast.LENGTH_SHORT).show();
                return false;
            }
        });

        return super.onCreateOptionsMenu(menu);
    }
}

7. Application in Execution

Figure 4 : Overflow Menu

Figure 5 : EditText appears on clicking the search menu item

8. Download

9. Reference

http://developer.android.com/guide/index.html

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

---

Tags: action bar, action view, custom action view, menu, options menu