Kompetensi dan Indikator
Kompetensi Dasar:
- Mengetahui cara membuat Fragment
- Mengetahui implementasi Fragment
Indikator:
- Mahasiswa mampu membuat fragment dan mengimplementasikan ke dalam activity
Materi
A Dasar Teori
Fragment merupakan bagian dari User Interface aplikasi yang dapat diletakkan atau dimasukkan di dalam activity. Interaksi dengan Fragment dapat dilakukan dengan menggunakan FragmentManager melalui Activity.getFragmentManager() dan Fragment.getFragmentManager(). Sebuah fragment dapat menyajikan serangkaian operasi atau user interface yang berjalan di dalam activity. Fragment berbeda dengan activity. Pada prinsipnya, sebuah fragment diikat bersama dengan activity dan tidak dapat dipisahkan dengannya.
Fragment dapat digunakan sebagai bagian dari layout aplikasi yang mengijinkan pengembang untuk melakukan modulasi kode dan memberikan kemudahan dalam mengatur tampilan user interface ketika aplikasi dijalankan. ciri-ciri sebuah activity adalah ada umumnya activity akan meng-extends AppCompatActivity sedangkan fragment meng-extends Fragment
[code]
B Aplikasi Navigation Drawer
Materi dalam modul ini akan memanfaatkan salah satu template activity yang telah disediakan oleh Android Studio yaitu Navigation Drawer. Pertama buatlah sebuah projek baru dengan nama "My Fragment". Untuk minimum API nya pilih yang API19 (KitKat). Selanjutnya pilih activity "NavigationDrawer" untuk ditambahkan ke dalam projek aplikasi seperti gambar dibawah, lalu OK.
Apabila menggunakan activity NavigationDrawer, maka kita akan dibuatkan beberapa file resource. Lihat diproject structure :
- a. Res/drawable
Berisi icon dan image yang digunakan dalam menu Navigation Drawer.
- b. Res/layout
Berisi file layout yang digunakan di dalam Navigation Drawer. Terdapat 4 file layout yang kita dapatkan secara otomatis diantaranya: activity_ main.xml, app_bar_main.xrnl, content_main.xml dan nav_header.xrnl.
Activity_main.xml : meletakkan drawer dan menginisiasi menu ke dalam drawer serta meng-include app_bar_ main.xml.
App_bar_main.xml : meletakkan appbar / toolbar dan floting action button serta meng-include layout content_main.
Content_main.xml : meletakkan layout untuk konten user interface aplikasi. Nav_header_main_xml : meletakkan komponen yang digunakan sebagai header navigation drawer seperti image drawer dll. - c. Res/menu
Berisi file yang digunakan untuk mendeskripsikan menu-menu yang digunakan aplikasi. Seperti pada activity_main_drawer.xml yang berisi semua menu yang dipakai di dalam navigation drawer dan pada main.xml berisi menu yang dipakai dalam options menu.
- d . Res/values
Berisi file colors, dimens, drawables, strings dan styles yang semuanya dipakai dan dipanggil di dalam layout.
Selain itu, apabila kita membuka file Main Activity.java maka di dalamnya terdapat beberapa method tambahan seperti onOptionsltemSelected() untuk menangani options menu, onCreateOptionsMenu() untuk meng-inflate menu main , onNavigationltemSelected() untuk menangani menu navigation drawer dan onBackPressed() untuk mengubah bahaviour tombol back device agar tidak secara langsungkeluar dari aplikasi apabila menu drawer sedang dibuka. Jalankan aplikasi dan berikut adalah hasil running awal dari aplikasi Navigation Drawer.
C Membuat Fragment
Satu hal yang perlu diperhatikan ketika menggunakan Navigation Drawer adalah bahwa Navigation Drawer merupakan sebuah activity, kemudian didalam navigation drawer terdapat beberapa menu yang apabila di-klik akan membuka halaman (activity) lain di dalam activity navigation drawer. Terdapat sebuah aturan bahwa kita tidak dapat membuka activity di dalam activity. Sehingga solusinya adalah menggunakan Fragment.
- Pilih menu file ➜ new ➜ fragment ➜ blank fragment
- Lengkapi Fragment Name dan fragment layout name, check pada Create layout XML dan uncheck pada include fragment factory methods serta include interface callbacks.
- Klik Finish.
- Dalam materi ini, buatlah 2 fragment dengan nama Fragment1 dan Fragment2. Hasilnya adalah sbb :
D Menerapkan Fragment Ke Dalam Activity
- Terlebih dahulu atur desain User Interface dari layout fragment1. Letaknya di dalam file res/layout/fragment_fraghmentl.xml. Fragment1 ini akan digunakan sebagai halaman kontrol. Kode nya adalah sebagai berikut :
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Pindah ke fragment 2" android:background="@color/colorPrimary" android:textColor="@android:color/white" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:onClick="panggilFr" android:id="@+id/btnFr"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Pindah ke Activity 2" android:background="@color/colorPrimary" android:textColor="@android:color/white" android:id="@+id/btnAct" android:onClick="panggilAct" android:layout_marginTop="10dp" android:layout_below="@+id/btnFr" android:layout_centerHorizontal="true"/>
- Selanjutnya pada file content_main.xml tambahkan nested layout berupa Frame Layout dengan id = @+id/fillcontent, sbb :
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fillcontent"> </FrameLayout>
- Buka file MainActivity.java dan tambahkan method baru untuk load fragment1.
public void loadFragment1() { Fraghment1 f1 = new Fraghment1(); FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); ft.replace(R.id.fillContent, f1); ft.commit(); }
- Dan di dalam method onCreater() tambahkan kode berikut
loadFragrmentl(); - Jalankan aplikasi
E Berpindah ke Fragment dan Activity
Pada saat ini konten halaman yang ditampilkan pada aplikasi adalah berupa fragment. Di dalam halaman tersebut terdapat 2 buah button untuk berpindah dari fragmentl ke fragment2 dan dari fragmentl ke activity2. Berikut adalah langkah membuat handler untuk kedua button tersebut :
- Terlebih dahulu buatlah sebuah activity baru dengan nama "SecondActivity"
- Kemudian pada file Fragment.java tambahkan kode berikut di dalam method onCreate() :
//BERPINDAH DARI FRAGMENT KE FRAGMENT Button pindahFr=(Button) view.findViewById(R.id.btnFr); pindahFr.setOnClickListener (new View.OnClickListener(){ @Override public void onClick(View v){ Fragment fr2 =new Fraghment2(); getFragmentManager().beginTransaction().replace(R.id.fillContent, fr2).addToBackStack(null) .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN).commit(); } }); //BERPINDAH DARI FRAGMENT KE ACTIVITY Button pindahAct = (Button) view.findViewById(R.id.btnAct); pindahAct.setOnClickListener((new View.OnClickListener(){ @Override public void onClick(View v){ Intent intent = new Intent(getActivity(), Main2Activity.class); gerActivity().startActivity(intent); } }));
- Jalankan aplikasi