Tutorial Membuat Toolbar Dengan Android Studio
Toolbar Android
Halo gan, kali ini saya akan memberikan Tutorial Membuat Tutorial Membuat Toolbar Menggunakan Android Studio, Toolbar adalah View yang biasanya terdapat pada bagian atas dari suatu aplikasi, Toolbar merupakan penerus dari Action Bar yang sudah tertanam pada default tema saat kita akan membuat aplikasi AndroidApa itu Toolbar
Toolbar Menurut Web Developer Android
A standard toolbar for use within application content.
A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method.
Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:
In modern Android UIs developers should lean more on a visually distinct color scheme for toolbars than on their application icon. The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.
- A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app's choosing. This button should always be used to access other navigational destinations within the container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. The navigation button is vertically aligned within the Toolbar's minimum height, if set.
- A branded logo image. This may extend to the height of the bar and can be arbitrarily wide.
- A title and subtitle. The title should be a signpost for the Toolbar's current position in the navigation hierarchy and the content contained there. The subtitle, if present should indicate any extended information about the current content. If an app uses a logo image it should strongly consider omitting a title and subtitle.
- One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
- An action menu. The menu of actions will pin to the end of the Toolbar offering a few frequent, important or typical actions along with an optional overflow menu for additional actions. Action buttons are vertically aligned within the Toolbar's minimum height, if set.
Toolbar salah satu komponen Material Design yang di sediakan google yang terdapat pada Android Support Library AppCompat , Toolbar sendiri seperti yang yang saya sebutkan di atas adalah penerus dari Action Bar yang dari awal digunakan sampai Toolbar sendiri dibuat, Sebenarnya Toolbar sendiri sudah default terinclude seperti layaknya ActionBar tapi sudah tidak lagi di support oleh Google yang artinya jika dipaksakan untuk memakainya Aplikasi agan tidak agan berjalan sempurna pada versi Android di API 19 keatas, oke gan langsung saja kita membuat Project baru untuk mengimplementasikan Toolbar
Membuat Project
kali ini saya akan membuat project dengan properties sebagai berikutNama Aplikasi : Tutorial Membuat Toolbar
Nama Package Aplikasi : com.jonesrandom.tutorialmembuattoolbar
Nah setelah agan selesai membuat project agan terlebih dahulu mengecek build.gradle agan, nah didalam Android Studio agan terdapat 2 file build.gradle, nanti yang agan cek build.gradle yang disampingnya tertulis (Module : App) atau agan bisa melihat gambar di bawah ini
 |
| build.gradle |
build.gradle sebenarnya saat kita membuat project baru dengan Android Studio sudah otomastis di tambahkan Kecuali agan membuat Project dengan IDE lain seperti Eclipse atau AIDE yang biasa di gunakan membuat project lewat Samrtphone langsung, jika tidak terdapat seperti kode diatas Toolbar tidak dapat digunakan,
Selain Mengecek build.gradle, agan juga harus merubah thema default Aplikasi agan pada file styles.xml yang terdapat pada folder values,pda file styles.xml kita akan menghilangkan ActionBar bawaan thema dari AppCompat yang semula seperti kode di bawah ini
styles.xml
Menjadi seperti ini
styles.xml
agan bisa perhatikan pada bagian parent style Apptheme kalo saya sudah merubah bagian tersebut agar ActionBar hilang, oke gan setelah agan merasa sudah selesai kita akan ke langkah selanjunya
Membuat file xml Baru untuk Toolbar
sebelum merubah file activity_main.xml & MainActivity.java kita akan membuat file xml baru yang didalamnya terdapat Toolbar, sebenarnya Toolbar bisa langsung di letakan pada activity_main.xml tapi akan sangat merepotkan jika agan mempunyai banyak layout dan harus menambahkan kembali Toolbar di tiap tiap layout, dengan cara ini agan hanya perlu meng include kan file xml yang akan kita buat ke dalam activity_main.xml yang hanya 1 baris kode :D selain itu pada bagian acitivty_main agan akan terlihat sedikit rapi karna tidak terlalu banyak baris kode dalam satu file xml.Oke langsung saja agan buat layout baru dengan klik kanan pada folder layout kemudian pilih bagian Layout Resources File atau agan bisa melihat gambar di bawah ini
 |
| membuat file xml baru pada android studio |
 |
| membuat file xml baru pada android studio |
my_toolbar.xml
bisa agan liat kode di atas saya sudah menambah Toolbar dan merubah layout_height dari root element menjadi wrap_content
Merubah layout activity_main.xml
oke gan selanjutnya kita akan merubah layout activity_main.xml, nah seperti kata saya di atas kita hanya perlu menginclude xml yang tadi dibuat yang didalam sudah terdapat Toolbar :D nah coba agan bayangkan kalo kita akan menambahkan Toolbar ke dalam 5 layout ? pastinya akan akan memakan waktu untuk menulis kembali, bisa saja menggunakan copy paste tapi tetap saja activity_main agan akan terasa kurang nyaman dilihat karna akan terlalu banyak baris kode :D oke gan langsung saja buka activity_main.xml agan kemudian rubah seperti dibawah iniactivity_main.xml
nah bisa agan lihat sangat simple kan ? :D selain itu saya menghapus margin pada root element layout
Merubah class MainActivity.java
pada bagian ini kita agan hanya akan membuat variabel Toolbar kemudian menginisialisasinya dengan view & mengatur Toolbar kedalam support action bar, knapa mesti di atur ke dalam support action bar ? karna pengalaman saya jika tidak mengatur ke dalam action bar saat agan membuat options menu di toolbar tersebut tidak akan muncul.. oke langsung saja buka MainActivity.java agan kemudian edit seperti berikutMainActivity.java
setelah agan selesai agan bisa langsung menjalankan Aplikasi ke dalam Emulator/Smartphone agan untuk menguji apakah Toolbar berhasil dijalankan & tidak terjadi error, jika tidak ada error maka akan tampil seperti gambar berikut
nah berikutnya kita akan merubah Tittle, Menambah Subtittle, Menambah Icon, & Mengaktifkan home button pada Toolbar :D oke gan buka kembali MainActivity.java dan Tambahkan baris kode seperti berikut
MainActivity.java
setelah agan menambahkan beberapa baris kode seperti di atas agan coba jalankan kembali Aplikasi agan, jika tidak ada error maka tampilannya akan seperti gambar berikut
Oke gan :D sekian Tutorial dari saya Tentang Tutorial Membuat Toolbar Dengan Android Studio ,jika ada yang agan kurang pahami dari tutorial di atas agan bisa menyematkan ke dalam kolom komentar apa yang kurang pahami, atau agan kurang paham karna kata kata saya , saya mohon maaf karna saya tidak bisa merangkai kata kata makanya saya sampai sekarang saya Alhamdulillah Jomblo.
Tutorial Toolbar Lainnya Gan !! Tutorial Menambahkan OptionMenu Pada Toolbar Android
oke gan sekian dari saya :D Wassalam
Comments
Post a Comment