Android Studio : Membuat Navbar Drawer dan Fragment

Selamat siang semua, pada kesempatan kali saya akan share tentang cara membuat navbar drawer yang langsung berisi itemnya. Penggunaan navbar drawer ini sangat penting nantinya jika kite mendevelop aplikasi yang banyak berisi menu.

Sebelum lanjut kalian mengikuti tutorial ini, silakan kalian buat project baru pada templatenya pilih navbar drawer. Silakan kalian sediakan kopi supaya lebih fokus atau sebatang rokok supaya tidak bosan.

Bagi kalian yang bingung kita mau buat apa, silakan liat screenshoot di bawah ini:

cara membuat navbar drawerCara Membuat Navbar Drawer


1# Silakan buka android studio dan pilih templatenya navbar drawer, untuk sdk silakan sesuaikan sendiri. Seperti ini tampilannya di android studio saya.
Cara Membuat Navbar Drawer

2# Silakan hapus textview dan button yang icon email.
Cara Membuat Navbar Drawer

setelah kalian delete tombolnya itu, masuk ke MainActivity.java untu menghapus function yang secara default disediakan untuk tombol itu. Agar tidak terjadi error karena tombolnya sudah kita hapus.
 Cara Membuat Navbar Drawer

3# Pada langkah ini kita akan membuatkan item-item untuk menu navbarnya. Silakan klik layout->activity_main.xml, maka tampilannya akan seperti dibawah ini.
Cara Membuat Navbar Drawer

Untuk mengubah item-item itu masuk ke res->activity_main_drawer.xml masuk ke mode text, kemudian masukkan sintaks seperti di bawah ini:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_webview"
            android:title="Web View" />
        <item
            android:id="@+id/nav_menu1"
            android:title="Menu 1" />
        <item
            android:id="@+id/nav_menu2"
            android:title="Menu 2" />
    </group>
</menu>

Maka item-itemnya akan berubah seperti di bawah ini:
Cara Membuat Navbar Drawer

4# Pada langkah ini, silakan kalian masuk ke MainActivity.java. Sebenarnya secara default sudah disediakan sintaks untuk menghandle fragment yang akan dibuka saat menu di klik menggunakan if, namun disini kita akan menggunakan switch case. Silakan kalian cari sintaks seperti dibawah ini:
Cara Membuat Navbar Drawer
ganti functionnya dengan sintaks seperti di bawah ini:

public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();
        Fragment fragment = null;
        switch (id){
            case R.id.nav_webview:
                fragment = new Webview();
                break;
            case R.id.nav_menu1:
                fragment = new Menu1();
                break;
            case R.id.nav_menu2:
                fragment = new Menu2();
                break;
        }
        if (fragment != null){
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            ft.replace(R.id.content_frame, fragment);
            ft.commit();
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

Pada tahap ini pasti ada error pada sintaks tersebut. Itu disebabkan karena kita belum membuatkan class-classnya, jadi kalian abaikan saja errornya.

5#  Masuk res->layout->content_main.xml, disini kita akan menambahkan frame layout untuk menaruh fragmentnya. Tambahkan sintaks frame sehingga sintaks fullnya seperti dibawah ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://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/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.maninback.balidev.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

6# Sekarang kita akan membuat layout untuk webview silakan klik kanan pada layout->new->layout resource file. dan berina webview. Masuk ke mode text, kemudian pastekan sintaks dibawah ini.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <WebView
        android:id="@+id/webview"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true" />
</RelativeLayout>

7# Barusakan kita sudah membuat layout untuk webview sekarang kita buatkan class untuk menghandlenya. Pada packages projects kalian silakan klik kanan->new ->java class.
Cara Membuat Navbar Drawer

beri nama Webview sesuaikan dengan nama yang kita buat di MainActivity.java yang tadi pada switch case. Pada Webview.java sintaksnya seperti di bawah ini:

public class Webview extends Fragment {
        View v;
        WebView myWeb;
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
            //menambahkan layout
            v =inflater.inflate(R.layout.webview, container, false);
            //disini kita tambahkan webview
            myWeb = (WebView)v.findViewById(R.id.webview);
            myWeb.loadUrl("http://www.balidev.top/");
            //enable javascript pada web
            WebSettings webset = myWeb.getSettings();
            webset.setJavaScriptEnabled(true);
            //redirect link
            myWeb.setWebViewClient(new WebViewClient());
            return v;
        }
        public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
            super.onViewCreated(view, savedInstanceState);
            //you can set the title for your toolbar here for different fragments different titles
            getActivity().setTitle("Web View");
        }
    }

Perhatikan sintaksnya, sudah saya sertakan note dimasing-masing codenya.

8# Lakukan hal yang sama untuk Menu 1 dan Menu 2, buatlah layout sesuai dengan keperluan kalian, kemudian buatkan file javanya jangan lupa namanya harus sesuai dengan yang ada di MainActivity.java

Note:
v =inflater.inflate(R.layout.webview, container, false);
Sesuakan R.layout.namalayout, dengan nama layout yang kalian buat.
Karena kita membuat WebView silakan tambahkan internet permission pada AndroidManifest.

Baca juga artikel lainnya:



Artikel Terkait

6 komentar

Mantap gan.

Tapi mau minta tambahkan code untuk fungsi back button, jika sudah memilih Menu1 lalu jika tekan tombol back akan kembali ke Menu Utama.
Tolong tambahkan juga menu About yang jika diklik akan muncul kotak kecil berisi gambar dan nama kita. Thanks

mantap gan, tapi kok pas saya copas sintaxs di class Webview.java error ya ? ada source lengkapnya gan?

Jangan di copas mentah-mentah om, mungkin bisa dipahami algoritmanya terlebih dahulu. Semoga work yah

Ok gan, untuk tombol back nya sudah saya tambahkan mata artikel lain. tinggal setting di parentnya

Owh gitu gan, maklum ane masih awam logika nya gan :(, thanxs for reply nya yah


EmoticonEmoticon