(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 :)

Share this :