Teori

1. Fragment merupakan komponen yang memiliki fungsi untuk menampilkan

antarmuka ke pengguna melalui activity dengan memiliki layout xml sendiri.
2. Fragment memiliki daur hidup sendiri dan bergantung penuh pada daur hidup
activity dimana ia ditanamkan.
3. Fragment digunakan agar komponen tampillan aplikasi menjadi fleksibel dan
dapat digunakan kembali (reusable).
4. Satu activity bisa memiliki lebih dari satu fragment.
5. Tidak seperti activity, fragment tidak perlu didaftarkan ke dalam
file AndroidManifest.xml.
6. Satu kelas Java dinyatakan sebagai sebuah fragment ketika kelas tersebut meng-
extends (inherit) kelas Fragment.
7. Melalui Android Support Library, fragment bersifat kompatibel sampai Android api
level 10 Gingerbread.
8. Analogi yang mendekati fragment pada platform lain adalah penggunaan
komponen iframe pada aplikasi berbasis web.

Fragment LifeCycle

Ada beberapa state yang perlu kita ketahui sebelum menggunakan fragment.

 Resumed
Fragment bisa dilihat ketika activity sedang berjalan.
 Paused
Ketika ada activity lain yang menutupi sebagian dari activity dimana fragment
ditambahkan. Yang dimaksud menutupi sebagian adalah ketika activity-nya tidak
tertutup sepenuhnya oleh activity lain. Jadi masih ada bagian dari activity yang
masih bisa bisa dilihat di layar.
 Stopped
Ketika fragment tidak kelihatan di layar. Bisa jadi karena activity dimana fragment
itu ditambahkan berhenti atau bahkan fragment itu sendiri sudah dihapus dari
activity. Pada kondisi ini fragment masih hidup dengan semua informasinya.
Akan tetapi sudah tidak kelihatan di layar dan akan dihancurkan.

Skema di bawah ini menunjukkan callback method apa saja yang akan dipanggil di
dalam fragment ketika terjadi perubahan pada sebuah activity.
Skema di atas menunjukkan bahwa perubahan state dari sebuah activity akan
mempengaruhi life cycledari sebuah fragment. Ini karena fragment merupakan
komponen view yang bisa ditambahkan (embed) ke dalam activity.

Untuk tahu lebih detail tentang fragment silakan kamu pahami baik-baik materi di link
ini:
  Fragments

Tujuan

Agar Anda dapat lebih memahami topik fragment, akan ada beberapa codelab yang
akan Anda lakukan.

1. Membuat tampilan fleksibel dengan fragment.

2. Membuat tampilan yang dapat digeser-geser.
3. Membuat tampilan yang dapat disesuaikan dengan perubahan orientasi device.
Codelab pada kali ini akan menghasilkan aplikasi seperti ini :
Logika Dasar

Melakukan klik ke button → memanggil fragment atau aktivity dengan atau tanpa data
→ menampilkan activity atau fragment yang dituju

Codelab

1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:

Nama Project MyFlexibleFragment

Target & Minimum Target SDK Phone and Tablet, Api level 21
Tipe Activity Empty Activity
Activity Name MainActivity

2.
3. Pada activity_main.xml, silakan kondisikan kode pada berkas tersebut menjadi
seperti berikut :

1. <?xml version="1.0" encoding="utf-8"?>

2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:id="@+id/frame_container"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent"
7. tools:context="com.dicoding.picodiploma.myflexiblefragment.MainActiv
ity" />

4. Kemudian kita buat beberapa fragment untuk mengimplementasikan

perpindahan tampilan tanpa perpindahan activity. Pertama kita
buat Fragment dengan nama HomeFragment. Caranya : klik kanan pada
package utama pada proyek aplikasi Anda
 → New → Fragment → Fragment (Blank).

5. Setelah tampil dialog untuk fragment, isikan HomeFragment pada

kolom Fragment Name dan uncheck untuk kedua pilihan (Include fragment
factory methods dan include interface callbacks) seperti gambar di bawah ini.
 Klik Finish untuk melanjutkan penciptaan fragment.

6. Setelah HomeFragment tercipta, pada fragment_home.xml mari sesuaikan

tampilannya dengan menambahkan sebuah obyek TextView dan sebuah
obyek Button seperti berikut :

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:orientation="vertical"
6. tools:context="com.dicoding.picodiploma.myflexiblefragment.HomeFragm
ent">
7.
8. <TextView
9. android:layout_width="match_parent"
10. android:layout_height="wrap_content"
11. android:layout_marginBottom="@dimen/activity_vertical_margin"
12. android:layout_marginLeft="@dimen/activity_horizontal_margin"
13. android:layout_marginRight="@dimen/activity_horizontal_margin"
14. android:layout_marginTop="@dimen/activity_vertical_margin"
 15. android:text="@string/hello_home_fragment" />
16.
17. <Button
18. android:id="@+id/btn_category"
19. android:layout_width="match_parent"
20. android:layout_height="wrap_content"
21. android:layout_marginLeft="@dimen/activity_horizontal_margin"
22. android:layout_marginRight="@dimen/activity_horizontal_margin"
23. android:text="@string/to_category" />
24. </LinearLayout>

Akan ada yang eror pada bagian android:text .Seperti pada modul sebelumnya
kita perlu menambahkan resource string-nya.

Tambahkan beberapa baris kode di bawah ini di dalam res → values →

strings.xml.

25. <resources>
26. <string name="app_name">MyFlexibleFragment</string>
27.
28. <string name="hello_blank_fragment">Hello blank fragment</string>
29. <string name="this_profile">Ini activity Profile</string>
30. <string name="this_category">Ini fragment Category</string>
31. <string name="category_lifestyle">Ke fragment Lifestyle</string>
32. <string name="category_name">Category Name</string>
33. <string name="category_description">Category Description</string>
34. <string name="to_profile">Ke Halaman Profile Activity</string>
35. <string name="show_dialog">Tampilkan sebuah dialog</string>
36. <string name="hello_home_fragment">Hello Ini Home Fragment</string>
37. <string name="to_category">Ke fragment Category</string>
38. <string name="question_coach">Siapa pelatih tersukses Machester Unit
ed?</string>
39. <string name="sir_alex_ferguson">Sir Alex Ferguson</string>
40. <string name="jose_mourinho">Jose Mourinho</string>
41. <string name="louis_van_gaal">Louis Van Gaal</string>
42. <string name="david_moyes">David Moyes</string>
43. <string name="choose">Pilih</string>
44. <string name="close">Tutup</string>
45. </resources>
 Resource string ini akan kita gunakan selama latihan fragment.
Jangan lupa untuk menambahkan berkas dimens.xml secara manual di
dalam res → values. Dan isikan berkas dimens.xml seperti berikut.

46. <resources>
47. <!-- Default screen margins, per the Android Design guidelines. -->
48. <dimen name="activity_horizontal_margin">16dp</dimen>
49. <dimen name="activity_vertical_margin">16dp</dimen>
50. </resources>
7. Pada HomeFragment.java lakukan penyesuaian kode sebagai berikut:

1. public class HomeFragment extends Fragment implements View.OnClickListen

er {
2.
3. ...
4.
5. @Override
6. public void onViewCreated(@NonNull View view, @Nullable Bundle saved
InstanceState) {
7. super.onViewCreated(view, savedInstanceState);
8. Button btnCategory = view.findViewById(R.id.btn_category);
9. btnCategory.setOnClickListener(this);
10. }
11.
12. @Override
13. public void onClick(View v) {
14.
15. }
16. }

Di sini kita juga siapkan kode listener onclick. Listener di sini akan kita gunakan
pada latihan berikutnya.

8. Selanjutnya, pada MainActivity.java, kita tanamkan HomeFragment ke dalam

activity tersebut sehingga bisa tampil ke layar pengguna dengan menambahkan
beberapa baris berikut:

1. ...
2.
3. @Override
4. protected void onCreate(Bundle savedInstanceState) {
5. super.onCreate(savedInstanceState);
6. setContentView(R.layout.activity_main);
7.
8. FragmentManager mFragmentManager = getSupportFragmentManager();
9. FragmentTransaction mFragmentTransaction = mFragmentManager.beginTra
nsaction();
10. HomeFragment mHomeFragment = new HomeFragment();
11.
 12. Fragment fragment = mFragmentManager.findFragmentByTag(HomeFragment.
class.getSimpleName());
13. if (!(fragment instanceof HomeFragment)) {
14. mFragmentTransaction.add(R.id.frame_container, mHomeFragment, Ho
meFragment.class.getSimpleName());
15. Log.d("MyFlexibleFragment", "Fragment Name :" + HomeFragment.cla
ss.getSimpleName());
16. mFragmentTransaction.commit();
17. }
18. }
19.
20. ...

Untuk mengatasi tanda merah pada class, jangan lupa untuk tekan (Alt + Enter)
untuk import kelas secara otomatis. Beberapa package yang seharusnya di-
import adalah seperti di bawah ini.

21. import android.os.Bundle;

22. import android.support.v4.app.Fragment;
23. import android.support.v4.app.FragmentManager;
24. import android.support.v4.app.FragmentTransaction;
25. import android.support.v7.app.AppCompatActivity;
9. Setelah selesai semua, silakan jalankan aplikasi Anda. Seperti ini tampilannya.
 Ketika dijalankan, aplikasi akan menampilkan satu teks dan satu button yang
mana kedua komponen tersebut dimiliki oleh HomeFragment.

Bedah Kode

FrameLayout

1. <?xml version="1.0" encoding="utf-8"?>

2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. tools:context="com.dicoding.associate.myflexiblefragment.MainActivity"
7. android:id="@+id/frame_container">
8. </FrameLayout>

FrameLayout memiliki sifat sebagai berikut: semua komponen view di

dalam FrameLayout bersifat menumpuk. Bila pada suatu hirarki FrameLayout terdapat
satu view dengan posisi teratas, maka view tersebut akan menjadi alas untuk view di
atasnya. Gambarannya sebagai berikut:

Dengan karakteristik seperti ini, FrameLayout merupakan sebuah layout yang paling
optimal dalam proses manipulasi penampilan obyek fragment ke layar pengguna.

OnCreateView

Pada HomeFragment.java terdapat metode onCreateView() di mana layout interface

didefinisikan dan ditransformasikan dari layout berupa file xml ke dalam obyek view
dengan menggunakan metode inflate().
 1. @Override
2. public View onCreateView(LayoutInflater inflater, ViewGroup container,
3. Bundle savedInstanceState) {
4. // Inflate the layout for this fragment
5. return inflater.inflate(R.layout.fragment_home, container, false);
6. }

OnViewCreated

Pada HomeFragment.java terdapat juga metode onViewCreated() yang akan bekerja

setelah metode onCreateView(). Di sini kita bisa gunakan untuk inisialisasi view, dan
juga mengatur actionnya (set listener).

1. @Override
2. public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceSt
ate) {
3. super.onViewCreated(view, savedInstanceState);
4. Button btnCategory = view.findViewById(R.id.btn_category);
5. btnCategory.setOnClickListener(this);
6. }

Inflate di Fragment

1. inflater.inflate(R.layout.fragment_home, container, false);

Inflater.inflate() merupakan obyek dari LayoutInflater yang berfungsi untuk mengubah

layout xml ke dalam bentuk obyek viewgroup atau widget melalui pemanggilan
metode inflate().

1. inflate(R.layout.fragment_home, container, false);

Isian dari tiga parameter yang terdapat pada metode inflate() berdasarkan dari :

Di mana kita memilih pilihan yang ketiga :

@LayoutRes int resource : Layout yang ingin diubah

@Nullable ViewGroup root : Root dari Layout Activity

Boolean attachToRoot : Apakah kita akan menempelkan layout kita ke

dalam root dari parentlayout yang ada. Jika ya, maka akan ditempelkan ke
dalam parent layout yang ada. Jika tidak, maka hanya akan menghasilkan nilai balik
dalam bentu obyek view saja.
Kita memilih false pada attachToRoot karena pada kode ini kita ingin menambahkan
event onClick pada button-nya. Maka kita membutuhkan nilai balik berupa view.

Bacaan berikut akan memberi wawasan yang lebih dalam tentang proses inflate sebuah
layout:

 Inflate Layout

Secara default, attachToRoot bernilai false. Jadi kita hanya inginkan mengubah layout
xml kedalam bentuk obyek view.

1. Button btnCategory = (Button)view.findViewById(R.id.btn_category);

Sedikit berbeda pada proses casting view dari sebuah ID di dalam layout xml, di sini
casting obyek Buttondilakukan dengan view.findViewById(R.id.btn_category). Kode
tersebut menandakan btn_categoryberada pada obyek view di mana obyek view
berasal dari konversi fragment_home.xml. Bila hanya findViewById(R.id.btn_category),
maka btn_category berada pada root layout, activity_main.xml.

FragmentTransaction

Sekarang pada MainActivity.java kita lakukan proses penempelan atau pemasangan

obyek HomeFragment sehingga dapat ditampilkan ke layar dengan mekanisme sebagai
berikut :

1. FragmentManager mFragmentManager = getSupportFragmentManager();

2. FragmentTransaction mFragmentTransaction = mFragmentManager.beginTransaction()
;
3. HomeFragment mHomeFragment = new HomeFragment();
4. mFragmentTransaction.add(R.id.frame_container, mHomeFragment, HomeFragment.cla
ss.getSimpleName());
5. Log.d("MyFlexibleFragment", "Fragment Name :"+HomeFragment.class.getSimpleName
());
6. mFragmentTransaction.commit();
Kita menggunakan instance dari FragmentManager yang merupakan antarmuka untuk
mengorganisir obyek fragment yang terdapat didalam sebuah Activity.

1. FragmentManager mFragmentManager = getSupportFragmentManager();

Di sini kita menggunakan kelas FragmentManager yang berasal dari Android Support
Library v4, agar bisa kompatibel ke versi Android sebelumnya (Backward Compability).

Oleh karena itu kita menggunakan getSupportFragmentManager() dan

bukan getFragmentManager().

Untuk detail terkait FragmentManager, silakan Anda meluncur ke :

 Fragment Manager

1. FragmentTransaction mFragmentTransaction = mFragmentManager.beginTransaction()

;

FragmentTransaction merupakan api untuk melakukan operasi pada fragment

seperti add(), replace(), commit() dsb.

Untuk detailnya silakan merujuk ke laman ini :

 Fragment Transaction

1. HomeFragment mHomeFragment = new HomeFragment(); // Pembuatan obyek HomeFragme

nt
2. mFragmentTransaction.add(R.id.frame_container, mHomeFragment, HomeFragment.cla
ss.getSimpleName());
Di sinilah proses manipulasi penambahan fragment kedalam activity terjadi.
Metode add() akan menambahkan obyek fragment ke dalam layout container. Layout
container ini merupakan obyek FrameLayout dengan ID frame_container. Ia
memiliki tag dengan nama kelas dari HomeFragment itu sendiri.

1. mFragmentTransaction.commit();

Baris di atas akan meminta obyek mFragmentTransaction untuk melakukan

pemasangan obyek secara asynchronous untuk ditampilkan ke antar muka
pengguna (user interface).

Selanjutnya, kita akan membuat sebuah fragment lagi untuk melihat bagaimana sebuah
tampilan bisa dengan fleksibel berubah di dalam satu activity, tanpa berpindah
halaman.