Dasar-Dasar Android Kotlin 03.1: Membuat fragmen

Codelab ini adalah bagian dari kursus Dasar-Dasar Kotlin Android. Anda akan mendapatkan manfaat maksimal dari kursus ini jika Anda mengerjakan codelab secara berurutan. Semua codelab kursus tercantum di halaman landing codelab Dasar-Dasar Android Kotlin.

Dalam codelab ini, Anda akan mempelajari fragmen, dan membuat fragmen di dalam aplikasi pemicu yang disebut AndroidTrivia. Dalam codelab berikutnya, Anda akan mempelajari lebih lanjut navigasi dan melakukan pekerjaan lebih lanjut di aplikasi AndroidTrivia.

Yang harus sudah Anda ketahui

  • Dasar-dasar Kotlin
  • Cara membuat aplikasi Android dasar di Kotlin
  • Cara bekerja dengan tata letak

Yang akan Anda pelajari

  • Cara menambahkan Fragmen secara statis ke aplikasi Anda

Yang akan Anda lakukan

  • Buat fragmen di dalam aktivitas.

Dalam tiga codelab yang membentuk pelajaran ini, Anda mengerjakan aplikasi yang disebut AndroidTrivia. Aplikasi yang sudah selesai adalah game yang memungkinkan pengguna menjawab tiga pertanyaan trivia tentang coding Android. Jika menjawab ketiga pertanyaan dengan benar, pengguna akan memenangkan game dan dapat membagikan hasilnya.

Aplikasi AndroidTrivia mengilustrasikan pola dan kontrol navigasi. Aplikasi memiliki beberapa komponen:

  • Di layar judul, yang ditampilkan di sebelah kiri pada screenshot di atas, pengguna memulai game.
  • Di layar game dengan pertanyaan, yang ditampilkan di tengah atas, pengguna memainkan game dan mengirimkan jawaban mereka.
  • Panel navigasi, yang ditampilkan di sebelah kanan atas, bergeser keluar dari sisi aplikasi dan berisi menu dengan header. Ikon panel samping membuka panel navigasi. Menu panel navigasi berisi link ke halaman Tentang dan link ke aturan game.

Bagian atas aplikasi menampilkan tampilan berwarna yang disebut panel aplikasi, yang juga dikenal sebagai panel tindakan.

Dalam codelab ini, Anda bekerja dari aplikasi awal yang menyediakan kode template dan class fragmen yang diperlukan saat Anda menyelesaikan aplikasi Trivia.

  1. Download project Android Studio AndroidTrivia-Starter.
  2. Buka project di Android Studio dan jalankan aplikasi. Saat aplikasi terbuka, aplikasi tidak melakukan apa pun selain menampilkan nama aplikasi dan layar kosong.


  3. Di panel Project Android Studio, buka tampilan Project: Android untuk menjelajahi file project. Buka folder app > java untuk melihat class MainActivity dan class fragmen.

  4. Buka folder res > layout dan klik dua kali pada activity_main.xml. File activity_main.xml akan muncul di Layout Editor.
  5. Klik tab Design. Component Tree untuk file activity_main.xml menampilkan tata letak root sebagai LinearLayout vertikal.



    Pada tata letak linear vertikal, semua tampilan turunan di tata letak diratakan secara vertikal.

Fragmen mewakili perilaku atau bagian dari antarmuka pengguna (UI) dalam suatu aktivitas. Anda dapat mengombinasikan beberapa fragmen dalam satu aktivitas untuk membuat UI multipanel, dan dapat menggunakan kembali fragmen dalam beberapa aktivitas.

Bayangkan fragmen sebagai bagian modular dari aktivitas, seperti "subaktivitas" yang juga dapat Anda gunakan dalam aktivitas lain:

  • Fragmen memiliki siklus prosesnya sendiri dan menerima peristiwa inputnya sendiri.
  • Anda dapat menambahkan atau menghapus fragmen saat aktivitas sedang berjalan.
  • Fragmen ditentukan dalam class Kotlin.
  • UI fragmen ditentukan dalam file tata letak XML.

Aplikasi AndroidTrivia memiliki aktivitas utama dan beberapa fragmen. Sebagian besar fragmen dan file tata letaknya telah ditetapkan untuk Anda. Dalam tugas ini, Anda membuat fragmen dan menambahkan fragmen ke aktivitas utama aplikasi.

Langkah 1: Tambahkan class fragmen

Pada langkah ini, Anda akan membuat class TitleFragment kosong. Mulai dengan membuat class Kotlin untuk fragmen baru:

  1. Di Android Studio, klik di mana saja di dalam panel Project untuk mengembalikan fokus ke file project. Misalnya, klik folder com.example.android.navigation.
  2. Pilih File > &&t baru; Fragmen > Fragmen (Kosong).
  3. Untuk nama fragmen, gunakan TitleFragment. Hapus semua kotak centang, termasuk create Layout XML, include fragment factory methods, dan include antarmuka callback.
  4. Klik Finish.
  5. Buka file fragmen TitleFragment.kt, jika belum terbuka. Ini berisi metode onCreateView(), yang merupakan salah satu metode yang dipanggil selama siklus proses fragmen.
  6. Di onCreateView(), hapus bagian return TextView(activity).apply, termasuk baris yang diawali dengan setText. Fungsi onCreateView() hanya memiliki kode berikut:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Membuat objek binding

Fragmen tidak akan dikompilasi sekarang. Untuk membuat fragmen dikompilasi, Anda harus membuat objek binding dan meng-inflate tampilan fragmen (yang setara dengan menggunakan setContentView() untuk aktivitas).

  1. Pada metode onCreateView() di TitleFragment.kt, buat variabel binding (val binding).
  2. Untuk meng-inflate tampilan fragmen, panggil metode DataBindingUtil.inflate() pada objek Binding fragmen, yaitu FragmentTitleBinding.

    Teruskan empat parameter ke dalam metode:
  • inflater, yang merupakan LayoutInflater yang digunakan untuk meng-inflate tata letak binding.
  • Resource tata letak XML tata letak untuk di-inflate. Gunakan salah satu tata letak yang telah ditentukan untuk Anda, R.layout.fragment_title.
  • container untuk induk ViewGroup. (Parameter ini bersifat opsional.)
  • false untuk nilai attachToParent.
  1. Tetapkan binding yang ditampilkan DataBindingUtil.inflate ke variabel binding.
  2. Tampilkan binding.root dari metode yang berisi tampilan yang di-inflate. Metode onCreateView() Anda sekarang terlihat seperti kode berikut:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

Langkah 2: Tambahkan fragmen baru ke file tata letak utama

Pada langkah ini, Anda menambahkan TitleFragment ke file tata letak activity_main.xml aplikasi.

  1. Buka res > layout > activity_main.xml dan klik tab Text untuk melihat kode XML tata letak.
  2. Di dalam elemen LinearLayout yang ada, tambahkan elemen fragment.
  3. Setel ID fragmen ke titleFragment.
  4. Setel nama fragmen ke jalur lengkap class fragmen, yang dalam hal ini adalah com.example.android.navigation.TitleFragment.
  5. Tetapkan lebar dan tinggi tata letak ke match_parent.
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>
  1. Jalankan aplikasi. Fragmen telah ditambahkan ke layar utama Anda.

Project Android Studio: AndroidTriviaFragment

Dalam codelab ini, Anda menambahkan fragmen ke aplikasi AndroidTrivia, yang akan terus Anda kerjakan di dua codelab berikutnya dalam tutorial ini.

  • Fragmen adalah bagian modular dari aktivitas.
  • Fragmen memiliki siklus prosesnya sendiri dan menerima peristiwa inputnya sendiri.
  • Gunakan tag <fragment> untuk menentukan tata letak fragmen dalam file tata letak XML.
  • Meng-inflate tata letak untuk fragmen di onCreateView().
  • Anda dapat menambahkan atau menghapus fragmen saat aktivitas sedang berjalan.

Kursus Udacity:

Dokumentasi developer Android:

Bagian ini mencantumkan kemungkinan tugas pekerjaan rumah untuk siswa yang mengerjakan codelab ini sebagai bagian dari kursus yang dipimpin oleh instruktur. Terserah instruktur untuk melakukan hal berikut:

  • Tugaskan pekerjaan rumah jika diperlukan.
  • Berkomunikasi dengan siswa cara mengirimkan tugas pekerjaan rumah.
  • Beri nilai tugas pekerjaan rumah.

Instruktur dapat menggunakan saran ini sesedikit atau sebanyak yang mereka inginkan, dan harus bebas memberikan pekerjaan rumah lain yang dirasa sesuai.

Jika Anda mengerjakan codelab ini sendiri, silakan gunakan tugas pekerjaan rumah ini untuk menguji pengetahuan Anda.

Jawab pertanyaan berikut

Pertanyaan 1

Apa saja perbedaan antara fragmen dan aktivitas? Pilih semua pernyataan yang benar.

  • Saat membuat fragmen, Anda akan meng-inflate tata letak dalam metode onCreateView(). Saat membuat aktivitas, Anda akan meng-inflate tata letak dalam onCreate().
  • Aktivitas memiliki tata letak sendiri, tetapi fragmen tidak dapat memiliki tata letak sendiri.
  • Suatu aktivitas memiliki siklus prosesnya sendiri, namun fragmen tidak.
  • Saat meng-inflate tata letak untuk fragmen atau aktivitas, Anda dapat mereferensikan tata letak sebagai R.layout.layoutname.

Pertanyaan 2

Manakah dari pernyataan tentang fragmen berikut yang benar? Pilih semua yang sesuai.

  • Anda dapat menggunakan fragmen di lebih dari satu aktivitas.
  • Satu aktivitas dapat memiliki beberapa fragmen.
  • Setelah Anda menentukan fragmen dalam class Kotlin, fragmen tersebut akan otomatis ditambahkan ke file tata letak activity_main.xml.
  • Gunakan tag <fragment> untuk menentukan tempat di file tata letak tempat fragmen disisipkan.

Mulai pelajaran berikutnya: 3.2 Menentukan jalur navigasi

Untuk link ke codelab lainnya dalam kursus ini, lihat halaman landing codelab Dasar-Dasar Kotlin Android.