Tugas 1: Menambahkan item ke menu opsi opsi
Buka proyek Droid Cafe dari praktik sebelumnya. Proyek menyertakan file layout berikut di folder res > layout:
-
activity_main.xml: Layout utama untuk MainActivity, layar pertama yang dilihat pengguna.
-
content_main.xml: Layout untuk konten layar MainActivity, yang (seperti akan segera Anda lihat) disertakan di dalam activity_main.xml**.
-
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.
- 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.
-
Periksa file AndroidManifest.xml. Aktivitas
.MainActivity
disetel untuk menggunakan temaNoActionBar
: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 temaNoActionBar
menyetel atributwindowActionBar
kefalse
(tanpa bilah tindakan jendela) dan atributwindowNoTitle
ketrue
(tanpa judul). - Lihat MainActivitMainActivity yang memperluas
AppCompatActivity
dan dimulai dengan metodeonCreate()
:@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 itemaction_contact
(jangan ubah atributandroid:orderInCategory
yang sudah ada):Atribut Nilai android:id “@+id/action_contact” android:title “Contact” app:showAsAction “never”
- Ekstrak string
"Contact"
yang di-hardcode ke dalam sumber daya stringaction_contact
. - 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” - Ekstrak string
"Order"
yang di-hardcode ke dalam sumber daya stringaction_order
. - 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” - Ekstrak
"Status"
ke dalam sumber dayaaction_status
dan"Favorites"
ke dalam sumber dayaaction_favorites
. - 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>
- Buka MainActivity dan ubah pernyataan
if
di metodeonOptionsItemSelected()
dengan mengganti idaction_settings
dengan idaction_order
baru:if (id == R.id.action_order)
- 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
- Luaskan res di tampilan Project, dan klik kanan (atau Kontrol-klik) drawable.
- Pilih New > Image Asset. Dialog Configure Image Asset akan muncul.
- Pilih Action Bar and Tab Items di menu tarik-turun.
- 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.)
- 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).
- Pilih HOLO_DARK dari menu tarik-turun Theme. Ini akan menyetel ikon menjadi putih dengan latar belakang berwarna gelap (atau hitam). Klik Next.
- Klik Finish, dalam dialog Confirm Icon Path.
- Ulang langkah-langkah di atas untuk ikon Status dan Favorites, dan beri nama masing-masing ic_status_white dan ic_favorites_white.
- Buka menu_main.xml lagi dan tambahkan atribut berikut ke item Order, Status, 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” - 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 Order, Status, dan Favorites.
Tugas 3. Menangani item menu yang dipilih
3.1 Buat metode untuk menampilkan pilihan menu
- Buka MainActivity.
- 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 case
berikut 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.