How to Create Navigation Drawer in Android Studio TUTORIAL

Tim desain material di Google mendefinisikan fungsionalitas navigasi drawer di Android sebagai berikut:

Navigasi drawer meluncur dari kiri dan berisi tujuan navigasi untuk aplikasi anda.

Contoh aplikasi Android populer yang menerapkan navigasi drawer adalah aplikasi kotak masuk dari Google, yang menggunakan laci navigasi untuk menavigasi ke berbagai bagian aplikasi. Anda dapat memeriksanya sendiri dengan mendownload aplikasi Kotak Masuk dari toko Google Play, jika Anda belum memilikinya di perangkat. Tangkapan layar di bawah menunjukkan Kotak Masuk dengan laci navigasi terbuka.

Pengguna dapat melihat navigasi drawer saat menggesekkan jari dari tepi kiri aktivitas. Mereka juga dapat menemukannya dari aktivitas rumah (tingkat atas aplikasi), dengan mengetuk ikon aplikasi (juga dikenal sebagai carte "hamburger") di bilah tindakan.

Perhatikan bahwa jika anda memiliki banyak tujuan berbeda (lebih dari enam, katakanlah) di aplikasi anda, disarankan agar anda menggunakan navigasi drawer.

Dalam posting ini, Anda akan belajar bagaimana untuk menampilkan item navigasi di dalam navigasi drawer di Android. Kita akan membahas bagaimana menggunakan DrawerLayout dan NavigationView API untuk melakukan tugas ini. Sebagai bonus, anda juga akan belajar cara menggunakan fitur template Android Studio untuk segera bootstrap proyek anda dengan navigasi drawer.

Contoh proyek (di Kotlin) untuk tutorial ini dapat ditemukan di repo GitHub kami sehingga anda dapat dengan mudah mengikutinya.

Prasyarat

Untuk dapat mengikuti tutorial ini, anda akan memerlukan:

• Android Studio iii.0 atau lebih tinggi
• Kotlin plugin one.i.51 atau lebih tinggi

ane. Buat Sebuah Proyek Android Studio

Jalankan Android Studio dan buat proyek baru (anda bisa menamainya NavigationDrawerDemo) dengan aktivitas kosong yang disebut MainActivity. Pastikan juga cek kotak Include Kotlin support.

two. Menambahkan DrawerLayout dan NavigationView

Untuk mulai menggunakan DrawerLayout dan NavigationView dalam proyek anda, anda harus mengimpor dukungan desain dan juga dukungan Android artefak. Jadi menambahkan ini ke modul anda build.gradle file untuk mengimpornya.

dependencies {     implementation 'com.android.back up:design:27.0.ii'     implementation 'com.android.back up:support-v4:27.0.ii' }

Juga, termasuk DrawerLayout widget dan juga NavigationView widget di file res/layout/activlty_main.xml anda.

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout         xmlns:android="https://schemas.android.com/apk/res/android"         xmlns:app="http://schemas.android.com/apk/res-auto"         xmlns:tools="http://schemas.android.com/tools"         android:id="@+id/drawer_layout"         android:layout_width="match_parent"         android:layout_height="match_parent"         tools:openDrawer="outset">      <include             layout="@layout/app_bar_main"             android:layout_width="match_parent"             android:layout_height="match_parent" />      <android.support.blueprint.widget.NavigationView             android:id="@+id/nav_view"             android:layout_width="wrap_content"             android:layout_height="match_parent"             android:layout_gravity="offset"             app:headerLayout="@layout/nav_header_main"             app:card="@bill of fare/activity_main_drawer" />  </android.support.v4.widget.DrawerLayout>

Di sini kami menciptakan sebuah widget DrawerLayout dengan id drawer_layout. Properti tools: openDrawer digunakan untuk menampilkan navigasi drawer bila tata letak XML terbuka dalam tampilan design Android Studio.

Dokumentasi resmi mengatakan hal berikut tentang DrawerLayout:

DrawerLayout berfungsi sebagai wadah superlative-level untuk konten jendela yang memungkinkan untuk pemandangan interaktif "drawer" harus ditarik keluar dari salah satu atau kedua tepi vertikal jendela.

Setelah menambahkan DrawerLayout widget, kami menyertakan sebuah layout anak yang menunjuk ke @layout/app_bar_main.

Berikut ini adalah file sumberapp_bar_main.xml saya. File ini hanya memiliki CoordinatorLayout, AppBarLayout, dan Toolbar widget.

<?xml version="i.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout         xmlns:android="http://schemas.android.com/apk/res/android"         xmlns:app="http://schemas.android.com/apk/res-car"         xmlns:tools="http://schemas.android.com/tools"         android:layout_width="match_parent"         android:layout_height="match_parent"         tools:context=".MainActivity">      <android.back up.pattern.widget.AppBarLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:fitsSystemWindows="truthful"             android:theme="@style/AppTheme.AppBarOverlay">          <android.support.v7.widget.Toolbar                 android:id="@+id/toolbar_main"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 android:background="?attr/colorPrimary"                 app:layout_scrollFlags="scroll|enterAlways"                 app:popupTheme="@manner/AppTheme.PopupOverlay" />      </android.back up.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>

Akhirnya, kita menciptakan sebuah widget NavigationView. Dokumentasi resmi mengatakan hal berikut tentang NavigationView:

NavigationView merupakan sebuah menu navigasi standar untuk aplikasi. Menu isinya dapat dihuni oleh menu file sumber.

Dalam NavigationView XML widget, Anda dapat melihat bahwa kita menambahkan atribut android: layout_gravity dengan nilai get-go. Ini digunakan untuk posisi drawer untuk keluar dari kiri atau kanan yang anda inginkan (awal atau akhir pada versi platform yang mendukung tata letak arah). Dalam kasus kami sendiri, laci akan keluar dari kiri.

Kami juga menyertakan atribut app:headerLayout yang menunjuk ke @layout/nav_header_main. Ini akan menambah View sebagai header dari menu navigasi.

Berikut adalah file sumber tata letak nav_header_main.xml saya:

<?xml version="i.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"               android:id="@+id/nav_header"               android:layout_width="match_parent"               android:layout_height="160dp"               android:background="@color/colorAccent"               android:clickable="true"               android:focusable="true"               android:foreground="?attr/selectableItemBackgroundBorderless"               android:gravity="bottom"               android:orientation="vertical"               android:padding="16dp"               android:theme="@style/ThemeOverlay.AppCompat.Dark">      <ImageView             android:id="@+id/nav_header_imageView"             android:layout_width="64dp"             android:layout_height="64dp"             android:src="@mipmap/ic_launcher" />      <TextView             android:id="@+id/nav_header_textView"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:paddingTop="16dp"             android:text="Chike Mgbemena"             android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout>

File tata letak ini hanya memiliki LinearLayout, ImageView, dan TextView.

Untuk memasukkan item carte du jour untuk navigasi drawer, kita dapat menggunakan app:bill of fare atribut dengan nilai yang menunjuk ke file sumber menu.

<android.back up.design.widget.NavigationView         app:menu="@menu/activity_main_drawer" />        

Berikut adalah file sumberres/menu/activity_main_drawer.xml menu:

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">     <group>         <particular android:id="@+id/nav_item_one"               android:icon="@drawable/ic_drafts_black_24dp"               android:title="Item 1" />         <particular android:id="@+id/nav_item_two"               android:icon="@drawable/ic_drafts_black_24dp"               android:title="Item 2" />         <particular android:id="@+id/nav_item_three"               android:icon="@drawable/ic_drafts_black_24dp"               android:title="Item 3" />     </group>      <grouping android:id="@+id/group_menu">         <item android:id="@+id/nav_item_four"               android:championship="Detail 4" />         <detail android:id="@+id/nav_item_five"               android:title="Item 5" />     </grouping>      <item android:title="Title 1">         <carte>             <detail android:id="@+id/nav_item_six"                   android:icon="@drawable/ic_drafts_black_24dp"                   android:championship="Particular half dozen" />             <item android:id="@+id/nav_item_seven"                   android:icon="@drawable/ic_drafts_black_24dp"                   android:title="Detail 7" />         </menu>     </item> </carte du jour>

Di sini kita telah mendefinisikan sebuah Carte dengan menggunakan <carte du jour> yang berfungsi sebagai wadah untuk item menu. <particular> Menciptakan MenuItem, yang mewakili sebuah item dalam menu.

Kita kemudian mendefinisikan kelompok carte du jour pertama kita menggunakan <grouping>. A <group> berfungsi sebagai wadah terlihat untuk <detail> elemen-detail card dalam kasus kami. Masing-masing elemen <item> memiliki sebuah id, sebuah ikon dan judul. Perhatikan bahwa garis horizontal akan digambar pada akhir setiap <group> bagi kita ketika ditampilkan di laci navigasi.

<item> Juga dapat berisi elemen bersarang <menu> untuk menciptakan submenu — kita telah melakukannya di <item> tadi. Perhatikan yang terakhir ini <item> memiliki properti judul.

Perhatikan bahwa saat menampilkan detail daftar navigasi dari sumber menu, kita bisa menggunakan ListView. Tapi, dengan mengonfigurasi navigasi drawer dengan card resources, kita mendapatkan styling desain material pada navigasi drawer secara costless! Jika Anda menggunakan ListView, anda harus mempertahankan daftar dan juga menaranya untuk memenuhi spesifikasi desain cloth yang direkomendasikan untuk navigasi drawer.

3. Inisialisasi Komponen

Selanjutnya, kita akan untuk menginisialisasi instance DrawerLayout dan ActionBarDrawerToggle. Inisialisasi akan terjadi di dalam onCreate() di MainActivity.kt.

import android.content.res.Configuration import android.os.Bundle import android.support.v4.widget.DrawerLayout import android.support.v7.app.ActionBarDrawerToggle import android.support.v7.app.AppCompatActivity import android.back up.v7.widget.Toolbar import android.view.MenuItem  course MainActivity : AppCompatActivity() {      private lateinit var drawer: DrawerLayout     private lateinit var toggle: ActionBarDrawerToggle      override fun onCreate(savedInstanceState: Package?) {         super.onCreate(savedInstanceState)         setContentView(R.layout.activity_main)          val toolbar: Toolbar = findViewById(R.id.toolbar_main)         setSupportActionBar(toolbar)          drawer = findViewById(R.id.drawer_layout)          toggle = ActionBarDrawerToggle(this, drawer, toolbar, R.cord.navigation_drawer_open, R.cord.navigation_drawer_close)         drawer.addDrawerListener(toggle)         supportActionBar?.setDisplayHomeAsUpEnabled(true)         supportActionBar?.setHomeButtonEnabled(true)     }      // ...  }

ActionBarDrawerToggle menyiapkan ikon aplikasi yang terletak di sebelah kiri bilah tindakan atau bilah alat untuk membuka dan menutup navigasi drawer. Agar bisa membuat instance dari ActionBarDrawerToggle, kita harus menyediakan parameter berikut:

• konteks orangtua — misalnya, Activeness anda menggunakan this, sementara dalam Fragment anda memanggil getActivity()
• sebuah instance dari widget DrawerLayout untuk terhubung ke aktivitasActionBar
• ikon untuk menempatkan di atas ikon app untuk menunjukkan bahwa ada beralih
• sumber string untuk operasi terbuka dan tutup masing-masing (untuk aksesibilitas)

Kami meminta metode addDrawerListener() pada DrawerLayout untuk menghubungkan ActionBarDrawerToggle dengan DrawerLayout.

Perhatikan bahwa kita juga mengaktifkan ikon apl melalui setHomeButtonEnabled() dan mengaktifkannya untuk navigasi "up" melalui setDisplayHomeAsUpEnabled().

Kami kemudian meneruskan metode callback aktivitas onPostCreate(), onConfigurationChanged(), dan onOptionsItemSelected() pada to toggle:

class MainActivity : AppCompatActivity() {      // ...       override fun onPostCreate(savedInstanceState: Packet?) {         super.onPostCreate(savedInstanceState)         toggle.syncState()     }      override fun onConfigurationChanged(newConfig: Configuration?) {         super.onConfigurationChanged(newConfig)         toggle.onConfigurationChanged(newConfig)     }      override fun onOptionsItemSelected(particular: MenuItem?): Boolean {         if (toggle.onOptionsItemSelected(item)) {             render true         }         return super.onOptionsItemSelected(item)     } }

Berikut adalah apa itusyncState() , menurut dokumentasi resmi:

Menyinkronkan keadaan indikator drawer / kelayakan dengan DrawerLayout yang terkait ... Ini harus dipanggil dari metode onPostCreate Activity anda untuk melakukan sinkronisasi setelah keadaan contoh DrawerLayout telah dipulihkan, dan waktu lain ketika negara mungkin telah menyimpang sedemikian rupa bahwa ActionBarDrawerToggle tidak diberitahu. (Misalnya, jika Anda berhenti meneruskan aksi drawer yang sesuai untuk jangka waktu tertentu.)

iv. Menguji App

Pada titik ini, kita dapat menjalankan app!

Seperti yang Anda lihat, meluncurkan app akan menampilkan ikon navigasi drawer "hamburger" dalam tindakan bar. Cobalah menekan ikon aplikasi ini, membuka drawer. Selain itu, mengklik item navigasi drawer tidak akan melakukan apa-apa-kita akan menangani bagian itu di bagian berikutnya.

five. Penanganan Acara Klik

Sekarang, mari kita lihat bagaimana menangani acara klik untuk masing-masing particular di navigasi drawer. Perhatikan bahwa mengklik item apapun seharusnya membawa anda ke Aktivitas atau Fragment baru-itulah mengapa disebut navigasi drawer!

Pertama, aktivitas anda perlu menerapkan NavigationView.OnNavigationItemSelectedListener.

form MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {     // ...  }

Dengan menerapkan kontrak atau antarmuka ini, sekarang kita harus mengganti satu-satunya metode: onNavigationItemSelected().

grade MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {          // ...       override fun onNavigationItemSelected(item: MenuItem): Boolean {          when (item.itemId) {             R.id.nav_item_one -> Toast.makeText(this, "Clicked item one", Toast.LENGTH_SHORT).evidence()             R.id.nav_item_two -> Toast.makeText(this, "Clicked item two", Toast.LENGTH_SHORT).bear witness()             R.id.nav_item_three -> Toast.makeText(this, "Clicked item three", Toast.LENGTH_SHORT).evidence()             R.id.nav_item_four -> Toast.makeText(this, "Clicked detail iv", Toast.LENGTH_SHORT).bear witness()         }         render true     } }

Metode ini dipanggil saat item pada menu navigasi dipilih. Kami menggunakan ekspresi when untuk melakukan tindakan yang berbeda berdasarkan item menu yang diklik - id particular menu berfungsi sebagai konstanta untuk ekspresi when itu.

Selanjutnya, kita harus menginisialisasi NavigationView kita dan menetapkan pendengar ini dalam onCreate() aktivitas kita.

course MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {     // ...     override fun onCreate(savedInstanceState: Bundle?) {         // ...          val navigationView: NavigationView = findViewById(R.id.nav_view)         navigationView.setNavigationItemSelectedListener(this)         // ...      } // ...        

Menjalankan proyek lagi!

Ketika anad klik pada beberapa item, pesan toast ditampilkan — hanya apa yang kami harapkan. Tapi ingat bahwa mengklik pada item harus mengambil pengguna ke aktivitas baru atau fragmen (kita mengabaikan ini di sini untuk singkatnya).

Anda akan melihat bahwa bila anda mengklik pada particular, drawer masih tetap. Akan lebih baik jika itu ditutup secara otomatis kapan saja detail diklik. Mari kita lihat bagaimana untuk melakukannya.

override fun onNavigationItemSelected(item: MenuItem): Boolean {      when (item.itemId) {         R.id.nav_item_one -> Toast.makeText(this, "Clicked particular ane", Toast.LENGTH_SHORT).show()         R.id.nav_item_two -> Toast.makeText(this, "Clicked item two", Toast.LENGTH_SHORT).bear witness()         R.id.nav_item_three -> Toast.makeText(this, "Clicked item three", Toast.LENGTH_SHORT).testify()         R.id.nav_item_four -> Toast.makeText(this, "Clicked item four", Toast.LENGTH_SHORT).show()     }     drawer.closeDrawer(GravityCompat.Outset)     return truthful }

Untuk menutup drawer setelah link telah diklik, cukup memanggil closeDrawer() pada contoh DrawerLayout dan lewatiGravityCompat.Kickoff metode.

Menjalankan proyek sekali lagi dan lihat hasilnya!

half dozen. Penanganan Tombol Kembali Ditekan

Bila drawer terbuka, ini akan menjadi pengalaman pengguna yang lebih baik untuk tidak menutup aktivitas di domicile jika tombol Back ditekan. Ini adalah aplikasi cara populer seperti Google Inbox app bekerja.

Jadi, saat drawer terbuka dan tombol Dorsum ditekan, tutup saja laci bukan aktivitas home saat ini. Kemudian, jika pengguna menekan tombol Back lagi, aktivitas home harus ditutup.

Berikut adalah bagaimana kita dapat mencapai hal ini:

override fun onBackPressed() {     if (drawer.isDrawerOpen(GravityCompat.Start)) {         drawer.closeDrawer(GravityCompat.Beginning)     } else {         super.onBackPressed()     } }

Menjalankan proyek lagi dan mengujinya!

7. bonus: Menggunakan Template Android Studio

Sekarang setelah anda mengetahui tentang API yang terlibat untuk membuat navigasi drawer, saya akan menunjukkan jalan pintas yang akan membuatnya lebih cepat di lain waktu. Anda bisa menggunakan template bukan coding navigasi drawer Action dari awal.

Android Studio menyediakan kode template yang mengikuti Android desain dan pengembangan praktik terbaik. Template kode yang ada ini (tersedia di Java dan Kotlin) dapat membantu anda memulai proyek anda dengan cepat. Salah satu template tersebut dapat digunakan untuk membuat aktivitas navigasi drawer.

Saya akan menunjukkan cara menggunakan fitur praktis ini di Android Studio.

Untuk proyek baru, jalankan Android Studio.

Masukkan nama aplikasi dan klik tombol Adjacent.

Anda dapat meninggalkan defaultnya seperti pada dialog Target Android Devices. Klik tombol Side by side lagi.

Dalam dialog Add an Activity to Mobile, gulir ke bawah dan pilih Navigation Drawer Activity. Klik tombol Next setelah itu.

Pada dialog terakhir, anda bisa mengganti nama Activity, nama atau judul layout jika anda mau. Terakhir, klik tombol Terminate untuk menerima semua konfigurasi.

Android Studio kini telah membantu kita membuat proyek dengan aktivitas navigasi drawer. Benar-benar keren!

Anda sangat disarankan untuk mengeksplorasi kode yang dihasilkan.

Anda juga bisa menggunakan template untuk proyek Android Studio yang sudah ada. Cukup masuk ke File> New> Activity> Navigation Drawer Activity.

Template yang disertakan dengan Android Studio bagus untuk tata letak sederhana dan membuat aplikasi dasar, namun jika anda ingin memulai aplikasi anda lebih jauh lagi, Anda mungkin mempertimbangkan beberapa template aplikasi yang tersedia dari Pasar Envato.

Mereka menghemat waktu untuk pengembang berpengalaman, membantu mereka memotong seluk beluk pembuatan aplikasi dari nol dan memfokuskan bakat mereka alih-alih pada bagian unik dan disesuaikan untuk membuat aplikasi baru.

Kesimpulan

Dalam tutorial ini, anda belajar membuat navigasi drawer di Android menggunakan API DrawerLayout dan NavigationView dari awal. Kami juga menjajaki cara mudah dan cepat menggunakan template Android Studio untuk membuat laci navigasi.

Saya sangat menyarankan untuk memeriksa pedoman desain material resmi untuk navigasi drawer untuk mempelajari lebih lanjut tentang bagaimana mendesain dan menggunakan navigasi drawer di Android dengan benar.

Untuk mempelajari lebih lanjut tentang coding untuk Android, Periksa beberapa kursus kami dan tutorial di Envato Tuts +!

DOWNLOAD HERE

How to Create Navigation Drawer in Android Studio TUTORIAL

Posted by: danielnoppy1994.blogspot.com