Halo para developer, setelah sekian lama tidak membuat postingan akhirnya sempat juga membuat post lagi. Dan kali ini saya akan berbagi cara membuat navigation drawer. Android Studio sudah menyediakan NavigationDrawer activity jadi yang kita akan lakukan adalah custom Navigation Drawer yang sudah tersedia tersebut. Oke Langsung saja kita buka Android Studio nya lalu buat project baru.
Kita tentukan nama aplikasi, domain dan project locationnya. Lalu klik Next
Pilih minimum SDK nya lalu klik Next
Pada bagian ini kita pilih Navigation Drawer Activity dan klik Next dan Klik Next lagi pada bagian berikutnya. Maka akan tampil struktur project nya.
Dari struktur diatas yang akan kita ubah adalah pada bagian content_main.xml, nav_header_main.xml, activity_main_drawer.xml, dan MainActivity.java.
Pertama kita ubah content_main.xml ubah root layoutnya menjadi FrameLayout, karena saya pada saat buat project adalah ConstraintLayout maka akan saya ubah dulu menjadi FrameLayout lalu berikan attribut id sehingga menjadi seperti ini :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.panduseptian.navigationdrawertutorial.MainActivity"
tools:showIn="@layout/app_bar_main">
</FrameLayout>
Setelah selesai maka kita akan pindah ke nav_header_main.xml. Disini kita bisa sesuaikan menu yang akan tampil pada aplikasi yang akan kita buat. Disini saya akan menghapus 2 item pada group item menjadi seperti ini :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
</group>
<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
</menu>
Dan menu sudah selesai kita buat, selanjutnya adalah merubah header dari Navigation Drawer di nav_header_main.xml. Disini saya akan menambahkan library CircleImageView di build.gradle
dependencies {
...
compile 'de.hdodenhof:circleimageview:2.1.0'
}
* Untuk link dari Librarynya disini => https://github.com/hdodenhof/CircleImageView
Lalu kita copy image ke folder drawable dan ubah menjadi seperti ini:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/imageView"
android:layout_width="72dp"
android:layout_height="72dp"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:src="@drawable/profile"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="Pandu Septian"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="pandusg404@gmail.com" />
</LinearLayout>
Oke untuk viewnya sudah selesai, sebelum kita masuk ke MainActivity.java kita buat 2 Fragment yaitu Fragment1 dan Fragment2
Untuk layoutnya kita buat simple saja contohnya :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.panduseptian.navigationdrawertutorial.Fragment2">
<!-- TODO: Update blank fragment layout -->
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Fragment 2" />
</FrameLayout>
Oke sekarang kita buka MainActivity.java
Kita tambahkan script berikut pada onCreate :
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.root_layout, new Fragment1());
fragmentTransaction.commit();
Lalu pada onNavigationItemSelected kita tambahkan script berikut :
int id = item.getItemId();
switch (id){
case R.id.nav_camera:
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.root_layout, new Fragment1());
fragmentTransaction.commit();
break;
case R.id.nav_gallery:
FragmentTransaction fragmentTransaction1 = getSupportFragmentManager().beginTransaction();
fragmentTransaction1.replace(R.id.root_layout, new Fragment2());
fragmentTransaction1.commit();
break;
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
Sehingga menjadi seperti ini :
package com.panduseptian.navigationdrawertutorial;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.root_layout, new Fragment1());
fragmentTransaction.commit();
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
switch (id){
case R.id.nav_camera:
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.root_layout, new Fragment1());
fragmentTransaction.commit();
break;
case R.id.nav_gallery:
FragmentTransaction fragmentTransaction1 = getSupportFragmentManager().beginTransaction();
fragmentTransaction1.replace(R.id.root_layout, new Fragment2());
fragmentTransaction1.commit();
break;
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
}
Oke sekarang kita build dan run ke HP android kita dan hasilnya seperti ini :
Cukup sekian tutorial singkatnya, semoga bermanfaat buat teman-teman developer semua.
