Pertama buka file colors.xml, disini atur warna dari aplikasi sesuai selera, seperti ini kodenya
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#4183D7</color>
<color name="colorPrimaryDark">#446CB3</color>
<color name="textColorPrimary">#fff7fefc</color>
<color name="windowBackground">#FFFFFF</color>
<color name="colorAccent">#4183D7</color>
</resources>
Kedua buka file styles.xml, disini saya mengatur tema di aplikasi saya, agar compatible dengan versi android dibawah 5.0 atau lolipop saya menggunakan Appcompat. Seperti ini kode nya
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
Ketiga buka file strings.xml, nah disini atur semua menu yang akan ditampilkan di navigation drawer nanti nya, seperti ini kodenya
<resources>
<string name="app_name">EXAMPLE</string>
<string name="home">Home</string>
<string name="setting">Settings</string>
<string name="help">Help</string>
<string name="logout">Logout</string>
<string name="search">Search</string>
<string-array name="nav_drawer_items">
<item>@string/home</item>
<item>@string/setting</item>
<item>@string/logout</item>
</string-array>
<array name="nav_drawer_icons">
<item>fa_home</item>
<item>fa_gears</item>
<item>fa_sign_out</item>
</array>
</resources>
Keempat, setelah selesai semua selanjutnya adalah atur toolbar atau menu atas aplikasi, buat file toolbar.xml di bawah folder res->layout, seperti ini kode nya
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
Setelah selesai dengan toolbar sekarang kita membuat navigation drawer nya, buat file dengan nama nav_drawer_head.xml (nama file yang lain juga bisa, sesuai selera) disini kita atur bagian atas navigation drawer yang biasanya digunakan untuk menampilkan profile, begini kode nya
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<RelativeLayout
android:id="@+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="@color/colorPrimary">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/ic_profile"
android:scaleType="fitCenter"
android:layout_centerInParent="true" />
</RelativeLayout>
</RelativeLayout>
Setelah itu sekarang layout untuk main activity nya, disini saya mengatur navigation view, drawer layout dan toolbar, seperti ini kodenya
<?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="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>
<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/fragment_navigation_drawer"
app:menu="@menu/drawer">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
</FrameLayout>
</LinearLayout>
Nah untuk layout selesai selanjutnya bagian akhir mari kita ke java nya, disini saya menggunakan library bernama Butterknife yang berfungsi untuk memanggil view seperti text view dan lain lain baca disini Butterknife, langsung saja seperti ini kodenya hehe,
package com.example.drawer.activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.app.SearchManager;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import com.joanzapata.iconify.IconDrawable;
import com.joanzapata.iconify.fonts.FontAwesomeIcons;
import com.meruvian.droidsigner.R;
import com.meruvian.droidsigner.content.adapter.DocumentAdapter;
import com.meruvian.droidsigner.content.adapter.DocumentDownloadedDatabaseAdapter;
import com.meruvian.droidsigner.fragment.ListSignedDocumentFragment;
import com.meruvian.droidsigner.utils.AuthenticationUtils;
import butterknife.Bind;
import butterknife.ButterKnife;
/**
* Created by root on 8/12/15.
*/
public class MainActivity extends AppCompatActivity {
@Bind(R.id.toolbar) Toolbar mToolbar;
@Bind(R.id.drawer_layout) DrawerLayout drawerLayout;
@Bind(R.id.nav_view) NavigationView navigationView;
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
ButterKnife.bind(this);
setSupportActionBar(mToolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
setupNavigationDrawer();
}
@Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.actions, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
drawerLayout.openDrawer(GravityCompat.START);
}
if (item.getTitle() == null) {
return true;
}
if (item.getTitle().equals(R.string.logout)) {
onClickLogout();
}
if (item.getTitle().equals(R.string.home)) {
getFragmentManager().popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE);
drawerLayout.closeDrawer(GravityCompat.END);
}
return true;
}
public void setupNavigationDrawer() {
String[] drawerItems = getResources().getStringArray(R.array.nav_drawer_items);
String[] drawerIcons = getResources().getStringArray(R.array.nav_drawer_icons);
int i = 0;
for (String title : drawerItems) {
MenuItem item = navigationView.getMenu().add(title);
item.setIcon(new IconDrawable(this, FontAwesomeIcons.valueOf(drawerIcons[i])));
i++;
}
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
if (menuItem.isChecked()) {
menuItem.setChecked(false);
} else {
menuItem.setChecked(true);
}
return onOptionsItemSelected(menuItem);
}
});
drawerLayout.closeDrawers();
}
}
Disini saya sengaja tidak menampilkan screenshot ceritanya biar penasaran hehe
Terima kasih sudah membaca, semoga bermanfaat
Post a Comment