Adding Custom Action View to Action Bar in Android

July 20, 2012
By

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”

New Android Project

Figure 1 : New Android Project


2. Select Android Build Target

Select Android Build Target

Figure 2 : Select Android Build Target


3. Enter Application Details

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

Overflow Menu

Figure 4 : Overflow Menu

EditText appears on clicking the search menu item

Figure 5 : EditText appears on clicking the search menu item


8. Download


9. Reference

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


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

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



Tags: , , , ,

5 Responses to Adding Custom Action View to Action Bar in Android

  1. Eduardo Lagares on October 4, 2012 at 7:21 pm

    How do I set the focus on my EditText and show the keyboard.

    In my case, the EditText does not request focus and the keyboard does not show.

    • Vikas B L on February 21, 2013 at 12:34 pm

      You can do it using tag below edittext

  2. sivaramakrishnan on October 31, 2013 at 11:14 am

    how to add buttons to top actionbar.pls tell me sir.

  3. Datchayani on December 11, 2013 at 5:37 pm

    Nice Tutorial to learn about action bars. pls tell me How to change the color of the action bar

  4. albert on February 15, 2014 at 11:26 am

    tanx, your code helps me on how to listen my switch widget inside action bar. your a great!

Leave a Reply

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

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner