ActionBar in Android

ActionBar in the title bar of android apps Android allows us quick, more convenient. This is an example of the ActionBar in Gmail.

actionbar in android

This article will guide you to create and work with ActionBar easily possible.

1. Create ActionBar
2. Add buttons (menu) in ActionBar
3. Getting the event of ActionBar menu
4. Create button icon back on
5. SearchView on ActionBar
6. Share on ActionBar

ActionBar introduced by android 3.0 or more, however with the smaller Android can also be used by the “library support”.

1. Create ActionBar


Create ActionBar for Android 3.0 or more
The work is very simple, when creating a new project you choose the smallest version can run applications that 3.0 (or greater) as default and then we tweak ActionBar.

create actionbar

After creating the project you can see in the file will have this line AndroidMainfest.xml

android:minSdkVersion="11"

Create Android ActionBar with smaller 3.0
Normally when you create the Project using smaller android 3.0 it will automatically create “library” appcompat_v7 and extends from ActionBarActivity MainActivity will immediately and do not need to add anything. In case if it is not self-generated, then you must perform the following steps:
B1 Download lib support từ SDK manager (if no).

Them thu vien android

B2 Add library to workspace: File -> Import -> Existing Project into Workspace. Then click Next. On the next screen select Browse and select to “Android SDK folder yet” \sdkextrasandroidsupportv7appcompat và click OK.

add Support Library

B3 Add library to the project: Right-click and select Properties Project and move to Android. click on the Add button and select appcompat_v7.


B4: Back MainActivity.java file and execute legacy ActionBarActivity

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

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

Ok so then. Now run the project will be implemented with ActionBar simple program like this. Of course, no buttons at all, we will start to implement now.
actionbar

2. Creating the menu


In essence the ActionBar buttons that you see there is the menu. So to add the buttons that I just finished adding the menu. For example, we need more 2 menu is search and share
B1: Mở file main.xml (you should be renamed to help confused action_main.xml) calls in the / res / menu / add items to the following:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <!--
    Trong mỗi item có 
    id: để truy xuất kết nối code java
    icon: icon của menu
    showAsAction: trạng thái cho phép hiển thị trên actionbar không
    title: tiêu để dạng text
    -->

    <item
        android:id="@+id/action_search"
        android:icon="@android:drawable/ic_menu_search"
        android:showAsAction="ifRoom"
        android:title="search"/>
    <item
        android:id="@+id/action_share"
        android:icon="@android:drawable/ic_menu_share"
        android:showAsAction="ifRoom"
        android:title="share"/>

</menu>

B2: Back MainActivity.java file and rewrite methods onCreateOptionsMenu

@Override
public boolean onCreateOptionsMenu(Menu menu) {
	// Inflate the menu; this adds items to the action bar if it is present.
	getMenuInflater().inflate(R.menu.action_main, menu);
	return true;
}

So we get the menu like this:

menu actionbar

For smaller android 3.0 you need to change a little bit about the following file action_main.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" >

    <!--
    Trong mỗi item có 
    id: để truy xuất kết nối code java
    icon: icon của menu
    showAsAction: trạng thái cho phép hiển thị trên actionbar không
    title: tiêu để dạng text
    -->
    <item
        android:id="@+id/action_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="search"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_share"
        android:icon="@android:drawable/ic_menu_share"
        android:title="share"
        app:showAsAction="ifRoom"/>

</menu>

Noted: You can set the value for showAsAction was “always” so that it always appears or “never” to never appear on the ActionBar, it is only displayed when you press the menu button.

3. Getting event menus


To make a start event for the menu item, we made in the method onOptionsItemSelected in MainActivity.java, suppose when clicking on the corresponding menu you will do you want, its also appears on Toast demo offline.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	// Handle presses on the action bar items
	switch (item.getItemId()) {
	case R.id.action_search:
		search();
		return true;
	case R.id.action_share:
		share();
		return true;
	default:
		return super.onOptionsItemSelected(item);
	}
}

private void search() {
	Toast.makeText(this, "You click search", Toast.LENGTH_SHORT).show();
}

private void share() {
	Toast.makeText(this, "You click share", Toast.LENGTH_SHORT).show();
}

4. Create a back button icon in Applications


When applied in a particular activity is not home. You will see on the app icon with an arrow to return like this:
up button
This button allows you to return to the screen (Activity) before it or any activity that. In general it is similar to pressing the Back button on your phone. However, there are many differences you can click here

At acitivity you want to insert the button up, you just need to give it up by calling:

actionBar.setDisplayHomeAsUpEnabled(true);

Examples of applications we create 1 button, when clicking the button will switch to other acitivity is Item1Acitivty, Item1Acitivty want to show up at one node reads as follows:

public class Item1Activity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_item1);

		// lấy ActionBar
		ActionBar actionBar = getActionBar();
		// hiển thị nút Up ở Home icon
		actionBar.setDisplayHomeAsUpEnabled(true);

		// Nếu bạn dùng thư viện hỗ trợ cho android nhỏ hơn 3.0
		/*
		 * ActionBar actionBar = getSupportActionBar();
		 * actionBar.setDisplayHomeAsUpEnabled(true);
		 */
	}
}

So the show has finished, However, when we press it no nothing phenomenon, we need to set attributes parentActivityName Activity points on which we want, here is MainActivity, You can point to other Activity.

<activity
    android:name=".Item1Activity"
    android:label="@string/title_activity_item1"
    android:parentActivityName="cachhoc.net.tutactionbar.MainActivity" >
</activity>

However, for the Android 4.0 downwards then we need to declare meta-data part as follows:

<activity
    android:name=".Item1Activity"
    android:label="@string/title_activity_item1"
    android:parentActivityName="cachhoc.net.tutactionbar.MainActivity" >
    <meta-data
        android:name="android.support.PARENT_ACTIVITY"
        android:value="cachhoc.net.tutactionbar.MainActivity" />
</activity>

Now, we can use it then.

5. SearchView on ActionBar


Android provides some immediate action on ActonBar, I will guide you to create a search box when clicking on the search menu. The search is easy framing, you just need to rewrite the search item in the following file /res/menu/action_main.xml:

<!--
giá trị collapseActionView trong showAsAction 
cho biết nó có thể đóng khi ấn vào bất kỳ nút nào
-->
<item
    android:id="@+id/action_search"
    android:actionViewClass="android.widget.SearchView"
    android:icon="@android:drawable/ic_menu_search"
    android:showAsAction="ifRoom|collapseActionView"
    android:title="search"/>

For android 3.0 or less you do the following:

<item
    android:id="@+id/action_search"
    android:icon="@android:drawable/ic_menu_search"
    android:title="search"
    app:actionViewClass="android.support.v7.widget.SearchView"
    app:showAsAction="ifRoom|collapseActionView"/>

So when clicking on the search menu we searchview like this. And yet the search done all you read more Use SearchView in ActioBar (Updating)

searchview in actionbar

6. Use the share menu on the ActionBar


Android allows us to share some information via social networks or a certain service. This example will perform his share text.

To do share one menu item to make changes in the following menu:

<item
        android:id="@+id/action_share"
        android:actionProviderClass="android.widget.ShareActionProvider"
        android:showAsAction="ifRoom"
        android:title="Share"/>

Next to MainActivity and repair methods onCreateOptionsMenu

For android 3.0 use of library support

<item
        android:id="@+id/action_share"
        android:icon="@android:drawable/ic_menu_share"
        android:title="share"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="ifRoom"/>

share menu in ActionBar

Read more: ActionBar in android