Apa itu Action Bar? Action Bar adalah sebuah bar yang bisa kita gunakan sebagai tempat meletakkan menu – menu action untuk aplikasi kita. Action Bar ini berada di bagian atas aplikasi Android. Dengan kita menempatkan menu – menu aplikasi pada Action Bar, maka kita bisa memudahkan pengguna dalam navigasi di setiap halaman / activity dari aplikasi. Secara default pada kebanyakan basic form, Action Bar menampilkan title dari Activity dan app icon.
Pada tutorial ini kita akan membahas tentang:
1.Mensetting Action Bar
2.Menambahkan menu Action / menu Button
3.Styling Action Bar
4.Overlaying Action Bar
Pada tutorial sebelumnya (Interaktif Hello World Application) kita membuat beberapa button pada halaman aplikasi. Button tersebut bila di click maka akan membawa kita pada activity lain / halaman lain. Nah, sekarang, kita akan mencoba menempatkan button – button yang sebelumnya berada pada halaman aplikasi tersebut ke dalam Action Bar.
Ada tiga (3) buah button yang akan kita tambahkan kedalam Action Bar yaitu About, Contact, Help.
Mari kita bahas bagaimana cara melakukannya.
Untuk bisa menggunakan Action Bar, aplikasi kita harus menggunakan App Theme yang mendukung Action Bar. Nah, penggunaan app theme ini pun tergantung dari versi terendah Android yang kita gunakan.
Berikut kami sampaikan caranya sesuai dengan versi terendah Android yang disuport:
Dengan adanya minSdkVersion=”11” itulah secara otomatis akan menampilkan Action Bar anda dengan catatan anda menggunakan Theme.Holo. Bila anda menggunakan Theme buatan sendiri pastikan bahwa Theme.Holo merupakan parent dari Theme pribadi anda.
Nah, ada beberapa kode extra yang perlu diperhatikan, tapi jangan khawatir, SEBETULNYA, saat awal kita membuat project Eclipse sudah otomatis men-generated kode – nya untuk kita.
Kode – kode apa sajakah yang perlu mendapatkan perhatian?
a.Android Support V7 Library
Nah, anda pasti sudah tahu, bila kita membuat sebuah aplikasi dengan minSDK dibawah 3.0 maka akan muncul sebuah library pada project kita yaitu appcompat_v7.
Tetapi bila anda ingin menggunakan atau menginstall library ini secara manual, anda bisa membaca appcompat_v7 setup di sini http://developer.android.com/tools/support-library/setup.html
Lihat gambar 1:
b.Extends ActionbarActivity class
Pastikan bahwa Activity anda meng-extends ActionbarActivity:
Bila anda menggunakan Eclipse, maka kode di atas sudah otomatis di-generate / dibuatkan otomatis untuk kita.
c.Gunakan Theme.AppCompat pada elemen <application> atau elemen <activity> pada file .manifest.
Bila anda menggunakan Theme buatan sendiri, pastikan bahwa Theme yang anda buat tersebut menggunakan Theme.AppCompat sebagai parent nya.
d.Jangan lupa setting minSdkVersion ke API 7
Nah, mudah bukan,,,, ingat semua settingan ini sebetulnya sudah secara otomatis di-generate oleh Eclipse.
Yuk, lanjut….
Eclipse secara otomatis akan meletakkan file untuk Action Bar dalam file Project/res/menu/main.xml
Lihat gambar 2:
Silahkan anda buka file main.xml tersebut, nantinya Eclipse akan menyuguhkan kepada anda halaman User Interface (tab layout) dan halaman kode xml. Halaman user interface (tab layout) akan sangat memudahkan anda dalam menambahkan setiap item menu beserta properties pendukungnya. Tetapi bila anda lebih tertarik edit kode secara manual, anda bisa melihat bagian tab kode xml.
Pada tutorial ini kita akan menambahkan dua (2) buah buttons saja yaitu button About dan button Contact.
Lihat gambar 3:
Setiap buttons memiliki properties sendiri – sendiri seperti Id , Title, Icon dan lain sebagainya, silahkan anda bisa bereksplorasi.
Contoh kode xml yang sudah saya generate dengan edit layout adalah seperti berikut ini:
Lihat gambar 4:
Anda bisa lihat, pada screenshot code di atas, bagian properties android:showAsAction terlihat bergaris kuning. Properties showAsAction sebetulnya hanya tersedia untuk android API 11 (Android 3.0) keatas. Tapi bila anda ingin supaya Android yang anda support misalnya 2.1 (API 7) bisa menambahkan nama aplikasi sebelum properties.
Lihat gambar 5:
Perlu diperhatikan bahwa di atas hanyalah sebagian kecil properties yang digunakan, masih banyak lagi properties yang bisa anda coba di bagian tab layout.
Action button akan muncul bila tersedia space pada Action Bar. Jadi bila pada Action Bar tidak terdapat ruang kosong maka Action Button akan tersembunyi. Pengaturan juga bisa kita lakukan pada properties ‘showAsAction’, yaitu :
never, untuk selalu menyembunyikan Action Button,
Always, untuk selalu menampilkan,
ifRoom digunakan untuk menampilkan bila tersediam room (ruangan) pada Action Bar.
Setelah kita membuat Action buttonnya, sekarang saatnya kita tambahkan Action button yang kita buat tadi ke dalam Action Bar.
Bagaimana caranya?
Sama seperti di atas, sebetulnya bila kita menggunakan Eclipse maka secara otomatis akan men-generate kode untuk keperluan ini.
Perhatikan file MainActivity.java dalam folder source.
Class MainActivity.java ini memiliki tiga (3) buah method yaitu:
protected void onCreate(Bundle savedInstanceState) {
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
}
Method onCreate() digunakan untuk membuat/meloading Activity layout,
Method onCreateOptionsMenu() digunakan untuk membuat/meloading ActionsMenu
Method onOptionsItemSelected() digunakan untuk memberikan event atau method terhadap setiap item saat sedang diclick.
Mudah dipahami bukan? Semua ini sudah digenerate secara otomatis oleh Eclipse. Kita tinggal memodifikasi sedikit sesuai dengan kebutuhan kita.
Nah, untuk meletakkan menu – menu yang kita buat tadi kedalam Action Bar kita perlu menggunakan method onCreateOptionsMenu() seperti pada kode berikut ini:
Lihat gambar 6:
Keterangan:
Class MenuInflater:
(Inflater , Inflation, Inflate, red:Inflasi) Class ini digunakan untuk meng-inisialisasi file menu xml kedalam menu objects. Untuk performance, MenuInflater tidak menggunakan file xml saat runtime melainkan menggunakan pre-processing xml file yang sudah diproses saat build time. Maka dari itu, class ini hanya bisa bekerja dengan file resourse yang sudah tercompile (R.fileYangSudahTercompile) . Pada contoh adalah R.menu.main .
Pemberian event / action saat button diclick bisa kita lakukan pada method onOptionsItemSelected(MenuItem item).
Kita bisa melakukannya seperti pada kode berikut ini:
Lihat gambar 7:
Anda bisa lihat, kita menggunakan switch dan menyeleksi masing – masing dari dari file yang sudah tercompile (R). Masing – masing case kita mengeksekusi method showAbout() dan showContact().
Mudah bukan?
Kita akan mencoba menambahkan Activity lain pada project. Tadi kita sudah membuat Action Button untuk ‘About’ dan ‘Contact’, saya akan mencoba membuat Activity untuk salah satunya saja, yaitu untuk ‘About’.
Buat Activity dengan: File -> New -> Other -> Android Activity
Lihat gambar 8:
Dari popup yang muncul, jangan lupa untuk men-setting ‘hierarchichal Parent’ ke MainActivity. Dengan pensettingan ini, maka nantinya Eclipse akan membuat kode pada .manifest yang otomatis menampilkan ‘Up Button’.
Lihat gambar 9:
Saat kita ke Activity lain / ke halaman lain pada aplikasi, akan lebih baik bila kita menambahkan sebuah ‘Up Button’ sehingga nanti terdapat sebuah link untuk kembali ( back ) ke halaman sebelumnya.
Dalam default Android design, ‘Up Button’ ini berupa icon panah ke kiri.
Nah, bagaimana cara menambahkan ‘Up Button’ ini?
Secara default, bila anda menggunakan Theme android, Eclipse akan secara otomatis membuatkannya untuk kita.
Bila kita menggunakan Android 4.1 / API 16 ke atas, atau bila kita menggunakan class ActionbarActivity dari Support Library, untuk menambahkan ‘Up Button’ kita bisa melakukannya pada .manifest file.
Sekali lagi, saat kita membuat Activity baru, maka Eclipse akan menambahkan settingan pada .manifest file secara otomatis.
Saat kita selesai membuat ‘AboutActivity’ tadi, sekarang perhatikan file .manifest. Maka disana akan ditambahkan kode seperti berikut ini:
Lihat gambar 10:
Nah, perhatikan, kita sudah memiliki dua (2) buah Activity, yaitu ‘.MainActivity’ dan ‘.AboutActivity’.
Pada ‘AboutActivity’ ber-parent pada ‘.MainActivity’, nah, dengan menambahkan kode seperti diatas maka secara otomatis akan menampilkan sebuah ‘Up Button’ yang bila diclick akan ke-parent atau ke MainActivity yang merupakan Home Screen nya.
Pada kode di atas, terdapat <meta-data , nah kode di atas digunakan bila kita menggunakan support library appcompat.
Cukupkah hanya sampai di sini? Belum, kita harus memanggil method setDisplayHomeAsUpEnabled(); pada Activity kita dalam hal ini adalah ‘AboutActivity’.
Method ini bisa kita panggil saat ‘.AboutActivity’ terloading saat method onCreate() dipanggil.
Lihat gambar 11:
Setelah anda menambahkan Action Button, maka saat debug, Action Button tersebut sudah muncul di AVD (Android Virtual Device).
Oke, mudah bukan membuat Action Bar, anda bisa membuat style untuk Action Bar anda sesuai selera. Banyak sekali model Action Bar yang bisa anda browsing di internet.
Demikian tutorial singkat tentang Action Bar, semoga bermanfaat,
salam.
1.Mensetting Action Bar
2.Menambahkan menu Action / menu Button
3.Styling Action Bar
4.Overlaying Action Bar
Pada tutorial sebelumnya (Interaktif Hello World Application) kita membuat beberapa button pada halaman aplikasi. Button tersebut bila di click maka akan membawa kita pada activity lain / halaman lain. Nah, sekarang, kita akan mencoba menempatkan button – button yang sebelumnya berada pada halaman aplikasi tersebut ke dalam Action Bar.
Ada tiga (3) buah button yang akan kita tambahkan kedalam Action Bar yaitu About, Contact, Help.
Mari kita bahas bagaimana cara melakukannya.
1.Mensetting Action Bar
Untuk bisa menggunakan Action Bar, aplikasi kita harus menggunakan App Theme yang mendukung Action Bar. Nah, penggunaan app theme ini pun tergantung dari versi terendah Android yang kita gunakan.
Berikut kami sampaikan caranya sesuai dengan versi terendah Android yang disuport:
Android 3.0 (API 11) ke atas
Untuk anda yang membuat aplikasi dengan target minSDK 11, sebetulnya, Action Bar sudah ter-insert pada Theme default yang anda gunakan (Theme.Holo) serta turunannya. Bila anda menggunakan IDE untuk Android, Eclipse ADT misalnya (seperti yang saya gunakan) maka Eclipse akan otomatis membuatkannya untuk anda. Bila tidak, pastikan anda mengecheck file .manifest anda dan pastikan telah terdapat kode xml seperti berikut ini:
<manifest . . . >
<uses-sdk android:minSdkVersion="11". . . . />
. . .
</manifest>
Dengan adanya minSdkVersion=”11” itulah secara otomatis akan menampilkan Action Bar anda dengan catatan anda menggunakan Theme.Holo. Bila anda menggunakan Theme buatan sendiri pastikan bahwa Theme.Holo merupakan parent dari Theme pribadi anda.
Android 2.1 (API 7) ke atas
Lalu bagaimana bila kita menargetkan minimal Android 2.1 atau API 7 agar tetap men-suport Action Bar di App kita?Nah, ada beberapa kode extra yang perlu diperhatikan, tapi jangan khawatir, SEBETULNYA, saat awal kita membuat project Eclipse sudah otomatis men-generated kode – nya untuk kita.
Kode – kode apa sajakah yang perlu mendapatkan perhatian?
a.Android Support V7 Library
Nah, anda pasti sudah tahu, bila kita membuat sebuah aplikasi dengan minSDK dibawah 3.0 maka akan muncul sebuah library pada project kita yaitu appcompat_v7.
Tetapi bila anda ingin menggunakan atau menginstall library ini secara manual, anda bisa membaca appcompat_v7 setup di sini http://developer.android.com/tools/support-library/setup.html
Lihat gambar 1:
b.Extends ActionbarActivity class
Pastikan bahwa Activity anda meng-extends ActionbarActivity:
public class MainActivity extends ActionBarActivity { ... }
Bila anda menggunakan Eclipse, maka kode di atas sudah otomatis di-generate / dibuatkan otomatis untuk kita.
c.Gunakan Theme.AppCompat pada elemen <application> atau elemen <activity> pada file .manifest.
<activity android:theme="@style/Theme.AppCompat.Light" ... >
Bila anda menggunakan Theme buatan sendiri, pastikan bahwa Theme yang anda buat tersebut menggunakan Theme.AppCompat sebagai parent nya.
d.Jangan lupa setting minSdkVersion ke API 7
<manifest ... >
<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="19" />
...
</manifest>
Nah, mudah bukan,,,, ingat semua settingan ini sebetulnya sudah secara otomatis di-generate oleh Eclipse.
Yuk, lanjut….
2.Menambahkan menu Action / menu Button
Eclipse secara otomatis akan meletakkan file untuk Action Bar dalam file Project/res/menu/main.xml
Lihat gambar 2:
Silahkan anda buka file main.xml tersebut, nantinya Eclipse akan menyuguhkan kepada anda halaman User Interface (tab layout) dan halaman kode xml. Halaman user interface (tab layout) akan sangat memudahkan anda dalam menambahkan setiap item menu beserta properties pendukungnya. Tetapi bila anda lebih tertarik edit kode secara manual, anda bisa melihat bagian tab kode xml.
Pada tutorial ini kita akan menambahkan dua (2) buah buttons saja yaitu button About dan button Contact.
Lihat gambar 3:
Setiap buttons memiliki properties sendiri – sendiri seperti Id , Title, Icon dan lain sebagainya, silahkan anda bisa bereksplorasi.
Contoh kode xml yang sudah saya generate dengan edit layout adalah seperti berikut ini:
Lihat gambar 4:
Anda bisa lihat, pada screenshot code di atas, bagian properties android:showAsAction terlihat bergaris kuning. Properties showAsAction sebetulnya hanya tersedia untuk android API 11 (Android 3.0) keatas. Tapi bila anda ingin supaya Android yang anda support misalnya 2.1 (API 7) bisa menambahkan nama aplikasi sebelum properties.
Lihat gambar 5:
Perlu diperhatikan bahwa di atas hanyalah sebagian kecil properties yang digunakan, masih banyak lagi properties yang bisa anda coba di bagian tab layout.
Action button akan muncul bila tersedia space pada Action Bar. Jadi bila pada Action Bar tidak terdapat ruang kosong maka Action Button akan tersembunyi. Pengaturan juga bisa kita lakukan pada properties ‘showAsAction’, yaitu :
never, untuk selalu menyembunyikan Action Button,
Always, untuk selalu menampilkan,
ifRoom digunakan untuk menampilkan bila tersediam room (ruangan) pada Action Bar.
Tambahkan kedalam Action Bar
Setelah kita membuat Action buttonnya, sekarang saatnya kita tambahkan Action button yang kita buat tadi ke dalam Action Bar.
Bagaimana caranya?
Sama seperti di atas, sebetulnya bila kita menggunakan Eclipse maka secara otomatis akan men-generate kode untuk keperluan ini.
Perhatikan file MainActivity.java dalam folder source.
Class MainActivity.java ini memiliki tiga (3) buah method yaitu:
protected void onCreate(Bundle savedInstanceState) {
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
}
Method onCreate() digunakan untuk membuat/meloading Activity layout,
Method onCreateOptionsMenu() digunakan untuk membuat/meloading ActionsMenu
Method onOptionsItemSelected() digunakan untuk memberikan event atau method terhadap setiap item saat sedang diclick.
Mudah dipahami bukan? Semua ini sudah digenerate secara otomatis oleh Eclipse. Kita tinggal memodifikasi sedikit sesuai dengan kebutuhan kita.
Nah, untuk meletakkan menu – menu yang kita buat tadi kedalam Action Bar kita perlu menggunakan method onCreateOptionsMenu() seperti pada kode berikut ini:
Lihat gambar 6:
Keterangan:
Class MenuInflater:
(Inflater , Inflation, Inflate, red:Inflasi) Class ini digunakan untuk meng-inisialisasi file menu xml kedalam menu objects. Untuk performance, MenuInflater tidak menggunakan file xml saat runtime melainkan menggunakan pre-processing xml file yang sudah diproses saat build time. Maka dari itu, class ini hanya bisa bekerja dengan file resourse yang sudah tercompile (R.fileYangSudahTercompile) . Pada contoh adalah R.menu.main .
Mari kita berikan Event / Action untuk button
Pemberian event / action saat button diclick bisa kita lakukan pada method onOptionsItemSelected(MenuItem item).
Kita bisa melakukannya seperti pada kode berikut ini:
Lihat gambar 7:
Anda bisa lihat, kita menggunakan switch dan menyeleksi masing – masing dari dari file yang sudah tercompile (R). Masing – masing case kita mengeksekusi method showAbout() dan showContact().
Mudah bukan?
Menambahkan Activity lain
Kita akan mencoba menambahkan Activity lain pada project. Tadi kita sudah membuat Action Button untuk ‘About’ dan ‘Contact’, saya akan mencoba membuat Activity untuk salah satunya saja, yaitu untuk ‘About’.
Buat Activity dengan: File -> New -> Other -> Android Activity
Lihat gambar 8:
Dari popup yang muncul, jangan lupa untuk men-setting ‘hierarchichal Parent’ ke MainActivity. Dengan pensettingan ini, maka nantinya Eclipse akan membuat kode pada .manifest yang otomatis menampilkan ‘Up Button’.
Lihat gambar 9:
Menambahkan Up Button
Saat kita ke Activity lain / ke halaman lain pada aplikasi, akan lebih baik bila kita menambahkan sebuah ‘Up Button’ sehingga nanti terdapat sebuah link untuk kembali ( back ) ke halaman sebelumnya.
Dalam default Android design, ‘Up Button’ ini berupa icon panah ke kiri.
Nah, bagaimana cara menambahkan ‘Up Button’ ini?
Secara default, bila anda menggunakan Theme android, Eclipse akan secara otomatis membuatkannya untuk kita.
Bila kita menggunakan Android 4.1 / API 16 ke atas, atau bila kita menggunakan class ActionbarActivity dari Support Library, untuk menambahkan ‘Up Button’ kita bisa melakukannya pada .manifest file.
Sekali lagi, saat kita membuat Activity baru, maka Eclipse akan menambahkan settingan pada .manifest file secara otomatis.
Saat kita selesai membuat ‘AboutActivity’ tadi, sekarang perhatikan file .manifest. Maka disana akan ditambahkan kode seperti berikut ini:
Lihat gambar 10:
Nah, perhatikan, kita sudah memiliki dua (2) buah Activity, yaitu ‘.MainActivity’ dan ‘.AboutActivity’.
Pada ‘AboutActivity’ ber-parent pada ‘.MainActivity’, nah, dengan menambahkan kode seperti diatas maka secara otomatis akan menampilkan sebuah ‘Up Button’ yang bila diclick akan ke-parent atau ke MainActivity yang merupakan Home Screen nya.
Pada kode di atas, terdapat <meta-data , nah kode di atas digunakan bila kita menggunakan support library appcompat.
Cukupkah hanya sampai di sini? Belum, kita harus memanggil method setDisplayHomeAsUpEnabled(); pada Activity kita dalam hal ini adalah ‘AboutActivity’.
Method ini bisa kita panggil saat ‘.AboutActivity’ terloading saat method onCreate() dipanggil.
Lihat gambar 11:
Setelah anda menambahkan Action Button, maka saat debug, Action Button tersebut sudah muncul di AVD (Android Virtual Device).
Oke, mudah bukan membuat Action Bar, anda bisa membuat style untuk Action Bar anda sesuai selera. Banyak sekali model Action Bar yang bisa anda browsing di internet.
Demikian tutorial singkat tentang Action Bar, semoga bermanfaat,
salam.