Pada Tutorial kali ini kita akan menambahkan Navigation Drawer dengan tetap menggunakan material design yang telah kita buat pada project sebelumnya: User Interface (UI) Material Design. Jika kamu belum mengikuti tutorial sebelumnya kamu dapat mendownload sourcenya disini: Download Source. Atau agar memahami material design kamu bisa mengikuti tutorialnya sebelumnya terlebih dahulu.
Membuat Project
Pertama silahkan buka Project Material Design I (karena kita akan melanjutkan tutorial/project sebelumnya.
Setelah projectnya terbuka silahkan set-up Gradle dengan cara membuka file build.gradle pada bagian Gradle Script. Setelah itu pastikan scriptnya seperti di bawah ini (yang terpenting pada bagian dependencies).
apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "25.0.3"
defaultConfig {
applicationId "myusuf.kodingindonesia.com.edittheme"
minSdkVersion 15
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:design:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
testCompile 'junit:junit:4.12'
}
Setelah itu silahkan buka file String.xml pada bagian res > values > string.xml dan buat kodenya menjadi seperti di bawah ini.
<resources>
<string name="app_name">EditTheme</string>
<string name="action_settings">Settings</string>
<string name="action_search">Search</string>
<!-- Dibawah ini untuk Navigation Drawer -->
<string name="openDrawer">Drawer dibuka</string>
<string name="closeDrawer">Drawer ditutup</string>
<string name="navigation_view_item_1">Beranda</string>
<string name="navigation_view_item_2">Profil</string>
<string name="navigation_view_item_3">Daftar</string>
<string name="navigasi_kategori_2">Sub Item Navigasi</string>
<string name="navigation_view_item_4">Settings</string>
<string name="navigation_view_item_5">About</string>
</resources>
Selanjutnya kita akan membuat ikon gambar pada bagian drawable. Kita akan membuat lima icon. Caranya:
Klik kanan pada bagian drawable > new > Vector Asset.
Maka akan muncul jendela Configure Vector Asset seperti gambar di bawah ini.
Penting:
Silahkan membuat 5 icon dengan mengikuti cara di atas (Kita akan membuat 5 menu yaitu : home, profile, list, about, setting)
Setelah itu pada bagian menu kita akan membuat file xml dengan nama item_navigasi.xml.
Caranya:
Klik kanan pada bagian menu > New > File.
Sehingga akan muncul jendela baru New File seperti gambar di bawah ini dan silahkan isi bagian pada kolom nama.
Setelah itu silahkan isikan file item_navigasi.xml dengan kode program berikut ini:
<?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/nav_home"
android:checked="false"
android:icon="@drawable/ic_home"
android:title="@string/navigation_view_item_1" />
<item
android:id="@+id/nav_profile"
android:checked="false"
android:icon="@drawable/ic_profile"
android:title="@string/navigation_view_item_2" />
<item
android:id="@+id/nav_list"
android:checked="false"
android:icon="@drawable/ic_list"
android:title="@string/navigation_view_item_3" />
</group>
<item
android:id="@+id/navigasi_kategori_2"
android:title="@string/navigasi_kategori_2">
<menu>
<item
android:id="@+id/nav_setting"
android:checked="false"
android:icon="@drawable/ic_setting"
android:title="@string/navigation_view_item_4" />
<item
android:id="@+id/nav_about"
android:checked="false"
android:icon="@drawable/ic_about"
android:title="@string/navigation_view_item_5" />
</menu>
</item>
</menu>
Selanjutnya buka file activity_main.xml dan edit kode programnya seperti di bawah ini atau tambahkan yang belum ada.
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="MEMBUAT NAVIGATION DRAWER"
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>
Setelah itu kita buat file xml baru pada bagian res > layout dengan nama layout_header.xml. Setelah itu klik kanan pada bagian layout > New > XML > Layout XML File lalu isi kode programnya seperti di bawah ini.
<?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="@color/warnaUtama"
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/ic_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="kodingindonesia.com"
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="Website Tutorial Masa Kini"
android:textColor="#fff" />
</LinearLayout>
</RelativeLayout>
Selanjutnya ubah MainActivity.xml dengan kode program berikut.
package myusuf.kodingindonesia.com.edittheme;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
private NavigationView mNavigationView; //Baru Ditambahkan
private DrawerLayout mDrawerLayout; //Baru Ditambahkan
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
if(menuItem.isChecked()) menuItem.setChecked(false);
else menuItem.setChecked(true);
mDrawerLayout.closeDrawers();
switch (menuItem.getItemId()){
case R.id.nav_home:
Toast.makeText(getApplicationContext(),"Kalian Memilih HOME", Toast.LENGTH_SHORT).show();
return true;
case R.id.nav_profile:
Toast.makeText(getApplicationContext(),"Kalian Memilih Profile",Toast.LENGTH_SHORT).show();
return true;
case R.id.nav_list:
Toast.makeText(getApplicationContext(),"Kalian Memilih List",Toast.LENGTH_SHORT).show();
return true;
case R.id.nav_setting:
Toast.makeText(getApplicationContext(),"Kalian Memilih Setting",Toast.LENGTH_SHORT).show();
return true;
case R.id.nav_about:
Toast.makeText(getApplicationContext(),"Kalian Memilih About",Toast.LENGTH_SHORT).show();
return true;
default:
Toast.makeText(getApplicationContext(),"Ada Kesalahan ",Toast.LENGTH_SHORT).show();
return true;
}
}
});
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.openDrawer, R.string.closeDrawer){
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
};
mDrawerLayout.setDrawerListener(actionBarDrawerToggle);
actionBarDrawerToggle.syncState();
}
@Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
public boolean onOptionItemSelected(MenuItem item){
int id = item.getItemId();
if (id == R.id.action_settings){
return true;
}
return super.onOptionsItemSelected(item);
}
}
Silahkan klik Next Step di bawah ini untuk melanjutkan belajar.
