(Tutorial Android) Membuat Navigation Drawer dengan Navigation View Android Material Design


Navigation View merupakan komponen yang terdapat dalam package Design Support Library. Navigation View memberikan kemudahan dalam mengimplementasikan material navigation drawer ke aplikasi android kita.


Beberapa parameter yang ada di Navigation View diantaranya :

app:menu : list of navigation drawer items
app:headerLayout : Adds a View as a header of the navigation menu, we can put any custom views app:itemBackground: Allow to set background to drawer items
app:itemIconTint: Change drawer item’s icon color
app:itemTextColor: Allow to change drawer item’s text color.

Sekarang, kita akan mulai mengimplementasikan Navigation Drawer menggunakan Navigation View.

Sebelum itu, tambahkan dulu library dependencies Design Support Library di build.gradle


Buat menu untuk navigasi dan letakkan di folder resource menu.

drawer_menu.xml



Setelah itu kita akan membuat header untuk menu navigasinya.

drawer_header.xml



Buat 5 buah layout untuk fragment dimana layout ini merupakan layout dari menu-menu di navigation drawer.

fragment_home.xml


fragment_friend.xml


fragment_gallery.xml


fragment_event.xml


fragment_setting.xml


Buka activity_main.xml kemudian editlah dengan code berikut. Di activity_main.xml ini terdapat komponen drawerLayout, Toolbar dan NavigationView. Kita bisa mengedit ataupun memodifikasi mulai dari background maupun warna text dari NavigationView disini.

activity_main.xml


Sampai disini kita telah menyelesaikan layoutnya. Sekarang kita akan membuat activity dan fragment untuk menampilkannya. Pertama buat activity berikut :

BaseActivity.java
BaseActivity disini sebagai super class activity.
package com.example.wim.androidnavigationdrawer;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
/**
* Created by Wim on 3/4/16.
*/
public class BaseActivity extends AppCompatActivity {

Toolbar toolbar;
@Override

public void setContentView(int layoutResID) {
super.setContentView(layoutResID);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setupToolbar();
}

protected void setupToolbar() {
if (toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
}

public Toolbar getToolbar() {
return toolbar;
}
}

Kemudian buat fragment-fragment untuk setiap menu navigasi.
HomeFragment.java
package com.example.wim.androidnavigationdrawer.fragments;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.wim.androidnavigationdrawer.R;
/**
* Created by Wim on 3/4/16.
*/
public class HomeFragment extends Fragment {

public static HomeFragment newInstance(){
return new HomeFragment();
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_home, container, false);
return rootView;
}

}

FriendFragment.java
package com.example.wim.androidnavigationdrawer.fragments;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.wim.androidnavigationdrawer.R;
/**
* Created by docotel on 3/4/16.
*/
public class FriendFragment extends Fragment {

public static FriendFragment newInstance(){
return new FriendFragment();
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_friend, container, false);
return rootView;
}
}

GalleryFragment.java
package com.example.wim.androidnavigationdrawer.fragments;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.wim.androidnavigationdrawer.R;
/**
* Created by docotel on 3/4/16.
*/
public class GalleryFragment extends Fragment {

public static GalleryFragment newInstance(){
return new GalleryFragment();
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_gallery, container, false);
return rootView;
}
}

EventFragment.java
package com.example.wim.androidnavigationdrawer.fragments;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.wim.androidnavigationdrawer.R;
/**
* Created by docotel on 3/4/16.
*/
public class EventFragment extends Fragment {

public static EventFragment newInstance(){
return new EventFragment();
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_event, container, false);
return rootView;
}
}

SettingFragment.java
package com.example.wim.androidnavigationdrawer.fragments;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.wim.androidnavigationdrawer.R;
/**
* Created by docotel on 3/4/16.
*/
public class SettingFragment extends Fragment {

public static SettingFragment newInstance(){
return new SettingFragment();
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_setting, container, false);
return rootView;
}
}

Terakhir kita akan mengimplementasikan navigation view yang kita buat di kelas MainActivity.

MainActivity.java
package com.example.wim.androidnavigationdrawer;
import android.content.res.Configuration;
import android.support.design.widget.NavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.MenuItem;
import android.widget.Toast;
import com.example.wim.androidnavigationdrawer.fragments.EventFragment;
import com.example.wim.androidnavigationdrawer.fragments.FriendFragment;
import com.example.wim.androidnavigationdrawer.fragments.GalleryFragment;
import com.example.wim.androidnavigationdrawer.fragments.HomeFragment;
import com.example.wim.androidnavigationdrawer.fragments.SettingFragment;

public class MainActivity extends BaseActivity {

private NavigationView navigationView;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle actionBarDrawerToggle;

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

navigationView = (NavigationView) findViewById(R.id.navigation);
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

setupDrawerContent(navigationView);
actionBarDrawerToggle = setupDrawerToggle();
drawerLayout.setDrawerListener(actionBarDrawerToggle);
selectDrawerItem(navigationView.getMenu().getItem(0));
}

private void setupDrawerContent(final NavigationView navigationView) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
selectDrawerItem(menuItem);
Toast.makeText(MainActivity.this, menuItem.getTitle(), Toast.LENGTH_SHORT).show();
return true;
}
});
}

private ActionBarDrawerToggle setupDrawerToggle() {
return new ActionBarDrawerToggle(this, drawerLayout, getToolbar(), R.string.drawer_open, R.string.drawer_close);
}

public void selectDrawerItem(MenuItem menuItem) {
Fragment fragment = null;

switch (menuItem.getItemId()) {
case R.id.menu_home:
fragment = HomeFragment.newInstance();
break;
case R.id.menu_friend:
fragment = FriendFragment.newInstance();
break;
case R.id.menu_gallery:
fragment = GalleryFragment.newInstance();
break;
case R.id.menu_event:
fragment = EventFragment.newInstance();
break;
case R.id.menu_setting:
fragment = SettingFragment.newInstance();
break;
default:
fragment = HomeFragment.newInstance();
break;
}

FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit();
menuItem.setChecked(true);

getToolbar().setTitle(menuItem.getTitle());
drawerLayout.closeDrawers();
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
actionBarDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Pass any configuration change to the drawer toggles
actionBarDrawerToggle.onConfigurationChanged(newConfig);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}

@Override
protected void onDestroy() {
this.finish();
super.onDestroy();
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
//Ask the user if they want to quit
this.finish();
return true;
}

@Override
public void onBackPressed() {
this.finish();
super.onBackPressed();
}
}


Deploy dan jalankan, maka hasilnya seperti di bawah ini.



Abaikan gambar di atas *sory TS ngidol :v

Source code lengkap dapat dilihat di https://github.com/wimsonevel/AndroidNavigationDrawer

Sekian dan semoga bermanfaat
Happy Coding :)

Berlangganan update artikel terbaru via email: