Skip to main content
cara buat menu sliding Android

Cara Buat Menu Sliding Navigation Drawer

Cara Buat Menu Sliding Dengan Navigation Drawer

Salam sejahtera, pembahasan kita kali ini seputar tampilan aplikasi android, yatu tentang Cara Buat Menu Sliding Dengan Navigation Drawer. Jenis tampilan ini memang sudah banyak digunakan pada jenis aplikasi populer saat ini. Jika kita lihat aplikasi BBM, akan ada menu disamping yang akan muncul ketika kita menggerakkan atau menggeser kesamping, sekilas demikian pemahaman tentang Menu Sliding. Kita juga akan memadukan tampilan menggunakan Material Design. Material Design sendiri merupakan teknologi terbaru dalam hal User Interface khususnya Android. Jika ingin pahami tentang Material Design Android, kunjungi saja link berikut tentang apa itu Material Design Android.

Topik pembahasan cara buat menu sliding

  • Pengenalan Menu Sliding
  • Pengenalan Navigation Drawer
  • Pembuatan Project Stet by Step

Video Akhir Demo Aplikasi cara buat menu sliding

Download File Project cara buat menu sliding

Download Source Code

Pengenaan Navigation Drawer

Kita mulai materi cara buat menu sliding dengan sedikit teori. Jika pada aplikasi-aplikasi lama developer sering menggunakan Dashboard Menu untuk tampilan awalnya. Sekarang, para Developer lebih memilih menggunakan Model sliding menu. Aplikasi besar seumpama Gmail, BB<, Facebook menggunakan sliding menu yang sering diistilahkan dengan nama Navigation Drawer. Disebut Navigation drawer karena cara kerjaya yang mirip drawer (Laci). Navigation Drwer punya kelebihan yaitu menunya hanya muncul jika kita inginkan, sehingga tidak membutuhkan tempat di layar Smartphone. Navigation drawer adalah salah satu patterns yang ada pada android.

Sebelum mulai membuat project yang menggunakan navigation drawer pastikan terlebih dahulu anda menginstall support library karena navigation drawer ini berada pada file android-support-v4.jar yang ada pada android support library. Kita akan praktekkan cara dan langkahnya.

Pembuatan Project Sliding Menu

Kita mulai ketahap buat project untuk materi cara buat menu sliding. Buatkan sebuah project baru menggunakan Android Studio, untuk contoh ini saya menggunakan project dahulu yaitu tentang materi Pengenalan Library Volley. Alasan saya ambil ini project tidak buat yang baru lagi, karena akan nyambung dengan pembahasan-pembahasan selanjutnya.

Tambahkan Dependencies

Saya anggap, kita sudah punya project nya. Kini buka bagian : build.gradle (module:app), kemudian dalam depedencies tambahkan kode baris berikut :

cara buat menu sliding Android
Tambahkan Libary di Dependecies

Hal ini kita lakukan agar project kita support dengan Library nya.

Kemudian lakukan Sync Build gradle nya, semoga tidak akan terjadi error.

Buatkan Navigasi Menu

Karena project kita akan menampilkan menu dalam bentuk Navigasi, maka kita perlu membuatkan dulu menunya. Caranya Pada bagian : res, buatkan sebuah Directory baru beri nama : menu. Lihat gambar

cara buat menu sliding Android
Buat Directory

Kemudian dalam Directory Menu, buatkan Dua buah File XML, yaitu : menu_navigasi.xml dan menu_main.xml. Ubah kode : menu_navigasi.xml menjadi seperti berikut :

Source Code : menu_navigasi.xml

<?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/home" 
android:title="Beranda" 
android:icon="@drawable/ic_home"/>
        <item android:id="@+id/settings" 
android:title="About" 
android:icon="@drawable/ic_setting"/>
        <item android:id="@+id/trash" 
android:title="Petunjuk" 
android:icon="@drawable/ic_trash"/>
        <item android:id="@+id/logout" 
android:title="Login" 
android:icon="@drawable/ic_exit"/>
    </group>
</menu>

Dan Kode di : main_menu.xml menjadi sebagai berikut:

Source Code : menu_main.xml

<menu 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" 
tools:context="com.example.ciqwan.app_volley.MainActivity">
    <item android:id="@+id/action_settings" 
android:orderInCategory="100" 
android:title="@string/action_settings" 
app:showAsAction="never" />
</menu>

Note :

Jangan Lupa, biar tidak terjadi error di : menu_navigasi.xml untuk baris “android:icon” kita perlu menambahkan gambar icon nya dulu dalam folder : drawable. Untuk Icon yang digunakan sesuaikan saja sesuai kebutuhan aplikasi. Lihat struktur Folder dan file aplikasi kita sekarang :

cara buat menu sliding Android
menuNavigasi.xml

Ubah Colors.xml dan Style.xml

Sebelum kita melangkah untuk pembuatan layout utama aplikasi, kita perlu perubahan sedikit di file : colors.xml untuk set warna dan style.xml untuk thema aplikasi. Caranya buka pertama file : colors.xml yang terletak di Folder : Values. Kemudian tambahkan baris berikut, Lihat gambar:

cara buat menu sliding Android
Colors.xml

Lakukan hal yang sama untuk file : Style.xml, ubah kodenya menjadi sebagai berikut:

cara buat menu sliding Android
Style.xml

Pembuatan Layout Utama

Setelah pembuatan untuk bagian Menu dan style selesai, kini kita beralih dalam tampilan Layout utama aplikasi. Pertama kali sebelum kita mengubah kode untuk layout utama nya, kita buatkan dulu untuk tampilan Layout Menu Sliding nya.

Dalam folder Res-> Layout, buatkan dua buah File Layout baru, yang pertama file layout untuk membuat bagian Header menu sliding nya, beri nama : header.xml, dan yang kedua file untuk layout Main menu nya, beri nama : main.xml. Sehingga tampilan Sruktur Project akan jadi seperti ini :

cara buat menu sliding Android
Struktur Project

Ubah source code nya menjadi sebagai berikut :

Source Code : header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:paddingTop="20dp" 
android:paddingBottom="20dp" 
android:background="@color/colorPrimaryDark" 
android:layout_width="match_parent" 
android:layout_height="190dp">

    <ImageView android:src="@drawable/unigha" 
android:layout_width="wrap_content" 
android:layout_gravity="center" 
android:layout_weight="1" 
android:layout_height="0dp" />
    <TextView android:id="@+id/tv_email" 
android:textColor="@color/White" 
android:textSize="18sp" 
android:layout_gravity="center" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" />
</LinearLayout>

Source code : main.xml

<?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:layout_width="match_parent" 
android:layout_height="match_parent" 
app:layout_behavior="@string/appbar_scrolling_view_behavior" 
tools:context="com.example.ciqwan.app_volley.MainActivity" >

    <TextView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_centerHorizontal="true" 
android:layout_centerVertical="true" 
android:textSize="24sp" 
android:text="Menu Sliding Contoh By . Ridwan" />
</RelativeLayout>

Tampilan nya aan menjadi sebagai berikut :

cara buat menu sliding Android
Header.xml
cara buat menu sliding Android
SlidingMenu

Untuk Icon Gambar, silahkan sesuaiikan sesuai kebutuhan dan tempatkan gambarnya di Drawable.

Selanjutya, kita beralih ke layout utamanya, yaitu  activity_main.xml. ubah kodenya sehingga menjadi sebagai berikut:

Source code : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:context="com.example.ciqwan.app_volley.MainActivity">

        <android.support.design.widget.AppBarLayout 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 
android:background="?attr/colorPrimary" 
app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.AppBarLayout>

        <include layout="@layout/main" />

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView 
android:id="@+id/navigation_view" 
android:layout_height="match_parent" 
android:layout_width="wrap_content" 
android:layout_gravity="start" 
app:headerLayout="@layout/header" 
app:menu="@menu/menu_navigasi"/>

</android.support.v4.widget.DrawerLayout>

Tampilan menjadi :

cara buat menu sliding Android
activity_main.xml

Ubah Class MainActivity.java

Kini kita berada dalam tahap akhir pembuatan materi ini, kita akan lakukan perubahan source code pada class MainActivity.java. Namun sebelumnya, kita definisika dulu dua buah string untuk proses membuka dan menutup menu sliding nya. Buka String.xml, kemudian tambahkan baris kode berikut :

cara buat menu sliding Android
String values

Nanti kita akan memanggil nya dalam class : MainActivity.java

Ubah class : Main.java menjadi sebagai berikut:

Source code : MainActivity.java

package com.example.ciqwan.app_volley;


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

public class MainActivity extends AppCompatActivity {
    private DrawerLayout dr;
    private Toolbar tl;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tl = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(tl);
        ProsesNavigasi();

    }

    public void ProsesNavigasi() {
        NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {

                int id = menuItem.getItemId();

                switch (id) {
                    case R.id.home:
                        Toast.makeText(getApplicationContext(), "Home", Toast.LENGTH_SHORT).show();
                        dr.closeDrawers();
                        break;
                    case R.id.settings:
                        Toast.makeText(getApplicationContext(), "About", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.trash:
                        Toast.makeText(getApplicationContext(), "Petunjuk", Toast.LENGTH_SHORT).show();
                        dr.closeDrawers();
                        break;
                    case R.id.logout:


                }
                return true;
            }
        });
        View header = navigationView.getHeaderView(0);
        TextView tv_email = (TextView) header.findViewById(R.id.tv_email);
        tv_email.setText("Ridwan, S.ST");
        dr = (DrawerLayout) findViewById(R.id.drawer);

        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, dr, tl, R.string.drawer_open, R.string.drawer_close) {

            @Override
            public void onDrawerClosed(View v) {
                super.onDrawerClosed(v);
            }

            @Override
            public void onDrawerOpened(View v) {
                super.onDrawerOpened(v);
            }
        };
        dr.addDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();
    }
}

Terakhir pastikan File : AndroidManifest.xml lengkapnya seperti ini :

cara buat menu sliding Android
AndroidManifest.xml

Run Project

Kini, kita akan run project nya, sehingga tampilan nya akan menjadi sebagai berikut :

cara buat menu sliding Android
cara buat menu sliding Android

Untuk lihat menu navigasinya, nonton video demo diatas untuk pemahaman tentang cara buat menu sliding android.

Kesimpulan Cara Buat Menu Sliding Dengan Navigation Drawer

  • Aplikasi android semakin menarik jika kita gunakan Materia Design
  • Model menu dengan Navigasi kesamping sering digunakan untuk aplikasi besar seprti BBM, Facebook, Gmail dan lainnya.

Demikian materi tentang cara buat menu sliding, Semoga Bermanfaat.

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

  • Rizky Ramansyah

    “Could not identify launch activity: Default Activity not found
    Error while Launching activity”
    ini erornya dimana ya pak ?