modul praktikum 13 - android sudaryatno

Praktikum ANDROID

ANDROID

FOR

BEGINNER MODUL 13 ![ANDROID ACTIONBAR]

!!!!!SUDARYATNO [email protected] | @dodulz | facebook : yatno.sudar

Page � of �1 12

mailto:[email protected]

Praktikum ANDROIDANDROID 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 � of �2 12

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 � of �3 12

Praktikum ANDROIDtambahkan 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 <appl icat ion> atau <activ i ty> dengan propert i

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 � of �4 12

ActionBar actionBar = getSupportActionBar();actionBar.hide();

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" >  <item android:id="@+id/action_search" android:icon="@drawable/ic_action_search" android:title="@string/action_search" android:showAsAction="ifRoom"/>  <item android:id="@+id/action_location_found" android:icon="@drawable/ic_action_location_found" android:title="@string/action_location_found" android:showAsAction="ifRoom" />  <item android:id="@+id/action_refresh" android:icon="@drawable/ic_action_refresh" android:title="@string/action_refresh" android:showAsAction="ifRoom" />  <item android:id="@+id/action_help" android:icon="@drawable/ic_action_help" android:title="@string/action_help" android:showAsAction="never"/>

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

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.

ifRoom Menampilkan menu pada layar

never Tidak menampilkannya di actionbar

always Selalu menampilkan di actionbar

withText Menampilkan item icon berserta text

Page � of �5 12

@Overridepublic 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);}

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

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 � of �6 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>

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

@Overridepublic 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);}

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 � of �8 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>

Praktikum ANDROID4. Edit layout activity_main.xml dengan code berikut : !

5. Edit AndroidManifest.xml dengan code berikut :!

6. Edit MainActivity dengan code berikut : !!

Page � of �9 12

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

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" 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>

Praktikum ANDROID

Page � of �10 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) {

Praktikum ANDROID

!Page � of �11 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) { }!}

Praktikum ANDROID7. 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 � of �12 12

modul praktikum 13 - android sudaryatno

Software