Materi 11 - Options Menu

Imam Ibnu Badri Pemrograman Mobile 13.32

Kompetensi dan Indikator

Kompetensi Dasar:

Mengetahui fungsi action bar
Menambahkan options menu pada action bar

Indikator:

Mahasiswa mampu membuat aplikasi dengan menerapkan options menu pada action bar

Materi

A Dasar Teori
Sebuah App Bar (atau sering disebut action bar) adalah space yang terletak pada bagian paling atas sebuah aplikasi pada setiap layar activity. Sebuah Options menu pada aplikasi menyediakan navigasi yang dapat digunakan untuk menghubungkan antar activity. Berikut adalah contoh dari penerapan option menu.

Sumber: codelabs.developers.google.com

App Bar. Sebuah App bar termasuk didalamnya adalah app tittle, option menu dan overflow button
Options menu action icons. Merupakan option menu yang direpresentasikan dalam icons pada App Bar.
Overflow Button. Button yang ditunkkan dalam 3 titik vertikal dimana apabila diklik akan membuka beberapa item menu lainnya
Options overflow menu. Meru pakan item menu yang muncul ketika button overflow diklik.

B Menambahkan Items ke Options Menu

Buat terlebih dahulu sebuah project Aplikasi, misal diberi nama "MyApplication7". Atau dapat menggunakan project yang sudah ada.
Buat sebuah resource file, dengan cara klik kanan folder res ➜ new ➜ Android Resource File.
Lengkapi file name dan pastikan resource type dan directory name adalah sebagai berikut.
Download icon.png dan letakkan pada folder res/drawable. Dalam contoh ini digunakan dua buah icon sebagai berikut:

Download file dengan cara mengklik kanan gambar berikut ➜ pilih "Save image as...".
Copy file image tersebut ke dalam folder drawable.

Buka file res/menu/menu_satu.xml dan buat beberapa item menu sebagai berikut:

    <item
        android:id="@+id/action_favourite"
        android:icon="@drawable/ic_favorite"
        android:title="Favorite"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_chat"
        android:icon="@drawable/ic_question"
        android:title="Chatting"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_contact"
        android:title="Contact"
        app:showAsAction="never"/>

    <item
        android:id="@+id/action_setting"
        android:title="Setting"
        app:showAsAction="never"/>

Perhatikan pada atribut "ShowAsAction"". Di dalamnya terdapat tiga item atribut yang paling sering digunakan dalam menubar yaitu "always","never" dan "ifroom". Perbedaannya adalah "always" selalu menampilkan menu sebagai action di dalam AppBar disertai dengan icon yang dimiliki. "never" menampilkan menu selalu di dalam Button overflow sedangkan "ifroom" akan menampilkan menu dan icon sebagai action apabila masih ada space yang tersedia. Tetapi apabila tidak ada space maka menu tersebut akan otomatis masuk ke dalam Button overflow.

Buka file res/values/styles.xml dan identifikasikan sebuah theme dengan nama "AppTheme.NoActionBar"

    <style name="AppTheme.NoActionBar">
        <item name="android:windowActionBar">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>

Buka file AndroidManifest.xml dan ubah default Theme menjadi
```
    android:theme="@style/AppTheme.NoActionBar">
```

Kemudian pada layout activity_main .xml tambahkan toolbar sebagai berikut

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
    </android.support.v7.widget.Toolbar>

Tambahkan supportActionBar di dalam method onCreate() pada MainActivity.java

        Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(Toolbar);

Terakhir inflate layout menu_satu.xml ke dalam MainActivity dengan cara mengoveride method onCreateOptionMenu

    @Override
    public boolean onCreateOptionsMenu (Menu menu){
        getMenuInflater().inflate(R.menu.menu_satu, menu);
        return true;
    }

Jalankan Aplikasi sehingga tampilannya akan seperti berikut

C Menambahkan OnOptionltemSelected event Handler
Untuk dapat mengimplementasikan menu item AppBar pada aplikasi. Diperlukan sebuah method onOptionItemSelected() untuk menghandle item yang dipilih/diklik. Di dalam method ini nanti nya terdapat switch case/ if blok untuk menentukan id item mana yang dipilih dan mendeskripsikan pesan atau aksi pada masing-masing item. Dalam kasus ini, item menu hanya akan menampilkan sebuah pesan melalui Toast.

Pada file MainActivity .java, tambahkan sebuah method onOptionItemSelected(). Sebagai berikut.

    @Override
    public boolean onOptionsItemSelected (MenuItem item){
        switch (item.getItemId()){
            case R.id.action_bluetooth:
                Toast.makeText(MainActivity.this, "Action bluetooth di klik",
                        Toast.LENGTH_SHORT) .show();
                return true;
            case R.id.action_library:
                Toast.makeText(MainActivity.this, "Action library di klik",
                        Toast.LENGTH_SHORT) .show();
                return true;
            case R.id.action_favorite:
                Toast.makeText(MainActivity.this, "Action favorite di klik",
                        Toast.LENGTH_SHORT) .show();
                return true;
            case R.id.action_music:
                Toast.makeText(MainActivity.this, "Action music di klik",
                        Toast.LENGTH_SHORT) .show();
                return true;
            default:
                //do nothing
        }
        return super.onOptionsItemSelected(item);
    }

Jalankan Aplikasi dan klik pada menu item.

D Menambahkan Layout Content Main dan Floating Action Button
Untuk memudahkan pengembang dalam mengelola halaman layout aplikasi, umumnya sebuah aplikasi Android memisahkan antara layout main (sebagai layout navigasi, menempatkan menu, toolbar dsb) dengan layout content (sebagai wadah untuk menempatkan konten halaman aplikasi)

Create New Layout
⇒ Klik kanan pada res ➞ new ➞ Layput resource file
⇒ Lengkapi file name (nama layout), root element jenis layout), source set dan directory name. Kemudian pilih OK

Buka file layout content_main.xml. Sebagai contoh tambahkan satu komponen View berupa TextView. Layout content_main.xml inilah yang nantinya akan digunakan untuk menempatkan komponen-kom ponen User Interface konten aplikasi.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is My Menu Application"
        android:layout_centerInParent="true"/>

Buka file layout activity_main.xml. Kemudian include kan file layout content_main.xml menggunakan kode berikut :
```
    <include layout="@layout/content_main"></include>
```
Jalankan Aplikasi

Menambahkan Floating Action Button secara manual.
⇒ Buka file activity_main.xml. Tambahkan kode berikut dibawah </include>

  <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="15dp"
        app:scrCompat="@android:drawable/ic_dialog_email"/>

⇒ Selanjutnya buka MainActivity.java, di dalam method onCreate() tambahkan kode berikut

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener (new View.OnClickListener(){
        @Override
                public void onClick(View view){
                    Snackbar.make(View, "Flatong action button diklik", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
                }   
        });

⇒ Jalankan aplikasi

Latihan

Buat program untuk membuat option menu digabungkan dengan form data entry untuk memasukan data pribadi

Latihan 2

Buatlah sebuah aplikasi minimal terdapat 5 activity yang sating terhubung satu dengan yang lainnya. Aplikasi tersebut memiliki tema "Shop" yang menawarkan produk tertentu dari sebuah toko (Minimal produk yang ditawarkan adalah 5 produk). Selain itu di dalam aplikasi buatlah sebuah halaman yang mendeskripsikan tentang aplikasi yang Anda buat dan tentang diri Anda. Buatlah desain layout aplikasi yang menarik dan interaktif bagi user.

Daftar Isi - Pemrograman Mobile

TeachMeSoft