Penggunaan Fragment dalam Flexible UI di Android Studio

Setelah belajar membuat Fragment dasar dimana fungsi dari fragment diantaranya adalah untuk mempermudah development aplikasi Android,  menangani tampilan desain yang dinamis dan variatif, selanjutnya adalah tentang fungsi Fragment dalam Flexible UI.

Kali ini kita akan belajar penggunaan Fragment dalam Flexible UI di Android Studio, bagaimana aplikasi Android dapat dibangun dengan menggunakan lebih dari satu fragment dan cukup memiliki 1 Activity.

1. Buat Project dengan Start a new Android Studio Project

Belajar Intent_1

2. Kemudian Configure your new project, isikan Application Name dengan Fragment FlexibleUI dan Company domain sesuai dengan nama yang kamu inginkan.

Fragment FlexibleUI_1

Kemudian Klik Next hingga Finish. Biarkan gradle menggenerate project kita.

3. Buat Package atau direktori baru dengan nama fragment dengan cara : klik kanan pada package utama -> New -> Package dan beri nama fragment.

4. Buat Fragment baru pada directory fragment beri nama FirstFragment, (jangan lupa Include fragment factory method  dan Include interface callbacks? di uncheck)

Kemudian modifikasi file fragment_first.xml sebagai berikut:

Sementara pada file FirstFragment.Java, modifikasilah sebagai berikut

Keterangan :

Pada btnFirstTransaction kita memberikan listener OnClickListener agar ketika diklik dapat melakukan proses penggantian fragment (replace) yang telah ada. Untuk digantikan dengan object dari SecondFragment() pada FrameLayout berID frame_container.

Selain itu kita memberikan sedikit transisi ketika terjadi proses penggantian fragment. Dan sebelum commit() kita tambahkan proses ini ke dalam BackStack. Kita juga menambahkan title di Action Bar berdasarkan dengan fragment yang active saat ini (First Fragment).

Mengapa kita menggunakan ((MainActivity)getActivity()) untuk mengakses ActionBar ? Dikarenakan kita menggunakan App Compability Library maka untuk method getActionBar() tidak dapat digunakan, akan menghasilkan null pointer exception error. Maka dari itulah kita menggunakan method getSupportActionBar() yang disupport oleh App Compability Library.

5. Buat Fragment baru dengan nama SecondFragment dan modifikasi file fragment_second.xml sebagai berikut:

Sementara pada file SecondFragment.Java, modifikasilah sebagai berikut:

Keterangan:

Hampir sama dengan penjelasan sebelumnya hanya saja disini kita akan mengganti SecondFragment yang ada dilayar dengan ThirdFragment dan tidak menyertakan Fragment Transition.

Disini kita menambahkan fungsionalitas BackButton pada ((MainActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true); dan event ketika back button diklik maka akan menjalankan perintah getFragmentManager().popBackStack(); yang akan membuat fragment saat ini dikeluarkan dari stack.

6. Buat Fragment ketiga dengan nama ThirdFragment dan modifikasi file fragment_third.xml sebagai berikut:

Sementara pada file ThirdFragment.Java, modifikasilah sebagai berikut:

7. Kemudian  modifikasi file activity_main.xml sebagai berikut:

Penjelasan :

Fragment umumnya akan ditampilkan pada FrameContainer. Mengapa harus FrameLayout? Ini jawabannya :

FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

Terakhir pada file MainActivity.Java, modifikasilah sebagai berikut:

Penjelasan :

Proses penambahan fragment dengan menggunakan method add() agar FirstFragment dapat tampil ke layar dengan sebelumnya kita melakukan pengecekan terhadap isi dari object savedInstanceState();

8. Silakan jalankan dengan tombol Run ke emulator atau device atau export ke apk untuk instal secara manual di device.

Tampilan hasil apps adalah sebagai berikut.

Fragment dalam Flexible UI

Tutorial Penggunaan Fragment dalam Flexible UI di Android Studio ini saya kutip dari Kelas Reguler di Dicoding akademi. Pada Kelas ini, Anda dapat mendaftar secara GRATIS dan membaca seluruh modul artikel dalam kelas tersebut.

Namun untuk memperoleh validasi terhadap proses belajar Anda, Anda harus melakukan upgrade dengan menggunakan Dicoding Point. Silahkan klik untuk mendaftar secara Gratis kelas Belajar Membangun Aplikasi Android Native

Download Source Code Penggunaan Fragment dalam Flexible UI di Android Studio

Share to Unlockimage/svg+xml
Share tulisan ini ke Facebook / Twitter kamu untuk mendapatkan Link download.

Leave a Reply

Your email address will not be published. Required fields are marked *