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

Friday, March 04, 2016

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 :

Previous
Next Post »
5 Komentar
avatar

min kalo ini download ga ?? Sebelum itu, tambahkan dulu library dependencies Design Support Library di build.gradle
nah terus build.gradle letak nya dimana?? maaf saya newbie .. saya pake eclipse..

Balas
avatar

kalau ane pake Android Studio gan, jadi ada build.gradle nya, jadi memudah untuk menambahkan library yg dipakai secara otomatis,, kalau ecilpse gak ada gan, nambahin library caranya manual gan yaitu agan harus download dulu versi .jar nya baru dimasukin.. saran ane sih pindah ke Android Studio aja gan...

Balas
avatar

kalo menambahkan edit text di salah satu layout menu gimana ya? kalo text view muncul kalo edit text gak muncul..solusinya min

Balas
avatar

min cara buat baseactivity gmn? terus main activitynya kok bisa extend ke baseactivity gmn caranya?

Balas
This comment has been removed by the author. - Hapus

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔