Membuat aplikasi Birthday Card

1. Pengantar

Perhatian: Codelab ini sudah tidak berlaku dan tidak lagi dikelola. Sebagai gantinya, lihat kursus Dasar-Dasar Android dengan Compose untuk praktik terbaru yang direkomendasikan.

Dalam codelab ini, Anda akan membangun aplikasi Android sederhana yang menampilkan teks. Anda akan dapat memosisikan teks di layar dengan memahami lebih lanjut komponen Antarmuka Pengguna (UI) di Android.

Prasyarat

• Cara membuat aplikasi baru di Android Studio.
• Cara menjalankan aplikasi di emulator atau perangkat Android Anda.

Yang akan Anda pelajari

• Apa yang dimaksud dengan elemen antarmuka pengguna, seperti Views dan ViewGroups.
• Cara menampilkan teks di TextView dalam aplikasi.
• Cara menetapkan atribut, seperti teks, font, dan margin pada TextView.

Yang akan Anda bangun

• Aplikasi Android yang menampilkan ucapan selamat ulang tahun dalam format teks.

Seperti inilah tampilan aplikasi Anda saat selesai.

Yang Anda perlukan

• Komputer yang dilengkapi Android Studio.

2. Menyiapkan aplikasi Happy Birthday

Membuat project Empty Activity

1. Untuk memulai, buat project Kotlin baru di Android Studio menggunakan template Empty Activity.
2. Beri nama aplikasi "Happy Birthday", dengan level API minimum 19 (KitKat).

Penting: Jika Anda belum memahami cara membuat project baru di Android Studio, lihat Membuat dan menjalankan aplikasi Android pertama Anda untuk mengetahui detailnya.

3. Jalankan aplikasi Anda. Aplikasi akan terlihat seperti screenshot di bawah.

Saat Anda membuat aplikasi Happy Birthday ini dengan template Empty Activity, Android Studio menyiapkan resource untuk aplikasi Android dasar, termasuk pesan "Hello World!" (Halo Dunia!) di tengah layar. Dalam codelab ini, Anda akan mempelajari bagaimana cara pesan tersebut dimunculkan, cara mengubah teksnya menjadi ucapan selamat ulang tahun, dan cara menambahkan serta memformat pesan tambahan.

Tentang antarmuka pengguna

Antarmuka pengguna (UI) aplikasi adalah tampilan visual yang Anda lihat di layar: teks, gambar, tombol, dan berbagai jenis elemen lainnya. Seperti itulah cara aplikasi menampilkan berbagai hal kepada pengguna, dan cara pengguna berinteraksi dengan aplikasi.

Setiap elemen ini disebut View. Hampir semua yang Anda lihat di layar aplikasi Anda adalah View. Views dapat bersifat interaktif, seperti tombol yang dapat diklik atau kolom input yang dapat diedit.

Dalam codelab ini, Anda akan menggunakan jenis View untuk menampilkan teks dan disebut TextView.

Views di aplikasi Android tidak hanya mengambang di layar dengan sendirinya. Views memiliki hubungan satu sama lain. Misalnya, gambar mungkin berada di samping beberapa teks, dan tombol dapat membentuk baris. Untuk mengatur Views, Anda harus memasukkannya ke dalam penampung. ViewGroup adalah tempat untuk menampung objek View, dan penampung ini bertanggung jawab untuk mengatur Views di dalamnya. Pengaturan posisi, atau tata letak, dapat berubah mengikuti ukuran dan rasio aspek layar perangkat Android tempat aplikasi berjalan, dan tata letak dapat menyesuaikan sendiri terlepas perangkat berada dalam mode potret atau lanskap.

Salah satu jenis ViewGroup adalah ConstraintLayout, yang membantu Anda mengatur Views di dalamnya dengan cara yang fleksibel.

Tentang Layout Editor

Membuat antarmuka pengguna dengan mengatur Views dan ViewGroups adalah bagian penting dari pembuatan Aplikasi Android. Android Studio menyediakan alat bernama Layout Editor yang membantu Anda melakukannya. Anda akan menggunakan Layout Editor untuk mengubah teks "Hello World!" (Halo Dunia!) menjadi teks "Happy Birthday!" (Selamat Ulang Tahun!), lalu memberi gaya pada teks.

Saat Anda membuka Layout Editor, Anda akan melihat banyak bagian di dalamnya. Anda akan belajar menggunakan sebagian besar bagian tersebut di codelab ini. Gunakan screenshot yang disertai keterangan di bawah untuk membantu mengenali jenis-jenis jendela di Layout Editor. Anda akan mempelajari lebih lanjut setiap bagian saat membuat perubahan pada aplikasi.

• Di sebelah kiri (1) terdapat jendela Project yang telah Anda lihat sebelumnya. Jendela Project ini mencantumkan semua file yang membentuk project Anda.
• Di bagian tengah, Anda bisa melihat dua gambar (4) dan (5) yang mewakili tata letak layar untuk aplikasi Anda. Representasi di sebelah kiri (4) merupakan perkiraan yang mirip dengan tampilan layar Anda saat aplikasi berjalan. Representasi ini disebut tampilan Design.
• Representasi di sebelah kanan (5) adalah tampilan Blueprint yang dapat berguna untuk operasi tertentu.
• Palette (2) berisi daftar berbagai jenis Views yang dapat Anda tambahkan ke aplikasi.
• Component Tree (3) adalah representasi yang berbeda dari tampilan layar Anda. Component Tree ini mencantumkan semua tampilan layar Anda.
• Attributes ada di ujung kanan (6). Bagian ini menunjukkan atribut View dan Anda dapat mengubahnya.

Baca Layout Editor selengkapnya dan cara mengonfigurasinya di panduan referensi developer.

Berikut ini screenshot seluruh tampilan Layout Editor yang telah diberi keterangan:

Mari kita buat beberapa perubahan di Layout Editor agar aplikasi Anda lebih terlihat seperti kartu ulang tahun.

Mengubah pesan Hello World (Halo Dunia)

1. Di Android Studio, temukan jendela Project di sebelah kiri.
2. Perhatikan folder dan file berikut: Folder app berisi sebagian besar file untuk aplikasi yang akan Anda ubah. Folder res ditujukan untuk resource, seperti gambar atau tata letak layar. Folder layout ditujukan untuk tata letak layar. File activity_main.xml berisi deskripsi tata letak layar Anda.
3. Luaskan folder app, lalu folder res, dan selanjutnya folder layout.
4. Klik dua kali pada activity_main.xml. Tindakan ini akan membuka activity_main.xml di Layout Editor dan menampilkan tata letak yang dideskripsikan dalam tampilan Design.

Catatan: Dalam codelab ini, Anda akan sering diminta untuk membuka file seperti di langkah sebelumnya. Sederhananya, langkah-langkah tersebut dapat dipersingkat menjadi: Buka activity_main.xml (res > layout > activity_main.xml) alih-alih mencantumkan setiap langkah secara terpisah.

5. Lihat daftar tampilan di Component Tree. Perhatikan bahwa ada ConstraintLayout dan TextView di bawahnya. Keduanya mewakili UI aplikasi Anda. TextView diindentasi karena berada di dalam ConstraintLayout. Saat Anda menambahkan lebih banyak Views ke ConstraintLayout, Views akan ditambahkan ke daftar ini.
6. Perhatikan bahwa TextView berisi "Hello World!" (Halo Dunia!) di sebelahnya, yaitu teks yang Anda lihat saat menjalankan aplikasi.

7. Di Component Tree, klik TextView.
8. Cari Attributes di sebelah kanan.
9. Cari bagian Declared Attributes.
10. Perhatikan bahwa atribut text di bagian Declared Attributes berisi Hello World! (Halo Dunia!).

Atribut text menampilkan teks yang dicetak di dalam TextView.

11. Klik atribut text yang menampilkan teks Hello World! (Halo Dunia!).
12. Ubah menjadi Happy Birthday!, lalu tekan tombol Enter. Jika Anda kemudian melihat peringatan tentang string yang di-hardcode, jangan khawatir. Anda akan mempelajari cara menghapus peringatan tersebut di codelab berikutnya.
13. Perhatikan bahwa teks di Design View telah berubah.....(Bagus! Anda bisa langsung lihat perubahannya.)
14. Jalankan aplikasi, dan sekarang Anda melihat teks Happy Birthday!

Bagus! Anda membuat perubahan pertama pada aplikasi Android.

3. Menambahkan TextViews ke tata letak

Kartu ulang tahun yang sedang Anda buat tampak berbeda dengan kartu yang ada di aplikasi. Sebagai ganti teks kecil di tengah, Anda memerlukan dua pesan yang berukuran lebih besar: satu di kiri atas dan satu di pojok kanan bawah. Dalam tugas ini, Anda akan menghapus TextView yang ada, dan menambahkan dua TextViews baru, serta mempelajari cara memosisikannya di dalam ConstraintLayout.

Menghapus TextView saat ini

1. Di Layout Editor, klik untuk memilih TextView di bagian tengah tata letak.

2. Tekan tombol Delete. Android Studio akan menghapus TextView, dan sekarang aplikasi Anda hanya menampilkan ConstraintLayout di Layout Editor dan Component Tree.

Tips: Jika ingin memperbesar tata letak, Anda dapat menggunakan kontrol di bagian kanan bawah Layout Editor untuk menyesuaikan ukuran. Klik ikon paling bawah untuk kembali ke tingkat zoom yang dapat memuat seluruh tata letak di layar.

Menambahkan TextView

Pada langkah ini, Anda akan menambahkan TextView di kiri atas aplikasi untuk menampung ucapan selamat ulang tahun.

Palette di kiri atas Layout Editor berisi daftar berbagai jenis Views, yang disusun berdasarkan kategori, yang dapat Anda tambahkan ke aplikasi.

1. Cari TextView. Kode ini muncul dalam kategori Common dan kategori Text.

2. Tarik TextView dari Palette ke kiri atas platform desain di Layout Editor dan lepaskan. Posisinya tidak harus sama persis, cukup letakkan di dekat sudut kiri atas.

3. Perhatikan bahwa ada TextView yang ditambahkan, dan perhatikan tanda seru berwarna merah di Component Tree.
4. Arahkan kursor ke tanda seru, dan Anda akan melihat pesan yang berisi peringatan bahwa tampilan tidak dibatasi dan akan melompat ke posisi yang berbeda saat aplikasi dijalankan. Anda akan memperbaikinya di langkah berikutnya.

Memosisikan TextView

Untuk kartu ulang tahun, TextView harus berada di dekat sudut kiri atas dengan ruang di sekitarnya. Untuk memperbaiki peringatan, Anda perlu menambahkan beberapa batasan ke TextView sehingga aplikasi akan tahu cara memosisikannya. Batasan terdiri dari arah dan batas agar View dapat berada di dalam tata letak.

Batasan yang Anda tambahkan ke atas dan kiri akan memiliki margin. Margin menentukan seberapa jauh jarak View dari tepi penampungnya.

1. Di Attributes di sebelah kanan, cari Constraint Widget di bagian Layout. Gambar persegi yang muncul mewakili tampilan Anda.

2. Klik tanda + di bagian atas kotak. Ini untuk batasan antara bagian atas tampilan teks dan tepi atas tata letak batasan.
3. Kolom berisi angka akan muncul untuk menyetel margin atas. Margin adalah jarak dari TextView ke tepi penampung, yaitu ConstraintLayout. Angka yang muncul akan berbeda mengikuti posisi Anda meletakkan TextView. Saat Anda menyetel margin atas, Android Studio secara otomatis juga menambahkan batasan dari bagian atas tampilan teks ke bagian atas ConstraintLayout.

4. Ubah margin atas menjadi 16.

Catatan: Satuan untuk margin dan jarak lain di UI adalah piksel kepadatan mandiri (dp). Satuan ini seperti sentimeter atau inci, tetapi digunakan untuk menyatakan jarak di layar. Android menerjemahkan nilai ini ke jumlah piksel sungguhan yang sesuai untuk setiap perangkat. Sebagai dasar pengukuran, 1 dp berukuran sekitar 1/160 inci, tetapi bisa lebih besar atau lebih kecil untuk beberapa perangkat.

5. Lakukan hal yang sama untuk margin kiri.

6. Atur text untuk mengucapkan selamat ulang tahun kepada teman, misalnya "Happy Birthday, Sam!" lalu tekan tombol Enter.

7. Perhatikan bahwa tampilan Design akan diperbarui untuk memperlihatkan tampilan terkini aplikasi Anda.

Menambahkan dan memosisikan TextView lain

Kartu ulang tahun Anda memerlukan baris teks kedua di dekat pojok kanan bawah, yang akan Anda tambahkan di langkah ini menggunakan cara yang sama seperti di tugas sebelumnya. Menurut Anda bagaimana margin TextView ini?

1. Tarik TextView baru dari Pallete dan letakkan di dekat bagian kanan bawah tampilan aplikasi di Layout Editor.

2. Tetapkan margin kanan ke 16.
3. Tetapkan margin bawah ke 16.

4. Di Attributes, tetapkan atribut text untuk menandatangani kartu, misalnya "From Emma".
5. Jalankan aplikasi dan Anda akan melihat ucapan selamat ulang tahun di kiri atas dan tanda tangan di kanan bawah.

Selamat! Anda telah menambahkan dan memosisikan beberapa elemen UI di aplikasi.

4. Menambahkan gaya ke teks

Anda telah menambahkan teks ke antarmuka pengguna, tetapi belum terlihat seperti aplikasi final. Dalam tugas ini, Anda akan mempelajari cara mengubah ukuran, warna teks, dan atribut lain yang memengaruhi tampilan TextView. Anda juga dapat bereksperimen dengan berbagai font.

1. Klik TextView pertama di Component Tree dan cari bagian Common Attributes dari jendela Attributes. Anda mungkin harus men-scroll ke bawah untuk menemukannya.
2. Perhatikan berbagai atribut termasuk fontFamily, textSize, dan textColor.

3. Cari textAppearance.
4. Jika textAppearance tidak diperluas, klik ikon segitiga terbalik.
5. Di textSize, tetapkan textSize menjadi 36sp.

Catatan: Sama seperti dp yang merupakan unit ukuran untuk jarak di layar, sp adalah satuan ukuran untuk ukuran font. Elemen UI di aplikasi Android menggunakan dua unit pengukuran yang berbeda, piksel kepadatan mandiri (dp) yang sudah Anda gunakan sebelumnya untuk tata letak dan piksel skalabel} (sp) yang digunakan saat menyetel ukuran teks. Secara default, sp memiliki ukuran yang sama dengan dp, tetapi ukurannya akan berubah berdasarkan ukuran teks pilihan pengguna.

6. Perhatikan perubahan di Layout Editor.

7. Ubah fontFamily menjadi casual.
8. Coba beberapa font berbeda untuk melihat tampilannya. Tersedia pilihan font yang lebih banyak di bagian bawah daftar, di bawah More Fonts...
9. Setelah selesai mencoba berbagai font, setel fontFamily menjadi sans-serif-light.
10. Klik kotak edit atribut textColor dan mulai ketik black. Perhatikan bahwa saat Anda mengetik, Android Studio akan menampilkan daftar warna yang berisi teks yang telah Anda ketik sejauh ini.

11. Pilih @android:color/black dari daftar warna dan tekan tombol Enter.
12. Di TextView pada tanda tangan Anda, ubah textSize, textColor, dan fontFamily agar cocok.
13. Jalankan aplikasi Anda dan lihat hasilnya.

Selamat, Anda telah menyelesaikan langkah pertama untuk membuat aplikasi kartu ulang tahun!

5. Solusi

URL Kode Solusi: https://github.com/google-developer-training/android-basics-kotlin-birthday-card-app-solution

1. Buka halaman repositori GitHub yang disediakan untuk project.
2. Pastikan nama cabang cocok dengan nama cabang yang ditentukan dalam codelab. Misalnya, dalam screenshot berikut, nama cabang adalah main (utama).

3. Di halaman GitHub project, klik tombol Code yang akan menampilkan pop-up.

4. Pada pop-up, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
5. Temukan file di komputer Anda (mungkin di folder Downloads).
6. Klik dua kali pada file ZIP untuk mengekstraknya. Tindakan ini akan membuat folder baru yang berisi file project.

Membuka project di Android Studio

1. Mulai Android Studio.
2. Di jendela Welcome to Android Studio, klik Open.

Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > Open.

3. Di file browser, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
4. Klik dua kali pada folder project tersebut.
5. Tunggu Android Studio membuka project.
6. Klik tombol Run untuk membangun aplikasi dan menjalankannya. Pastikan aplikasi dibangun seperti yang diharapkan.

Peringatan: Di Android Studio, jika Anda melihat error, "Android framework is detected. Click to configure", project tidak terdeteksi, atau tombol jalankan dinonaktifkan, pastikan Anda membuka sub-direktori, HappyBirthday di Android Studio dan bukan direktori induk.

6. Ringkasan

• Layout Editor membantu Anda membuat UI untuk aplikasi Android.
• Hampir semua yang Anda lihat di layar aplikasi Anda adalah View.
• TextView adalah elemen UI untuk menampilkan teks di aplikasi Anda.
• ConstraintLayout adalah penampung untuk elemen UI lainnya.
• Views harus dibatasi secara horizontal dan vertikal dalam ConstraintLayout.
• Salah satu cara untuk memosisikan View adalah menggunakan margin.
• Margin menunjukkan jarak View dari tepi penampungnya.
• Anda dapat menetapkan atribut di TextView seperti font, ukuran teks, dan warna.

7. Mempelajari lebih lanjut

• Kosakata Dasar-Dasar Android di Kotlin
• View
• TextView
• ConstraintLayout
• dp vs. sp
• Layout Editor di Android Studio