Selamat siang semua, pada kesempatan kali saya akan share tentang cara membuat navbar drawer yang langsung berisi itemnya. Penggunaan navbar drawer ini sangat penting nantinya jika kite mendevelop aplikasi yang banyak berisi menu.
Sebelum lanjut kalian mengikuti tutorial ini, silakan kalian buat project baru pada templatenya pilih navbar drawer. Silakan kalian sediakan kopi supaya lebih fokus atau sebatang rokok supaya tidak bosan.
Bagi kalian yang bingung kita mau buat apa, silakan liat screenshoot di bawah ini:
1# Silakan buka android studio dan pilih templatenya navbar drawer, untuk sdk silakan sesuaikan sendiri. Seperti ini tampilannya di android studio saya.
2# Silakan hapus textview dan button yang icon email.
setelah kalian delete tombolnya itu, masuk ke MainActivity.java untu menghapus function yang secara default disediakan untuk tombol itu. Agar tidak terjadi error karena tombolnya sudah kita hapus.
3# Pada langkah ini kita akan membuatkan item-item untuk menu navbarnya. Silakan klik layout->activity_main.xml, maka tampilannya akan seperti dibawah ini.
Untuk mengubah item-item itu masuk ke res->activity_main_drawer.xml masuk ke mode text, kemudian masukkan sintaks seperti di bawah 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_webview"
android:title="Web View" />
<item
android:id="@+id/nav_menu1"
android:title="Menu 1" />
<item
android:id="@+id/nav_menu2"
android:title="Menu 2" />
</group>
</menu>
4# Pada langkah ini, silakan kalian masuk ke MainActivity.java. Sebenarnya secara default sudah disediakan sintaks untuk menghandle fragment yang akan dibuka saat menu di klik menggunakan if, namun disini kita akan menggunakan switch case. Silakan kalian cari sintaks seperti dibawah ini:
ganti functionnya dengan sintaks seperti di bawah ini:
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
Fragment fragment = null;
switch (id){
case R.id.nav_webview:
fragment = new Webview();
break;
case R.id.nav_menu1:
fragment = new Menu1();
break;
case R.id.nav_menu2:
fragment = new Menu2();
break;
}
if (fragment != null){
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.replace(R.id.content_frame, fragment);
ft.commit();
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
Pada tahap ini pasti ada error pada sintaks tersebut. Itu disebabkan karena kita belum membuatkan class-classnya, jadi kalian abaikan saja errornya.
5# Masuk res->layout->content_main.xml, disini kita akan menambahkan frame layout untuk menaruh fragmentnya. Tambahkan sintaks frame sehingga sintaks fullnya seperti dibawah ini:
6# Sekarang kita akan membuat layout untuk webview silakan klik kanan pada layout->new->layout resource file. dan berina webview. Masuk ke mode text, kemudian pastekan sintaks dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.maninback.balidev.MainActivity"
tools:showIn="@layout/app_bar_main">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
7# Barusakan kita sudah membuat layout untuk webview sekarang kita buatkan class untuk menghandlenya. Pada packages projects kalian silakan klik kanan->new ->java class.
beri nama Webview sesuaikan dengan nama yang kita buat di MainActivity.java yang tadi pada switch case. Pada Webview.java sintaksnya seperti di bawah ini:
public class Webview extends Fragment {
View v;
WebView myWeb;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
//menambahkan layout
v =inflater.inflate(R.layout.webview, container, false);
//disini kita tambahkan webview
myWeb = (WebView)v.findViewById(R.id.webview);
myWeb.loadUrl("http://www.balidev.top/");
//enable javascript pada web
WebSettings webset = myWeb.getSettings();
webset.setJavaScriptEnabled(true);
//redirect link
myWeb.setWebViewClient(new WebViewClient());
return v;
}
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
//you can set the title for your toolbar here for different fragments different titles
getActivity().setTitle("Web View");
}
}
8# Lakukan hal yang sama untuk Menu 1 dan Menu 2, buatlah layout sesuai dengan keperluan kalian, kemudian buatkan file javanya jangan lupa namanya harus sesuai dengan yang ada di MainActivity.java
Note:
v =inflater.inflate(R.layout.webview, container, false);Karena kita membuat WebView silakan tambahkan internet permission pada AndroidManifest.
Baca juga artikel lainnya:
- Androdi Studio : Cara Membuat Aplikasi SMS yang simple
- Android Studio : Cara Membuat Aplikasi Calling Sederhana
- Android Studio : Menampilkan website atau blog kalian di aplikasi android buatan sendiri
- Android Studio : Mengganti Icon Aplikasi yang akan dibuat
