4.2: Menggunakan Menu Opsi

Tugas 1: Menambahkan item ke menu opsi opsi

Buka proyek Droid Cafe dari praktik sebelumnya. Proyek menyertakan file layout berikut di folder res > layout:

  1. activity_main.xml: Layout utama untuk MainActivity, layar pertama yang dilihat pengguna.

  2. content_main.xml: Layout untuk konten layar MainActivity, yang (seperti akan segera Anda lihat) disertakan di dalam activity_main.xml**.

  3. activity_order.xml: Layout untuk OrderActivity, yang Anda tambahkan di praktik sebelumnya.

Buka content_main.xml: Di praktik sebelumnya, Anda telah menambahkan TextView dan ImageView ke grup view root, yang merupakan RelativeLayout.

Buka activity_main.xml untuk melihat layout utama, yang menggunakan layout CoordinatorLayout dengan layout AppBarLayout yang disematkan. Tag CoordinatorLayout dan AppBarLayout memerlukan nama yang sepenuhnya memenuhi kualifikasi yang menetapkan android.support.design, yaitu Android Design Support Library. 

  1. Jalankan aplikasi. Perhatikan bilah di bagian atas layar yang menampilkan nama aplikasi (Droid Cafe). Ini juga menampilkan tombol luapan tindakan (tiga titik vertikal) di sebelah kanan. Ketuk tombol luapan untuk melihat menu opsi, yang di tahap ini hanya memiliki satu menu opsi, Settings.
  2. Periksa file AndroidManifest.xml. Aktivitas .MainActivity disetel untuk menggunakan tema NoActionBar:

    android:theme="@style/AppTheme.NoActionBar"
    

    Tema NoActionBar didefinisikan di file styles.xml (luaskan expand app > res >values > styles.xml untuk melihatnya). Gaya dicakup di pelajaran lainnya, tetapi Anda bisa melihat bahwa tema NoActionBar menyetel atribut windowActionBar ke false (tanpa bilah tindakan jendela) dan atribut windowNoTitle ke true (tanpa judul).

  3. Lihat MainActivitMainActivity yang memperluas AppCompatActivity dan dimulai dengan metode onCreate():
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ...

1.2 Menambahkan lebih banyak item menu ke menu opsi

Anda akan menambahkan item menu berikut ke menu opsi aplikasi Droid Cafe:

  • Order: Masuk ke layar Order Activity untuk melihat pesanan makanan.
  • Status: Memeriksa status pesanan makanan.
  • Favorites: Menampilkan makanan favorit.
  • Contact: Menghubungi restoran. Karena Anda tidak memerlukan item Settings yang ada, anda akan mengubah Settings ke Contact.
  • Lihat menu_main.xml (luaskan res > menu di tampilan Project). Ini mendefinisikan item menu dengan <item> </item> di dalam <menu> </menu>block. Satu-satunya item menu yang tersedia dari template adalah `action_settings’ (pilihan Settings) yang didefinisikan sebagai:

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />

    Ubah atribut item action_settings berikut untuk membuatnya sebagai item action_contact (jangan ubah atribut android:orderInCategory yang sudah ada):

    Atribut Nilai
    android:id “@+id/action_contact”
    android:title “Contact”
    app:showAsAction “never”
  1. Ekstrak string "Contact" yang di-hardcode ke dalam sumber daya string action_contact.
  2. Tambahkan item menu baru menggunakan blok <item> </item> di dalam <menu> </menu>, dan berikan atribut berikut ke item:
    Atribut Nilai
    android:id “@+id/action_order”
    android:orderInCategory “10”
    android:title “Order”
    app:showAsAction “never”
  3. Ekstrak string "Order" yang di-hardcode ke dalam sumber daya string action_order.
  4. Tambahkan dua item menu lagi dengan cara yang sama dengan atribut berikut:
    Atribut Item Status Nilai
    android:id “@+id/action_status”
    android:orderInCategory “20”
    android:title “Status”
    app:showAsAction “never”
    Atribut Item Favorit Nilai
    android:id “@+id/action_favorites”
    android:orderInCategory “40”
    android:title “Favorites”
    app:showAsAction “never”
  5. Ekstrak "Status" ke dalam sumber daya action_status dan "Favorites" ke dalam sumber daya action_favorites.
  6. Anda akan menampilkan pesan toast dengan pesan tindakan bergantung pada item menu apa yang dipilih pengguna. Tambahkan nama dan nilai string berikut di strings.xml untuk pesan ini:
    <string name="action_order_message">You selected Order.</string>
    <string name="action_status_message">You selected Status.</string>
    <string name="action_favorites_message">You selected Favorites.</string>
    <string name="action_contact_message">You selected Contact.</string>
  7. Buka MainActivity dan ubah pernyataan if di metode onOptionsItemSelected() dengan mengganti id action_settings dengan id action_order baru:
    if (id == R.id.action_order)
  8. Jalankan aplikasi dan ketuk ikon luapan tindakan, yang ditampilkan di sebelah kiri gambar di bawah ini, untuk melihat menu opsi, yang ditampilkan di sebelah kanan gambar di bawah ini. Anda akan segera menambahkan callback untuk merespons item yang dipilih dari menu ini.

Tugas 2. Menambahkan ikon untuk item menu

  1. Luaskan res di tampilan Project, dan klik kanan (atau Kontrol-klik) drawable.
  2. Pilih New > Image Asset. Dialog Configure Image Asset akan muncul.
  3. Pilih Action Bar and Tab Items di menu tarik-turun.
  4. Ubah ic_action_name ke ic_order_white (untuk tindakan Order). Layar Configure Image Asset akan tampak seperti berikut (lihat Ikon Create App dengan Image Asset Studio untuk deskripsi selengkapnya.)

  1. Klik gambar clipart (logo Android di sebelah “Clipart”) untuk memilih gambar clipart sebagai ikon. Laman ikon akan muncul. Klik ikon yang ingin Anda gunakan untuk tindakan Order (misalnya, ikon keranjang belanja mungkin sesuai).
  2. Pilih HOLO_DARK dari menu tarik-turun Theme. Ini akan menyetel ikon menjadi putih dengan latar belakang berwarna gelap (atau hitam). Klik Next.
  3. Klik Finish, dalam dialog Confirm Icon Path.
  4. Ulang langkah-langkah di atas untuk ikon Status dan Favorites, dan beri nama masing-masing ic_status_white dan ic_favorites_white.
  5. Buka menu_main.xml lagi dan tambahkan atribut berikut ke item OrderStatus, dan Favorites sehingga dua item pertama (Order dan Status) selalu muncul, dan item Favorites hanya muncul jika terdapat ruang untuknya:
    Atribut Item Order Nilai Lama Nilai Baru
    android:icon “@drawable/ic_order_white”
    app:showAsAction “never” “always”
    Atribut Item Status Nilai Lama Nilai Baru
    android:icon “@drawable/ic_status_white”
    app:showAsAction “never” “always”
    Atribut Item Favorit Nilai Lama Nilai Baru
    android:icon “@drawable/ic_favorites_white”
    app:showAsAction “never” “ifRoom”

  6. Putar perangkat Anda ke orientasi horizontal, atau jika Anda menjalankan emulator, klik ikon Rotete Left atau Rotate Right untuk memutar layar ke orientasi horizontal. Anda seharusnya melihat ketiga ikon di bilah aplikasi untuk OrderStatus, dan Favorites.

Tugas 3. Menangani item menu yang dipilih

3.1 Buat metode untuk menampilkan pilihan menu

  1. Buka MainActivity.
  2. Jika Anda belum menambahkan metode berikut (di pelajaran sebelumnya) untuk menampilkan pesan toast, tambahkan sekarang:
public void displayToast(String message) {
   Toast.makeText(getApplicationContext(), message,
                          Toast.LENGTH_SHORT).show();
}

Metode displayToast() mengambil message dari string yang sesuai (misalnya action_contact_message).

3.2 Gunakan handler kejadian onOptionsItemSelected

Temukan metode onOptionsItemSelected(). Pernyataan if di metode yang disediakan oleh template ini, menentukan apakah item menu tertentu diklik, menggunakan id menu item (action_order di contoh berikut):

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_order) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

Ganti pernyataan if dan penetapannya ke id dengan blok switch caseberikut yang menyetel message yang sesuai berdasarkan id item menu:

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_order:
            displayToast(getString(R.string.action_order_message));
            return true;
        case R.id.action_status:
            displayToast(getString(R.string.action_status_message));
            return true;
        case R.id.action_favorites:
            displayToast(getString(R.string.action_favorites_message));
            return true;
        case R.id.action_contact:
            displayToast(getString(R.string.action_contact_message));
            return true;
        default:
            // Do nothing
    }
    return super.onOptionsItemSelected(item);
  }

Jalankan aplikasi. Anda sekarang seharusnya melihat pesan toast berbeda di layar, seperti yang ditampilkan di sebelah kanan gambar di bawah, berdasarkan item menu mana yang Anda pilih.

Leave a Reply

Your email address will not be published. Required fields are marked *