Modul ini membahas tentang Android ActionBar. ActionBar digunakan sebagai launcher menu aplikasi untuk memindahkan pengguna ke menu lain. Modul ini menjelaskan cara menambahkan dan mengkonfigurasi ActionBar, seperti menambahkan item, icon, search view, dan membuat tab ActionBar. Modul ini juga berisi praktikum tentang penggunaan berbagai fitur ActionBar seperti tab dan fragment.

1. Praktikum ANDROID
ANDROID
FOR
BEGINNER MODUL 13
!
[ANDROID ACTIONBAR]
!!!!!
SUDARYATNO
yatnosudar@gmail.com | @dodulz | facebook : yatno.sudar
Page 1 of 12

2. Praktikum ANDROID
ANDROID ACTIONBAR
!
ActionBar adalah komponen android yang digunakan sebagai launcher menu aplikasi kita. Action
bar memudahkan user untuk pindah ke menu lain dengan menggunakan actionbar.
Gambar diatas adalah actionbar yang digunakan di Google Play Movie. Action bar mendukung
untuk pencarian, menu cepat, menu tab dan list. Actionbar di perkenalkan di android 4 keatas.
Namun sekarang android Android 2.1 (API level 7) sudah dapat menggunakan fitur ini. Dengan
android support library v7.
!
Menambahkan Library Support V7
1. Buka direktori SDK android.
2. Buka folder extras-android-support-v7-appcompat-libs
3. Copykan file android-support-v7-appcompat di folder libs project anda.
!
4. Selanjutnnya tambahkan library ke project
Page 2 of 12

3. Praktikum ANDROID
5. Tambahkan library android support v7 ke project anda :
!
Menambahkan AcionBar
Untuk menambahkan ActionBar anda perlu membuat class activity dengan extends
ActionBarActivity bukan dengan Activity. ActionBarActivity merupakan class yang terdapat di
support android v7 agar bisa support di android 2.1. Kemudian pada AndroidManifest.xml
Page 3 of 12

4. Praktikum ANDROID
tambahkan android:theme=“@style/Theme.AppCompat.Light”. Dan sekarang actionbar sudah
bisa dijalankan di android 2.1 keatas.
!
Menyembunyikan ActionBar
Untuk menyembunyikan actionbar anda dapat menggunakan code berikut di class activity :
!
Menambahkan icon di ActionBar
Secara default android akan mendeteksi icon android Anda sebagai logo actionbar. Namun jika
Anda ingin merubahnya anda dapat menggantinnya dengan menambahkan properti di
AndroidManifest.xml pada tag application atau activity dengan properti
android:logo=“@drawable/logoanda“
!
Menambahkan item di ActionBar
Untuk menambahkan item di ActionBar, buka file menu.xml di folder menu edit dengan tag berikut
Page 4 of 12
ActionBar actionBar = getSupportActionBar();
actionBar.hide();
?xml version=1.0 encoding=utf-8?
menu xmlns:android=http://schemas.android.com/apk/res/android
!-- Search / will display always --
item android:id=@+id/action_search
android:icon=@drawable/ic_action_search
android:title=@string/action_search
android:showAsAction=ifRoom/
!-- Location Found --
item android:id=@+id/action_location_found
android:icon=@drawable/ic_action_location_found
android:title=@string/action_location_found
android:showAsAction=ifRoom /
!-- Refresh --
item android:id=@+id/action_refresh
android:icon=@drawable/ic_action_refresh
android:title=@string/action_refresh
android:showAsAction=ifRoom /
!-- Help --
item android:id=@+id/action_help
android:icon=@drawable/ic_action_help
android:title=@string/action_help
android:showAsAction=never/

5. Praktikum ANDROID
Perhatikan bagian terpenting yaitu android:showAsAction
android:icon : digunakan untuk menampilkan icon.
android:title : menambahkan title.
android:showAsAction : mendefinisikan apakah mode item ditampilkan
ifRoom Menampilkan menu pada layar
never Tidak menampilkannya di actionbar
always Selalu menampilkan di actionbar
withText Menampilkan item icon berserta text
Anda dapat kreasikan menu sesuai dengan kebutuhan aplikasi Anda. Anda juga dapat membuat
file menu baru di dalam folder menu. Pada file activity tambahkan code berikut :
perhatikan code R.menu.main_activity_actions code tersebut digunakan untuk mengganti menu
sesuai dengan menu yang telah anda buat.
Page 5 of 12
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu items for use in the action bar
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_activity_actions, menu);
return super.onCreateOptionsMenu(menu);
}
!-- Check updates --
item android:id=@+id/action_check_updates
android:icon=@drawable/ic_action_refresh
android:title=@string/action_check_updates
android:showAsAction=never /
/menu
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Take appropriate action for each action item click
switch (item.getItemId()) {
case R.id.action_search:
// search action
return true;
case R.id.action_location_found:
// location found
LocationFound();
return true;

6. Praktikum ANDROID
code diatas digunakan untuk menambahkan action dari item actionbar anda. Mehtod tersebut
merupakan override dari activity. Anda dapat menambahkan action sesuai denga ID yang anda
gunakanan di menu xml.
!
Membuat split menu.
Split menu digunakan agar menu dapat diletakan di bagian bawah layar. Tujuan dari split menu
ini untuk menghindari menu item yang berlebihan, atau untuk memudahkan user untuk
menemukan menu yang di inginkan.
Untuk membuat split menu tambahkan code berikut do file AndroidManifest.xml pada tag
activity
Page 6 of 12
case R.id.action_refresh:
// refresh
return true;
case R.id.action_help:
// help action
return true;
case R.id.action_check_updates:
// check for updates action
return true;
default:
return super.onOptionsItemSelected(item);
}
activity uiOptions=splitActionBarWhenNarrow ...
meta-data android:name=android.support.UI_OPTIONS
android:value=splitActionBarWhenNarrow /
/activity

7. Praktikum ANDROID
!
Search View
SearchView digunakan sebagai media search di ActionBar. Tujuan dari search view adalah
memudahkan user unutk menuju menu search. Tampilan search view adalah sebagai berikut :
!
Untuk menggunakan search view di ActionBar, pada xml menu, Anda dapat menggunakan tag
berikut ini :
untuk mengakses field tersebut anda dapat menggunakan code berikut ini :
Page 7 of 12
?xml version=1.0 encoding=utf-8?
menu xmlns:android=http://schemas.android.com/apk/res/android
xmlns:yourapp=http://schemas.android.com/apk/res-auto
item android:id=@+id/action_search
android:title=@string/action_search
android:icon=@drawable/ic_action_search
yourapp:showAsAction=ifRoom|collapseActionView
yourapp:actionViewClass=android.support.v7.widget.SearchView /
/menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_activity_actions, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView)
MenuItemCompat.getActionView(searchItem);
// Configure the search info and add any event listeners
return super.onCreateOptionsMenu(menu);
}

8. Praktikum ANDROID
PRAKTIKUM
! Tujuan : Mengenal Actionbar, dapat menggunakan beberapa komponen actionbar. Terutama
actionbar tab.!
Scope : ActionBar, getActionbar, ActionBarActivity, ActionBar Tab! !!
1. Buat project baru.!
2. Edit file menu.xml di folder menu dengan code seperti berikut !
3. Tambah layout dengan nama fragment_main.xml dan tambahkan code berikut :!
Page 8 of 12
menu xmlns:android=http://schemas.android.com/apk/res/android
xmlns:app=http://schemas.android.com/apk/res-auto
xmlns:tools=http://schemas.android.com/tools
tools:context=com.example.tutorialactionbar.MainActivity
item
android:id=@+id/action_search
android:icon=@drawable/search
android:title=SEARCH
app:actionViewClass=android.support.v7.widget.SearchView
app:showAsAction=ifRoom|collapseActionView/
item
android:id=@+id/action_settings
android:icon=@android:drawable/sym_action_chat
android:orderInCategory=100
android:title=@string/action_settings
app:showAsAction=ifRoom/
/menu
RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android
xmlns:tools=http://schemas.android.com/tools
android:layout_width=match_parent
android:layout_height=match_parent
android:paddingBottom=@dimen/activity_vertical_margin
android:paddingLeft=@dimen/activity_horizontal_margin
android:paddingRight=@dimen/activity_horizontal_margin
android:paddingTop=@dimen/activity_vertical_margin
tools:context=com.example.tutorialactionbar.MainActivity
$PlaceholderFragment
TextView
android:id=@+id/page_title
android:layout_width=wrap_content
android:layout_height=wrap_content
android:layout_centerHorizontal=true
android:layout_centerVertical=true
android:textSize=150dp
android:text=A /
/RelativeLayout

9. Praktikum ANDROID
4. Edit layout activity_main.xml dengan code berikut : !
FrameLayout xmlns:android=http://schemas.android.com/apk/res/android
xmlns:tools=http://schemas.android.com/tools
android:id=@+id/container
android:layout_width=match_parent
android:layout_height=match_parent
tools:context=com.example.tutorialactionbar.MainActivity
tools:ignore=MergeRootFrame /
5. Edit AndroidManifest.xml dengan code berikut :!
?xml version=1.0 encoding=utf-8?
manifest xmlns:android=http://schemas.android.com/apk/res/android
6. Edit MainActivity dengan code berikut : ! !
Page 9 of 12
package=com.example.tutorialactionbar
android:versionCode=1
android:versionName=1.0
uses-sdk
android:minSdkVersion=8
android:targetSdkVersion=19 /
application
android:allowBackup=true
android:icon=@drawable/ic_launcher
android:label=@string/app_name
android:theme=@style/AppTheme
activity
android:name=com.example.tutorialactionbar.MainActivity
android:label=@string/app_name
intent-filter
action android:name=android.intent.action.MAIN /
!
category
android:name=android.intent.category.LAUNCHER /
/intent-filter
/activity
/application
/manifest

10. Praktikum ANDROID
Page 10 of 12
public class MainActivity extends ActionBarActivity implements
ActionBar.TabListener { !
public String title_tab[] = { TAB 1, TAB 2, TAB 3 };
public String big_text[] = { A, B, C }; !
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionbar = getSupportActionBar();
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); !
for (int i = 0; i title_tab.length; i++) {
actionbar.addTab(actionbar.newTab().setText(title_tab[i])
.setTabListener(this));
}
} !
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
} !
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
AlertDialog.Builder builder = new
Builder(MainActivity.this);
builder.setTitle(Contoh Dialog);
builder.setMessage(ISI Dialog);
builder.setPositiveButton(OK, new OnClickListener() {
@Override
public void onClick(DialogInterface arg0, int arg1) {
arg0.dismiss();
}
});
builder.show();
return true;
}
return super.onOptionsItemSelected(item);
} !
public static class PlaceholderFragment extends Fragment {
public String title_page = ;
private static final String ARG_TITLE = section_title; !
public static PlaceholderFragment newInstance(String title_page) {

11. Praktikum ANDROID
!
Page 11 of 12
PlaceholderFragment fragment = new PlaceholderFragment();
Bundle args = new Bundle();
args.putString(ARG_TITLE, title_page);
fragment.setArguments(args);
return fragment;
}
!
private TextView judul_page;
!
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup
container,
Bundle savedInstanceState) {
View rootView =
inflater.inflate(R.layout.fragment_main, container,
false);
judul_page = (TextView)
rootView.findViewById(R.id.page_title);
judul_page.setText(getArguments().getString(ARG_TITLE));
return rootView;
}
!
}
!
@Override
public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
}
!
@Override
public void onTabSelected(Tab arg0, FragmentTransaction arg1) {
getSupportFragmentManager()
.beginTransaction()
.replace(
R.id.container,
PlaceholderFragment.newInstance(big_text[arg0
.getPosition()])).commit();
}
!
@Override
public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
}
!}

12. Praktikum ANDROID
7. Copy icon search di masing-masing drawable!
8. Jalankan : ! !
Tugas :!
1. Buat item menu untuk pindah fragment ke TAB 3!
2. Buat satu fragment yang isinnya form nama dan password dan button!
3. Buat satu tab activity dan isinnya adalah fragment yang baru di buat.
Page 12 of 12