Cara Membuat Menu Slider Aplikasi Dengan AIDE

Setelah sebelumnya kita mencoba beberapa cara dalam membuat menu aplikasi,

Baca :

Cara Membuat Menu Aplikasi Dengan AIDE
Cara Lain Membuat Menu Aplikasi Dengan AIDE
Cara Membuat Menu Tab Aplikasi Dengan AIDE

sekarang kita akan membahas cara membuat menu slider aplikasi dengan AIDE yang memiliki tampilan lebih menarik, namanya navigation drawer atau saya menyebutnya menu slider yang akan menggunakan material design dalam pembuatannya, sehingga membutuhkan library AppCompat. Sedikit pembahasan tentang library ini dapat dilihat pada artikel sebelumnya (Baca: Membuat Toolbar Material Design).

Langkah-langkah dan cara membuat menu slider aplikasi dengan AIDE

Langsung saja kita mu mulai pembuatannya. Buat project baru:

Nama : SlideMenu

Package name : com.slide.menu

Buka file build.gradle

Salin kode dibawah ini kedalam file build.gradle.


apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    buildToolsVersion "28.1.0"

    defaultConfig {
        applicationId "com.slide.menu"
        minSdkVersion 14
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
 compile 'com.android.support:support-v4:+'
 compile 'com.android.support:design:+'
 compile 'com.android.support:appcompat-v7:+'
    compile fileTree(dir: 'libs', include: ['*.jar'])
}

Perhatikan bagian dependencies, terdapat tiga jenis library yang dibutuhkan pada project ini yaitu suppot-v4, design dan appcompat-v7. Jika salah satu atau ketiga library ini belum tersedia, siapkan koneksi internet dan kuota yang cukup untuk mendownload library tersebut. Proses download akan dilakukan sendiri oleh AIDE setelah project disimpan (klik Menu > Save).

Cara Membuat Menu Slider Aplikasi Dengan AIDE

Buka file main.xml

File main.xml terdapat pada folder layout, salin kode dibawah ini dan masukkan kedalam file 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"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 android:id="@+id/Drawer">

 <include
  layout="@layout/main_child"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"/>
 
 <android.support.design.widget.NavigationView
  android:id="@+id/navigasi"
  android:layout_width="wrap_content"
  android:layout_height="match_parent"
  android:layout_gravity="start"
  app:itemTextColor="@color/primary_text"
  app:itemIconTint="@color/primary_dark"
  app:menu="@menu/menu"/>

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

Buat file main_child.xml

Dalam folder layout buat file baru dan beri nama main_child.xml, salin kode dibawah ini kedalam file tersebut.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="TextInputActivity">

 <android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_height="?attr/actionBarSize"
  android:layout_width="match_parent"
  android:background="?attr/colorPrimary"
  android:theme="@style/AppTheme"
  app:layout_scrollFlags="scroll|enterAlways"
  app:layout_collapseMode="pin"
  android:popupTheme="@style/ThemeOverlay.AppCompat.Light">

 </android.support.v7.widget.Toolbar>

 <RelativeLayout
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:orientation="vertical"
  android:layout_below="@id/toolbar"
  android:gravity="center">

  <ImageView
   android:layout_height="match_parent"
   android:layout_width="match_parent"
   android:src="@drawable/bg"
   android:background="#F0EEFF"/>

 </RelativeLayout>

 <TextView
  android:layout_height="wrap_content"
  android:text="caraliyo.com"
  android:textAppearance="?android:attr/textAppearanceLarge"
  android:layout_width="match_parent"
  android:id="@+id/text"
  android:textColor="@color/primary_text"
  android:gravity="center"
  android:layout_alignParentBottom="true"
  android:layout_marginBottom="20dp"
  android:textSize="30sp"/>

</RelativeLayout>

Buat file slider_menu.xml

Masih dalam folder layout, buat file baru beri nama slider_menu.xml dan salin kode dibawah ini kedalam file tersebut.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="200dip"
 android:orientation="vertical"
 android:background="@color/primary_light">

 <ImageView
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:src="@drawable/bg"
  android:layout_marginTop="20dp"/>

</RelativeLayout>

Buat folder dan file menu

Didalam folder res, buat folder baru dengan nama menu, dan dalam folder menu tersebut buat file baru beri nama menu.xml. Salin kode berikut ini kedalam file menu.xml.


<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
  android:icon="@drawable/home"
        android:id="@+id/Home"
        android:title="Home"/>
 <item
  android:icon="@drawable/share"
  android:id="@+id/share"
  android:title="Share" />
 <item
  android:icon="@drawable/settings"
  android:id="@+id/settings"
  android:title="Settings" />,
 <item
  android:icon="@drawable/exit"
  android:id="@+id/exit"
  android:title="Keluar" />

</menu>

Buka file styles.xml dalam folder values

Buka file styles.xml yang terdapat dalam folder values. Salin kode dibawah ini dan masukkan kedalam file styles.xml.


<?xml version="1.0" encoding="utf-8"?>

<resources>
    <style name="Base.Theme.ThemeApp" parent="Theme.AppCompat.NoActionBar">

        <item name="colorPrimary">@color/primary</item>

        <!--   warna gelap untuk status bar dan contextual app bars -->
        <item name="colorPrimaryDark">@color/primary_dark</item>

        <!--   theme UI controls seperti checkboxes dan text fields e.g. FloatActionButton -->
        <item name="colorAccent">@color/accent</item>

        <!--   warna untuk Title Text  -->
        <item name="android:textColorPrimary">@color/primary_text</item>

        <!--   warna untuk menu overflow icon (tiga titik vertical) -->
        <item name="android:textColorSecondary">@color/secondary_text</item>

        <item name="android:windowBackground">@color/window_background</item>
    </style>

    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Base.Theme.ThemeApp">
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
    </style>

</resources>

Buat file colors.xml

Masih didalam folder values, buat sebuah file dan beri nama colors.xml, salin kode dibawah ini kedalam file tersebut.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="window_background">#CCffffff</color>

    <color name="primary">#2196F3</color>
    <color name="primary_dark">#1976D2</color>
    <color name="primary_light">#BBDEFB</color>
    <color name="accent">#FF9800</color>
    <color name="primary_text">#212121</color>
    <color name="secondary_text">#ffffff</color>
    <color name="icons">#FFFFFF</color>
    <color name="divider">#BDBDBD</color>
</resources>

Buka file styles.xml dalam folder values-v21

Sekarang pindah ke folder values-v21, buka file styles.xml yang terdapat dalam folder tersebut. Salin kode dibawah ini kedalam file styles.xml.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Base.Theme.ThemeApp" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/primary</item>

        <!--   warna gelap untuk status bar dan contextual app bars -->
        <item name="colorPrimaryDark">@color/primary_dark</item>

        <!--   theme UI controls seperti checkboxes dan text fields e.g. FloatActionButton -->
        <item name="colorAccent">@color/accent</item>

        <!--   warna untuk Title Text  -->
        <item name="android:textColorPrimary">@color/primary_text</item>

        <!--   warna untuk menu overflow icon (tiga titik vertical) -->
        <item name="android:textColorSecondary">@color/secondary_text</item>

    </style>

    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Base.Theme.ThemeApp">
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
    </style>

</resources>

Buka file MainActivity.java

Salin kode dibawah ini dan masukkan kedalam file MainActivity.java.


package com.slide.menu;

import android.os.*;
import android.support.v7.app.*;
import android.support.v7.widget.*;
import android.widget.Toast;
import android.view.*;
import android.support.v4.widget.*;
import android.support.design.widget.*;
import android.widget.TextView;
import android.support.v4.view.*;
import android.content.*;


public class MainActivity extends  AppCompatActivity 
{
 private DrawerLayout drawer;;
 private NavigationView nav;
 private View HeaderLayout;
 private TextView MainText;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

  // findview toolbar
  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

  // set toolbar ke dalam action bar
  setSupportActionBar(toolbar);

  // set icon menu
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu);

  // set title toolbar
  getSupportActionBar().setTitle("CARALIYO");

  // set subtitle
  getSupportActionBar().setSubtitle("caraliyo.com");

  // set logo toolbar
  // getSupportActionBar().setDisplayUseLogoEnabled(true);
  // getSupportActionBar().setLogo(R.drawable.ic_launcher);

  MainText = (TextView)findViewById(R.id.text);
  // Memperkenalkan DrawerLayout dan Navigation berdasarkan Id 
  drawer = (DrawerLayout)findViewById(R.id.Drawer);
  nav = (NavigationView)findViewById(R.id.navigasi);
  // Menambahkan Header di Navigasi dan set textview
  HeaderLayout = nav.inflateHeaderView(R.layout.slider_menu);
  // Aksi Navigasi
  nav.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener()
   {
    @Override
    public boolean onNavigationItemSelected(MenuItem item)
    {
     if (item.isChecked())
      item.setChecked(false);
     else
      item.setChecked(true);

     drawer.closeDrawers();
     // Memberi aksi di tiap id
     switch (item.getItemId())
     {
      case R.id.Home:
       MainText.setText("Home");
       home();
       break;
      case R.id.share:
       MainText.setText("Share");
       share();
       break;
      case R.id.settings:
       MainText.setText("Setting");
       setting();
       break;
      case R.id.exit:
       //  Toast.makeText(MainActivity.this,"Keluar",Toast.LENGTH_LONG).show();
       //finish();
       onBackPressed() ;
       break;
     } 
     return true;
    }
   });

 }

 @Override
    public boolean onCreateOptionsMenu(Menu menu)
 {
        menu.add(0, 1, 1, "New");
        menu.add(0, 2, 2, "Create");
        menu.add(0, 3, 3, "Open");
        menu.add(0, 4, 4, "Delete");
        menu.add(0, 5, 5, "Exit");

        return true;
    }

 @Override
 public boolean onOptionsItemSelected(MenuItem item)
 {
        switch (item.getItemId())
  {
   case (1):
    Toast.makeText(getApplicationContext(), "New", Toast.LENGTH_SHORT).show();
    return true;
   case (2):
    Toast.makeText(getApplicationContext(), "Create", Toast.LENGTH_SHORT).show();
    return true;
   case (3):
    Toast.makeText(getApplicationContext(), "Open", Toast.LENGTH_SHORT).show();
    return true;
   case (4):
    Toast.makeText(getApplicationContext(), "Delete", Toast.LENGTH_SHORT).show();
    return true;
   case (5):
    Toast.makeText(getApplicationContext(), "Keluar", Toast.LENGTH_SHORT).show();
    onBackPressed() ;
    return true;

    // Menampilkan slider menu
   case android.R.id.home:
    drawer.openDrawer(GravityCompat.START);
    return true;
        }
        return false;
    }

 public void onBackPressed() {
  AlertDialog.Builder alertKeluar = new AlertDialog.Builder(MainActivity.this);
  alertKeluar.setMessage("Yakin ingin keluar aplikasi ???")
   .setCancelable(false)
   .setPositiveButton("Ya", new AlertDialog.OnClickListener(){
    public void onClick(DialogInterface arg0, int arg1) {
     MainActivity.this.finish();
     finish();
    }
   })
   .setNegativeButton("Tidak",new AlertDialog.OnClickListener(){
    public void onClick(DialogInterface dialog, int which) {
     dialog.cancel();
    }
   });
  AlertDialog a = alertKeluar.create();
  a.setTitle("Keluar Aplikasi...");
  a.setIcon(R.drawable.ic_launcher);
  a.show();
 }

 public void home() {
  AlertDialog.Builder alertKeluar = new AlertDialog.Builder(MainActivity.this);
  alertKeluar.setMessage("Menu Home dipilih")
   .setCancelable(false)
   .setNegativeButton("OK",new AlertDialog.OnClickListener()
   {
    public void onClick(DialogInterface dialog, int which) 
    {
     dialog.cancel();
    }
   });
  AlertDialog a = alertKeluar.create();
  a.setTitle("Home");
  a.setIcon(R.drawable.ic_launcher);
  a.show();
 }

 public void share() {
  AlertDialog.Builder alertKeluar = new AlertDialog.Builder(MainActivity.this);
  alertKeluar.setMessage("Menu Share dipilih")
   .setCancelable(false)
   .setNegativeButton("OK",new AlertDialog.OnClickListener()
   {
    public void onClick(DialogInterface dialog, int which) 
    {
     dialog.cancel();
    }

   });
  AlertDialog a = alertKeluar.create();
  a.setTitle("Share");
  a.setIcon(R.drawable.ic_launcher);
  a.show();
 }

 public void setting() {
  AlertDialog.Builder alertKeluar = new AlertDialog.Builder(MainActivity.this);
  alertKeluar.setMessage("Menu Setting dipilih")
   .setCancelable(false)
   .setNegativeButton("OK",new AlertDialog.OnClickListener()
   {
    public void onClick(DialogInterface dialog, int which) 
    {
     dialog.cancel();
    }

   });
  AlertDialog a = alertKeluar.create();
  a.setTitle("Settings");
  a.setIcon(R.drawable.ic_launcher);
  a.show();
 }

}

Icon menu

Didalam folder res buat sebuah folder baru beri nama drawable. Didalam folder drawable ini masukkan beberapa gambar dalam format png yang akan digunakan sebagai icon yaitu :

ic_menu.png untuk icon menu
home.png untuk icon home
share.png untuk icon share
settings.png untuk icon settings
exit.png untuk icon exit
bg.png untuk icon background

Untuk mempermudah dalam pembuatan icon, saya pernah membahasnya dalam artikel terpisah, silahkan dibaca Cara Membuat Icon.

Jika semua proses diatas telah selesai dikerjakan, silahkan compile dan jalankan aplikasinya. Jika tidak terdapat error, maka hasilnya akan seperti gambar berikut.