Belajar Fragment Lengkap Untuk Pembuatan Aplikasi Android


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

  1. Menambahkan Fragment ke dalam Activity.
  2. Membuat tampilan fleksibel dengan fragment tanpa berpindah Activity.
  3. Mengirim data antar Fragment.
Codelab pada kali ini akan menghasilkan aplikasi seperti ini:
201811130900126b9157a5d4c45cee14f58e59ab24d232.gif

Logika Dasar

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

Codelab

  1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:
    Nama ProjectMyFlexibleFragment
    Target & Minimum Target SDKPhone and Tablet, Api level 21
    Tipe ActivityEmpty Activity
    Activity NameMainActivity
    Use AndroidX artifactsTrue
    LanguageKotlin / Java 
  2. 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"/>


  3. 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).
    2018111309060565f309c80746583a3d0c6738a77f4f28
  4. 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.
    201811130907413d898a7c96068e6083f3578aafbf6dfa
  5. Setelah HomeFragment tercipta, pada fragment_home.xml mari sesuaikan tampilannya dengan menambahkan sebuah objek textview dan sebuah objek 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.  
  7.     <TextView
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:layout_margin="16dp"
  11.         android:text="@string/hello_home_fragment" />
  12.     <Button
  13.         android:id="@+id/btn_category"
  14.         android:layout_width="match_parent"
  15.         android:layout_height="wrap_content"
  16.         android:layout_marginLeft="16dp"
  17.         android:layout_marginRight="16dp"
  18.         android:text="@string/to_category" />
  19. </LinearLayout>


Akan ada yang error 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.

  1. <resources>
  2.     <string name="app_name">MyFlexibleFragment</string>
  3.  
  4.     <string name="hello_blank_fragment">Hello blank fragment</string>
  5.     <string name="this_profile">Ini activity Profile</string>
  6.     <string name="this_category">Ini fragment Category</string>
  7.     <string name="category_lifestyle">Ke fragment Lifestyle</string>
  8.     <string name="category_name">Category Name</string>
  9.     <string name="category_description">Category Description</string>
  10.     <string name="to_profile">Ke Halaman Profile Activity</string>
  11.     <string name="show_dialog">Tampilkan sebuah dialog</string>
  12.     <string name="hello_home_fragment">Hello Ini Home Fragment</string>
  13.     <string name="to_category">Ke fragment Category</string>
  14.     <string name="question_coach">Siapa pelatih tersukses Machester United?</string>
  15.     <string name="sir_alex_ferguson">Sir Alex Ferguson</string>
  16.     <string name="jose_mourinho">Jose Mourinho</string>
  17.     <string name="louis_van_gaal">Louis Van Gaal</string>
  18.     <string name="david_moyes">David Moyes</string>
  19.     <string name="choose">Pilih</string>
  20.     <string name="close">Tutup</string>
  21. </resources>




  1. Resource String ini akan kita gunakan selama latihan fragment.
  2. Pada HomeFragment lakukan penyesuaian kode sebagai berikut:


  1. class HomeFragment : Fragment(), View.OnClickListener {

  2.  

  3.     ...

  4.  

  5.     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

  6.         super.onViewCreated(view, savedInstanceState)

  7.         val btnCategory:Button = view.findViewById(R.id.btn_category)

  8.         btnCategory.setOnClickListener(this)    }


  9.     override fun onClick(v: View) {

  10.        

  11.     }

  12. }





  1. public class HomeFragment extends Fragment implements View.OnClickListener {

  2.  

  3.     ...

  4.  

  5.     @Override

  6.     public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {

  7.         super.onViewCreated(view, savedInstanceState);

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

  9.         btnCategory.setOnClickListener(this);

  10.     }


  11.     @Override

  12.     public void onClick(View v) {


  13.     }

  14. }



  1. Di sini kita juga siapkan kode listener onClickListener di sini akan kita gunakan pada latihan berikutnya.
  2. Selanjutnya, pada MainActivity, kita tanamkan HomeFragment ke dalam activity tersebut sehingga bisa tampil ke layar pengguna dengan menambahkan beberapa baris berikut:


  1. ...

  2. override fun onCreate(savedInstanceState: Bundle?) {

  3.     super.onCreate(savedInstanceState)

  4.     setContentView(R.layout.activity_main)

  5.  

  6.     val mFragmentManager = supportFragmentManager

  7.     val mHomeFragment = HomeFragment()

  8.     val fragment = mFragmentManager.findFragmentByTag(HomeFragment::class.java.simpleName)


  9.     if (fragment !is HomeFragment) {

  10.         Log.d("MyFlexibleFragment", "Fragment Name :" + HomeFragment::class.java.simpleName)

  11.         mFragmentManager

  12.             .beginTransaction()

  13.             .add(R.id.frame_container, mHomeFragment, HomeFragment::class.java.simpleName)

  14.             .commit()

  15.     }

  16. }

  17. ...






  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.     HomeFragment mHomeFragment = new HomeFragment();

  10.     Fragment fragment = mFragmentManager.findFragmentByTag(HomeFragment.class.getSimpleName());

  11.    

  12.     if (!(fragment instanceof HomeFragment)) {

  13.         Log.d("MyFlexibleFragment", "Fragment Name :" + HomeFragment.class.getSimpleName());

  14.         mFragmentManager

  15.             .beginTransaction()

  16.             .add(R.id.frame_container, mHomeFragment, HomeFragment.class.getSimpleName())

  17.             .commit();

  18.     }

  19. }

  20.  

  21. ...



  1. Setelah selesai semua, silakan jalankan aplikasi Anda. Seperti ini tampilannya.
    201811130957416c41ad283bd2c107218da4765e352374
    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:
201609221413301f623a4b4bfd5258d91a6d808c1087b4.png
Dengan karakteristik seperti ini, FrameLayout merupakan sebuah layout yang paling optimal dalam proses manipulasi penampilan objek fragment ke layar pengguna.

OnCreateView

Pada HomeFragment terdapat metode onCreateView() di mana layout interface didefinisikan dan ditransformasikan dari layout berupa file xml ke dalam objek view dengan menggunakan metode inflate().



  1. override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,

  2.                           savedInstanceState: Bundle?): View? {

  3.     // Inflate the layout for this fragment

  4.     return inflater.inflate(R.layout.fragment_home, container, false)

  5. }





  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 terdapat juga metode onViewCreated() yang akan bekerja setelah metode onCreateView()Di sini kita bisa gunakan untuk inisialisasi view, dan juga mengatur action-nya (set listener).

  1. override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

  2.     super.onViewCreated(view, savedInstanceState)

  3.     val btnCategory:Button = view.findViewById(R.id.btn_category)

  4.     btnCategory.setOnClickListener(this)

  5. }





  1. @Override

  2. public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {

  3.     super.onViewCreated(view, savedInstanceState);

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

  5.     btnCategory.setOnClickListener(this);

  6. }



Catatan:
Perlu diperhatikan untuk pemanggilan findViewById() di sini tidak dapat langsung dilakukan seperti di Activity. Anda perlu menambahkan variabel view terlebih dulu di depannya sehingga menjadi view.findViewById().

Inflate di Fragment


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






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



Inflater.inflate() merupakan objek dari LayoutInflater yang berfungsi untuk mengubah layout xml ke dalam bentuk objek viewgroup atau widget melalui pemanggilan metode inflate()

Sama seperti setContentView pada Activity, fungsi inflate di sini yaitu untuk menampilkan layout dari Fragment, di mana layout yang ditampilkan di sini yaitu fragment_home.


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




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




Isian dari tiga parameter yang terdapat pada metode inflate() berdasarkan dari:
2019090414181937b0dd1996fb9364b90f09c961a95a6f
Di mana kita memilih pilihan yang ketiga :
  • resource : Int                      : Layout yang ingin diubah
  • root : ViewGroup?              : Root dari Layout Activity
  • attachToRoot: Boolean     :  Apakah kita akan menempelkan layout kita ke dalam root dari parent layout yang ada. Jika ya, maka akan ditempelkan ke dalam parent layout yang ada. Jika tidak, maka hanya akan menghasilkan nilai balik dalam bentu objek 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.
Secara defaultattachToRoot bernilai false. Jadi kita hanya inginkan mengubah layout xml kedalam bentuk objek view.
Bacaan berikut akan memberi wawasan yang lebih dalam tentang proses inflate sebuah layout:

findViewById di Fragment


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





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





Sedikit berbeda pada proses casting view dari sebuah ID di dalam layout xml, di sini casting objek button dilakukan dengan view.findViewById(R.id.btn_category)
Kode tersebut menandakan btn_category berada pada objek view di mana objek 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 kita lakukan proses penempelan atau pemasangan objek HomeFragment sehingga dapat ditampilkan ke layar dengan mekanisme sebagai berikut:

  1. val mFragmentManager = supportFragmentManager

  2. val mHomeFragment = HomeFragment()

  3. val fragment = mFragmentManager.findFragmentByTag(HomeFragment::class.java.simpleName)

  4.  

  5. if (fragment !is HomeFragment) {

  6.     Log.d("MyFlexibleFragment", "Fragment Name :" + HomeFragment::class.java.simpleName)

  7.     mFragmentManager

  8.         .beginTransaction()

  9.         .add(R.id.frame_container, mHomeFragment, HomeFragment::class.java.simpleName)

  10.         .commit()

  11. }





  1. FragmentManager mFragmentManager = getSupportFragmentManager();

  2. HomeFragment mHomeFragment = new HomeFragment();

  3. Fragment fragment = mFragmentManager.findFragmentByTag(HomeFragment.class.getSimpleName());

  4.  

  5. if (!(fragment instanceof HomeFragment)) {

  6.     Log.d("MyFlexibleFragment", "Fragment Name :" + HomeFragment.class.getSimpleName());

  7.     mFragmentManager

  8.             .beginTransaction()

  9.             .add(R.id.frame_container, mHomeFragment, HomeFragment.class.getSimpleName())

  10.             .commit();

  11. }



Kita menggunakan instance dari FragmentManager yang merupakan antarmuka untuk mengorganisir objek fragment yang terdapat didalam sebuah activity. 


  1. val mFragmentManager = supportFragmentManager





  1. FragmentManager mFragmentManager = getSupportFragmentManager();



FragmentTransaction merupakan fungsi untuk melakukan operasi pada fragment seperti add()replace()commit() dsb.
Untuk detail terkait FragmentManager, silakan Anda meluncur ke:

  1. val mHomeFragment = HomeFragment()

  2. val fragment = mFragmentManager.findFragmentByTag(HomeFragment::class.java.simpleName)

  3.  

  4. if (fragment !is HomeFragment) {

  5.     Log.d("MyFlexibleFragment", "Fragment Name :" + HomeFragment::class.java.simpleName)

  6.     mFragmentManager

  7.         .beginTransaction()

  8.         .add(R.id.frame_container, mHomeFragment, HomeFragment::class.java.simpleName)

  9.         .commit()

  10. }





  1. HomeFragment mHomeFragment = new HomeFragment();

  2. Fragment fragment = mFragmentManager.findFragmentByTag(HomeFragment.class.getSimpleName());

  3.  

  4. if (!(fragment instanceof HomeFragment)) {

  5.     Log.d("MyFlexibleFragment", "Fragment Name :" + HomeFragment.class.getSimpleName());

  6.     mFragmentManager

  7.             .beginTransaction()

  8.             .add(R.id.frame_container, mHomeFragment, HomeFragment.class.getSimpleName())

  9.             .commit();

  10. }




Di sinilah proses manipulasi penambahan fragment ke dalam activity terjadi. Metode .beginTransaction() untuk memulai proses perubahan. Metode add() akan menambahkan objek fragment ke dalam layout container
Layout container ini merupakan objek framelayout dengan ID frame_container. Ia memiliki tag dengan nama kelas dari HomeFragment itu sendiri. Metode .commit() di atas akan mengeksekusi untuk melakukan pemasangan objek secara asynchronous untuk ditampilkan ke antar muka pengguna (user interface).
201909041511367ef5a9998c37786e072c6d8e62bb2f36
Selanjutnya, kita akan membuat sebuah fragment lagi untuk melihat bagaimana sebuah tampilan bisa dengan fleksibel berubah di dalam satu activity, tanpa berpindah halaman.

*

Post a Comment (0)
Previous Post Next Post