Page 1 of 1

Android ActionBar Tutorial

#1 htc(hot-taco-cheese)  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 71
  • Joined: 04-December 10

Posted 10 April 2012 - 10:43 AM

Hello, this is a tutorial introducing the ActionBar that was introduced in Android 3.0. It is a menu bar that is positioned at the top of the screen and is used as a replacement for the title bar. Google is really pushing developers to use ActionBars and move away from using the hardware menu button.

To get started, create a new project called ActionBarTutorial, with a MainActivity ,and a target version of 4.0.3 or 3.0.

First we have to edit the Manifest to change the theme. Change the application part of the manifest to look like this.
<application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Holo" >



Now for the MainActivity. The only thing that should be new is in the onCreate method.
public class MainActivity extends Activity {
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // gets the activity's default ActionBar
        ActionBar actionBar = getActionBar();
        actionBar.show();
        
        // set the app icon as an action to go home
        // we are home so we don't need it
        // actionBar.setDisplayHomeAsUpEnabled(true);
        
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    	// use an inflater to populate the ActionBar with items
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return true;
    }
    
    @Override
  	public boolean onOptionsItemSelected(MenuItem item){
    	// same as using a normal menu
    	switch(item.getItemId()) {
    	case R.id.item_refresh:
    		makeToast("Refreshing...");
    		break;
    	case R.id.item_save:
    		makeToast("Saving...");
    		break;
    	}
    	
  		return true;
  	}
    
    public void makeToast(String message) {
    	// with jam obviously
    	Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }
    
}



The menu xml file:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
	<item
		android:id="@+id/item_refresh"
		android:icon="@drawable/ic_menu_refresh"
		android:title="Refresh"
		android:showAsAction="ifRoom|withText" />
	
	<item
		android:id="@+id/item_save"
		android:icon="@drawable/ic_menu_save"
		android:title="Save"
		android:showAsAction="ifRoom|withText" />
</menu>


This is just a normal menu xml. The only thing that might be new is the last line of each item. This line just says, if there is enough room, the title will be shown. (The drawables can be found at the Design Guidlines site)

Now run it on a Honeycomb or ICS emulator and behold the action bar. Easy, right?

Spoiler


So now we have a few options. We can write our own action bar code, like Google does(see ActionBarCompat in your sdk samples folder). Or we can use libraries. For ease of use, we will use a person's repository, Android-ActionBar. Download the source from there and follow the instructions linked in his readme.

Welcome back!
Now that you've added that library project, back to coding.

First off, lets update the Manifest. Change the theme to this because the Holo theme did not exist prior to API v11.
android:theme="@android:style/Theme.NoTitleBar"



Add this to your main layout xml. This creates an artificial actionbar.
<com.markupartist.android.widget.ActionBar
    android:id="@+id/actionbar"
    style="@style/ActionBar" />



Now we need to update our activity for the new actionbar option we are using. Rather than using a menu xml, we make a private class for each action.
import com.markupartist.android.widget.ActionBar;
import com.markupartist.android.widget.ActionBar.Action;
import com.markupartist.android.widget.ActionBar.IntentAction;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.onclickListener;
import android.widget.Toast;

public class MainActivity extends Activity {
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // get the ActionBar from our layout
        ActionBar actionBar = (ActionBar) findViewById(R.id.actionbar);
        // set its title
	    actionBar.setTitle(R.string.app_name);
	    // set what the home action does
	    actionBar.setHomeAction(new IntentAction(this, MainActivity.createIntent(this), R.drawable.ic_launcher));
	    // add the refresh action
	    actionBar.addAction(new RefreshAction());
	    // add the save action
	    actionBar.addAction(new SaveAction());
	    
	    // add a listener to the title
	    actionBar.setOnTitleClickListener(new onclickListener() {
	        public void onclick(View v) {
	            makeToast("Title clicked...");
	        }
	    });
    }
    
    // the refresh action
    private class RefreshAction implements Action {

        @Override
        public int getDrawable() {
            return R.drawable.ic_menu_refresh;
        }

		@Override
		public void performAction(View view) {
			makeToast("Refreshing...");
		}

    }
    
    // the save action
    private class SaveAction implements Action {

        @Override
        public int getDrawable() {
            return R.drawable.ic_menu_save;
        }

		@Override
		public void performAction(View view) {
			makeToast("Saving...");
		}

    }
    
    // a simple method to create an intent
    public static Intent createIntent(Context context) {
        Intent i = new Intent(context, MainActivity.class);
        i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        return i;
    }
    
    public void makeToast(String message) {
    	// with jam obviously
    	Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }
    
}



The theme it uses isn't all that great so be creative with it. Use drawables and colors.
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="actionbar_separator">#FFFFFF</color>
    <color name="actionbar_background_start">#000000</color>
    <color name="actionbar_background_end">#33b5e5</color>
    <color name="actionbar_background_item_pressed_start">#33b5e5</color>
    <color name="actionbar_background_item_pressed_end">#33b5e5</color>
</resources> 


And now, you can delete the menu xml that was created unless you want an ActionBar and a menu popup.

The full source: Attached File  ActionBarTut.zip (269.44K)
Number of downloads: 11253

Is This A Good Question/Topic? 0
  • +

Page 1 of 1