Creating an expandable action view in pre Honeycomb Android versions using Sherlock library

August 2, 2012
By

This article is an extension of the article titled “Adding Custom Action View to Action Bar in Android” where we have seen how to create expandable action view in Honeycomb and its above versions. In this article we will see how to create expandable action views in pre Honeycomb versions where built in action bar is not available.

The application described in this article is developed in Eclipse ( 3.7.2) with ADT plugin ( 20.0.2 ) and Android SDK (R20.0.1 ) .


1. Setup Action Bar Sherlock library in Eclipse IDE

Please see the article titled “Setting up Sherlock library for action bar in pre Honeycomb Android Applications


2. Create a new Android application project namely “ActionBarExpandableActionViewSherlock”

New Android application project

Figure 1 : New Android application project


3. Design application launcher icon

Design application launcher icon

Figure 2 : Design application launcher icon


4. Create a blank activity

Create a blank Activity

Figure 3 : Create a blank Activity


5. Enter MainActivity details

Enter MainActivity Details

Figure 4 : Enter MainActivity Details


6. Delete Android’s support library

Delete the default Support library

Figure 5 : Delete the default Support library


7. Add Sherlock library to this project

  • Open Project Explorer
  • Right click the project
  • Open Properties
  • Select “Android” tab from the Properties Window
  • Then the given below screen will be appeared
  • Using Add button, add the Sherlock library to this project
Adding Sherlock library to this project

Figure 6 : Adding Sherlock library to this project


8. Create a new layout file res/layout/search_layout.xml


<?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>

This file is used as the layout for the expanded action view.


9. Create a menu file res/menu/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>


10. Update the main activity file src/in/wptrafficanalyzer/actionbarexpandableactionviewsherlock/MainActivity.java


package in.wptrafficanalyzer.actionvbarexpandableactionviewsherlock;

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

import com.actionbarsherlock.app.SherlockActivity;

public class MainActivity extends SherlockActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(com.actionbarsherlock.view.Menu menu) {

        /** Create an option menu from res/menu/items.xml */

        getSupportMenuInflater().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);

    }
}


11. Update the file AndroidManifest.xml


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.actionvbarexpandableactionviewsherlock"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/Theme.Sherlock.ForceOverflow"
        >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>


12. Screenshot of the application in execution

Showing all Options Menu of the main screen

Figure 7 : Showing all options Menu of the main screen

Search action is expanded on its selection

Figure 8 : Search action is expanded on its selection


13. Download


14. 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: , , , ,

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