(Tutorial Android) Menciptakan Navigation Drawer Dengan Navigation View Android Material Design


Navigation View merupakan komponen yang terdapat dalam package Design Support Library. Navigation View menunjukkan fasilitas 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 memakai Navigation View.

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


Buat sajian untuk navigasi dan letakkan di folder resource menu.

drawer_menu.xml



Setelah itu kita akan menciptakan header untuk sajian 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 lalu editlah dengan code berikut. Di activity_main.xml ini terdapat komponen drawerLayout, Toolbar dan NavigationView. Kita sanggup mengedit ataupun memodifikasi mulai dari background maupun warna text dari NavigationView disini.

activity_main.xml


Sampai disini kita telah menuntaskan layoutnya. Sekarang kita akan menciptakan 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 sajian 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 kesannya menyerupai di bawah ini.



Abaikan gambar di atas *sory TS ngidol :v

Source code lengkap sanggup dilihat di https://github.com/andronut/AndroidNavigationDrawer

Sekian dan supaya bermanfaat
Happy Coding :)

Comments

Post a Comment

Popular posts from this blog

Pewarnaan Objek Geometri Di Java 2D

Image
Pewarnaan (filling) sanggup diterapkan ke dalam pembuatan objek geometri. Objek geometri sanggup digambar dengan method fill atau draw . Untuk menambahkan warna pada objek geometri, kita sanggup menambahkan method dari kelas Graphics. void setColor(Color c)  Objek Color didefinisikan sebagai sebuah warna. Kelas Color secara default memakai rentan warna RGB. Berikut ini yaitu pola penggunaan Color di Java 2D. /** * * @author Wim Sonevel */ import java.awt.*; import java.awt.geom.*; import javax.swing.*; public class SegiPanjangWarna extends JApplet { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setTitle("Persegi Panjang Warna"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new SegiPanjangWarna(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } @Override public void init() { JPan...
Read more

Tugas Komplemen Terakhir

(Ainun Najib) 1. Buat sebuah aplikasi berbasis GUI untuk registrasi siswa gres : - hitung nilai tes untuk mata pelajaran tertentu dan jikalau rata-rata <  70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Moh. Fachrudin) 2. Buat sebuah aplikasi berbasis GUI untuk registrasi musyrif gres : - hitung nilai tes b.arab, b.ing, Afkar, dan Al-Quran dan jikalau rata - rata < 70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Aulia) 3. Buat sebuah aplikasi berbasis GUI untuk menghitung nilai selesai suatu matakuliah dan berikan nilai huruf.    - Rumus nilai selesai = kiprah 20% + uts 30% + uas 50 %    - Berikan nilai karakter :       46-55 Nilai C         56-65 Nilai C+  ...
Read more

Konsep Oop Encapsulation

Image
Encapsulation biasa disebut dengan Information Hidding. Encapsulation merupakan kombinasi dari data dan method pada paket suatu kelas dan menyembunyikan implementasi detail dari user terhadap object. Hak jalan masuk diatur dalam sebuah access modifier yang diantaranya yakni : - private : hanya sanggup diakses oleh kelas itu sendiri - protected : hanya sanggup diakses dalam package dan kelas turunannya - public : sanggup diakses dimanapun - default : hanya sanggup diakses dalam package saja Manfaat dari encapsulation : - Modularitas : Source code dari sebuah class sanggup dikelola secara independen dari source code class yang lain. Perubahan internal pada sebuah class tidak akan besar lengan berkuasa bagi class yang menggunakannya. - Information Hiding : Penyembunyian gosip yang tidak perlu diketahui objek lain. Untuk mengakses gosip sanggup memakai mediator method yang dikenal dengan setter dan getter. Sebagai contoh, buatlah 3 kelas masing-masing di package yang berbed...
Read more