ActionBar trong Android

ActionBar trong android là thanh tiêu đề của ứng dụng Android cho phép chúng ta thao tác nhanh, tiện lợi hơn. Đây là ví dụ về ActionBar trong Gmail.

Bài viết này sẽ hướng dẫn các bạn tạo và làm việc với ActionBar một cách dễ dàng nhất có thể.

1. Tạo ActionBar
2. Thêm các nút (menu) vào ActionBar
3. Bắt sự kiện menu của ActionBar
4. Tạo nút trở về trên icon
5. SearchView trên ActionBar
6. Share trên ActionBar

ActionBar được đưa vào từ android 3.0 trở lên, tuy nhiên với các bản Android nhỏ hơn cũng có thể làm được bằng việc sử dụng “thư viện hỗ trợ”.

1. Tạo ActionBar

Tạo ActionBar với Android 3.0 trở lên
Công việc rất đơn giản, khi tạo project các bạn chọn phiên bản nhỏ nhất có thể chạy được ứng dụng là 3.0 (hoặc lớn hơn) là mặc định chúng ta có đựoc ActionBar rồi.

Sau khi tạo xong project các bạn có thể xem trong file AndroidMainfest.xml sẽ có dòng này

android:minSdkVersion="11"

Tạo ActionBar với Android nhỏ hơn 3.0
Bình thường khi mình tạo các Project dùng android nhỏ hơn 3.0 thì nó sẽ tự động tạo ra “thư viện” appcompat_v7 và MainActivity sẽ extends từ ActionBarActivity ngay và không cần làm thêm gì cả. Trong trường hợp nếu nó không tự sinh ra thì các bạn cần thực hiện các bước sau:
B1 Download lib support từ SDK manager (nếu chưa có).

B2 Thêm thư viện vào workspace: File -> Import -> Existing Project into Workspace. Sau đó click Next. Ở màn hình tiếp theo chọn Browse và chọn tới “Thư mục chưa Android SDK” sdkextrasandroidsupportv7appcompat và click OK.

B3 Thêm thư viện vào project: Click chuột phải vào Project và chọn Properties và chuyển sang mục Android. click vào nút Add và chọn appcompat_v7.

B4: Trở lại file MainActivity.java và thực hiện kế thừa 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);
	}
}

Vậy là Ok rồi. Bây giờ thực hiện chạy project sẽ được chương trình có ActionBar đơn giản như thế này. Tất nhiên là chưa có cac nút gì cả, chúng ta sẽ bắt đầu thực hiện tiếp ngay bây giờ.

2. Tạo các menu

Thực chất các nút bấm trên ActionBar mà các bạn thấy đó là các menu. Vậy để thêm các nút bấm đó ta chỉ việc thêm menu là xong. Ví dụ ta cần thêm 2 menu là search và share
B1: Mở file main.xml (bạn nên đổi tên lại là action_main.xml cho đỡ nhầm lẫn) trong thưc mục /res/menu/ thêm các item vào như sau:

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

     

    <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: Trở lại file MainActivity.java và viết lại phương thức 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;
}

Vậy là ta được menu như thế này:

Đối với android nhỏ hơn 3.0 các bạn cần thay đổi một chút về file action_main.xml như sau:

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

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

Lưu ý: Bạn có thể đặt giá trị cho showAsAction là “always” để nó luôn luôn xuất hiện hoặc “never” để không bao giờ xuất hiện trên ActionBar, nó chỉ được hiển thị khi bạn ấn nút menu.

3. Bắt sự kiện các menu

Để thực hiện bắt sự kiện cho các menu item, chúng ta thực hiện trong phương thức onOptionsItemSelected trong MainActivity.java, giả sử khi click vào các menu tương ứng bạn sẽ thực hiện việc mà bạn muốn, còn mình demo hiển lên Toast nhé.

@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. Tạo nút quay về tại icon Ứng dụng

Khi ứng dụng ở một activity nào đó không phải home. Bạn sẽ thấy trên icon ứng dụng có mũi tên quay về như thế này:

Nút này cho phép bạn quay trở về màn hình (Activity) trước nó hoặc một activity nào đó bất kỳ. Nói chung nó tương tự như khi ấn nút Back trên điện thoại. Tuy nhiên có nhiều điểm khác biệt bạn có thể xem tại đây

Tại acitivity bạn muốn chèn nút up, bạn chỉ cần cho nó hiện lên bằng cách gọi:

actionBar.setDisplayHomeAsUpEnabled(true);

Ví dụ trong ứng dụng của chúng ta tạo thêm 1 button, khi click vào button sẽ chuyển sang acitivity khác là Item1Acitivty, ở Item1Acitivty muốn hiện nút up ta viết như sau:

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);
		 */
	}
}

Vậy là việc hiển thị đã xong, tuy nhiên khi chúng ta ấn nó chưa có hiện tượng gì, chúng ta cần đặt thuộc tính parentActivityName trỏ về Activity mà chúng ta muốn, ở đây là MainActivity, các bạn có thể trỏ đến Activity khác.

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

Tuy nhiên đối với các bản Android 4.0 trở xuống thì chúng ta cần khai báo thêm phần meta-data cụ thể như sau:

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

Bây giờ thì chúng ta có thể sử dụng nó rồi.

5. SearchView trên ActionBar

Android cung cấp một số hành động ngay trên ActonBar, mình sẽ hướng dẫn các bạn tạo khung tìm kiếm khi ấn vào menu search. Việc tạo khung search rất dễ dàng, bạn chỉ cần viết lại item search trong file /res/menu/action_main.xml như sau:

 
<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"/>

Đối với android 3.0 trở xuống bạn làm như sau:

<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"/>

Vậy là khi ấn vào menu search chúng ta có searchview như thế này. Còn việc search thực hiện hết nào thì bạn đọc thêm bài Sử dụng SearchView trong ActioBar (Đang cập nhật)

6. Sử dụng menu share trên ActionBar

Android cho phép chúng ta chia sẻ một số thông tin qua mạng xã hội hoặc một dịch vụ nào đó. Ví dụ này mình sẽ thực hiện chia sẻ một đoạn text.

Để thực hiện menu share ta thực hiện thay đổi item trong menu như sau:

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

Tiếp theo vào MainActivity và sửa lại phương thức 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);

	MenuItem item = menu.findItem(R.id.action_share);
	ShareActionProvider myShareActionProvider = (ShareActionProvider) item
			.getActionProvider();

	Intent myIntent = new Intent();
	myIntent.setAction(Intent.ACTION_SEND);
	myIntent.putExtra(Intent.EXTRA_TEXT,
			"Đây là đoạn text tôi muốn chia sẻ");
	myIntent.setType("text/plain");

	myShareActionProvider.setShareIntent(myIntent);

	return true;
}

Đối với android 3.0 sử dụng thư viện hỗ trợ

<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"/>

/* lưu ý: import android.support.v7.widget.ShareActionProvider; */

@Override
public boolean onCreateOptionsMenu(Menu menu) {
	getMenuInflater().inflate(R.menu.actionbar_menu, menu);

	// Set up ShareActionProvider's default share intent
	MenuItem shareItem = menu.findItem(R.id.action_share);
	ShareActionProvider myShareActionProvider = (ShareActionProvider) MenuItemCompat
			.getActionProvider(shareItem);

	Intent myIntent = new Intent();
	myIntent.setAction(Intent.ACTION_SEND);
	myIntent.putExtra(Intent.EXTRA_TEXT,
			"Đây là đoạn text tôi muốn chia sẻ");
	myIntent.setType("text/plain");

	myShareActionProvider.setShareIntent(myIntent);

	return super.onCreateOptionsMenu(menu);
}

Đọc thêm: ActionBar in android