MEMBUAT MENU NAVIGATION DRAWER DI ANDROID STUDIO DAN JUGA BISA PINDAH KE ACTIVITY LAIN SAAT DIKLIK

Assalamualaikum.wr.wb

Kali ini saya akan membuat tutorial tentang bagaimana sih cara membuat menu NAVIGATION DRAWER DI ANDROID STUDIO ITU yang bisa berpindah ke activity lain saat diklik menunya yang ada di navigation drawer?

Nah, anda tepat sekali mengunjungi blog saya hehehe
Oke, langsung saja kita mulai langkah-langkahnya ya.....

Langkah Pertama
Buka Android Studio Kalian, Jika sudah dibuka, buat project baru dengan nama terserah kalian
Perhatikan gambar berikut :
Membuat Nama Project

Menentukan Minimum Jenis Android

Pilih Empty Activity, karena saya akan membuat secara manual

Klik Finish

Langkah Kedua
1. Masukkan coding berikut di build.gradle (Module App)
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:26.1.0'
    compile 'com.android.support:design:26.1.0'
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}


2. Masukkan coding berikut didalam MainActivity.java

package com.example.ugiksetyawan.myapplication;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
    //Mendefinisikan variabel
    private Toolbar toolbar;
    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Menginisiasi Toolbar dan mensetting sebagai actionbar
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        // Menginisiasi  NavigationView
        navigationView = (NavigationView) findViewById(R.id.navigation_view);
        //Mengatur Navigasi View Item yang akan dipanggil untuk menangani item klik menu navigasi
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            // This method will trigger on item Click of navigation menu
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                //Memeriksa apakah item tersebut dalam keadaan dicek  atau tidak,
                if(menuItem.isChecked()) menuItem.setChecked(false);
                else menuItem.setChecked(true);
                //Menutup  drawer item klik
                drawerLayout.closeDrawers();
                //Memeriksa untuk melihat item yang akan dilklik dan melalukan aksi
                switch (menuItem.getItemId()){
                    // pilihan menu item navigasi akan menampilkan pesan toast klik kalian bisa menggantinya
                    //dengan intent activity
                    case R.id.navigation1:
                        Intent intent = new Intent(MainActivity.this, Main2Activity.class);
                        startActivity(intent);
                        return true;
                    case R.id.navigation2:
                        Toast.makeText(getApplicationContext(),"Profil Telah Dipilih",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.navigation3:
                        Toast.makeText(getApplicationContext(),"Daftar Telah Dipilih",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.navigation4:
                        Toast.makeText(getApplicationContext(),"Setting telah dipilih",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.navigation5:
                        Toast.makeText(getApplicationContext(),"About telah dipilih",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.navigation6:
                        Toast.makeText(getApplicationContext(),"About telah dipilih",Toast.LENGTH_SHORT).show();
                        return true;
                    default:
                        Toast.makeText(getApplicationContext(),"Kesalahan Terjadi ",Toast.LENGTH_SHORT).show();
                        return true;
                }
            }
        });
        // Menginisasi Drawer Layout dan ActionBarToggle
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.openDrawer, R.string.closeDrawer){
            @Override
            public void onDrawerClosed(View drawerView) {
                // Kode di sini akan merespons setelah drawer menutup disini kita biarkan kosong
                super.onDrawerClosed(drawerView);
            }
            @Override
            public void onDrawerOpened(View drawerView) {
                //  Kode di sini akan merespons setelah drawer terbuka disini kita biarkan kosong
                super.onDrawerOpened(drawerView);
            }
        };
        //Mensetting actionbarToggle untuk drawer layout
        drawerLayout.setDrawerListener(actionBarDrawerToggle);
        //memanggil synstate
        actionBarDrawerToggle.syncState();
    }


}


3. Masukkan coding berikut didalam activity_main.xml
<android.support.v4.widget.DrawerLayout
    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/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:measureWithLargestChild="false"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/layout_toolbar" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="ISI KONTEN"
            android:id="@+id/textView" android:layout_gravity="center_horizontal"/>

    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/layout_header"
        app:menu="@menu/item_navigasi" />
</android.support.v4.widget.DrawerLayout>

Tampilannya Akan Menjadi Seperti Berikut
4. Selanjutnya yaitu buatlah sebuah Android resource directory 
    (res - klik kanan pilih New -  Android resource directory), lihat gambar agar lebih jelas

Jika sudah, lanjut kelangkah ini :
Pastikan sesuai dengan gambar yang telah saya kasih kotak hitam, lalu klik OK
5. Buatlah file xml di dalam directory menu (directory menu klik kanan - New - Menu resource file) seperti pada gambar dibawah ini dengan nama item_navigasi.xml
Jika sudah, masukkan code berikut ini didalam item_navigasi.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="all">
        <item
            android:id="@+id/navigation1"
            android:checked="false"
            android:icon="@drawable/ic_terrain"
            android:title="@string/navigation_view_item_1" />
        <item
            android:id="@+id/navigation2"
            android:checked="false"
            android:icon="@drawable/ic_hotel"
            android:title="@string/navigation_view_item_2" />
        <item
            android:id="@+id/navigation3"
            android:checked="false"
            android:icon="@drawable/ic_local_pizza"
            android:title="@string/navigation_view_item_3" />

        <item
            android:id="@+id/navigation4"
            android:checked="false"
            android:icon="@drawable/ic_shopping_cart"
            android:title="@string/navigation_view_item_4" />
        <item
            android:id="@+id/navigation5"
            android:checked="false"
            android:icon="@drawable/ic_feedback"
            android:title="@string/navigation_view_item_5" />
        <item
            android:id="@+id/navigation6"
            android:checked="false"
            android:icon="@drawable/ic_contact_phone"
            android:title="@string/navigation_view_item_6" />
    </group>
</menu>


6. Buat file didalam direktori layout dengan nama layout_toolbar.xml dan layout_header.xml
Source code layout_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat">
</android.support.v7.widget.Toolbar>

Source code layout_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="190dp"
    android:background="#2ecc71"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginLeft="100dp"
        android:padding="30dp"
        android:src="@drawable/icon_profile" android:layout_alignBottom="@+id/linearLayout"
        android:layout_alignParentRight="true" android:layout_alignParentEnd="true"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="vertical" android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true" android:layout_alignParentStart="true"
        android:id="@+id/linearLayout">

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="16dp"
            android:text="SISTEM INFORMASI"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="16dp"
            android:text="WISATA TUBAN"
            android:textColor="#fff" />
    </LinearLayout>
</RelativeLayout>



7. Masuk kedalam direktori values lalu pilih string.xml dan ganti source codenya seperti berikut ini
<resources>
    <string name="app_name">"WISATA TUBAN"</string>
    <string name="openDrawer">Drawer dibuka</string>
    <string name="closeDrawer">Drawer ditutup</string>
    <string name="navigation_view_item_1">Wisata</string>
    <string name="navigation_view_item_2">Hotel</string>
    <string name="navigation_view_item_3">Kuliner</string>
    <string name="navigation_view_item_4">Pusat Belanja</string>
    <string name="navigation_view_item_5">Feedback</string>
    <string name="navigation_view_item_6">Panggilan Darurat</string>
</resources>

Selanjutnya ganti source code style.xml menjadi seperti ini
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- Customize your theme here. -->
    </style>

</resources>


8. Buat Activity baru dan pilih Empty Activity, Beri nama Main2Activity (Activity ini sebagai Activity ke 2 setelah diklik di menu wisata)
Source code Main2Activity.java
package com.example.ugiksetyawan.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class Main2Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
    }
}
Sorce code activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.ugiksetyawan.myapplication.Main2Activity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Wisata adalah tempat orang untuk berkunjung sebagai refreshing otak"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="266dp" />
</android.support.constraint.ConstraintLayout>


9. Tinggal kita run saja

HASIL LIHAT VIDEO BERIKUT INI


Comments

Popular posts from this blog

CARA MENAMPILKAN DATA DARI DATABASE MYSQL KE LAYOUT ANDROID DENGAN ANDROID STUDIO MENGGUNAKAN VOLLEY

APA ITU HUKUM MOORE

PROTOTYPE SISTEM PEMESANAN CAFE "GOOK COFFE"