Membuat aplikasi Birthday Card

1. Pengantar

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

Untuk memulai, buat project Kotlin baru di Android Studio menggunakan template Empty Activity.
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.

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)

Di Android Studio, temukan jendela Project di sebelah kiri.
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.
Luaskan folder app, lalu folder res, dan selanjutnya folder layout.
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.

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.
Perhatikan bahwa TextView berisi "Hello World!" (Halo Dunia!) di sebelahnya, yaitu teks yang Anda lihat saat menjalankan aplikasi.

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

Atribut text menampilkan teks yang dicetak di dalam TextView.

Klik atribut text yang menampilkan teks Hello World! (Halo Dunia!).
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.
Perhatikan bahwa teks di Design View telah berubah.....(Bagus! Anda bisa langsung lihat perubahannya.)
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

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

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

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.

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

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.

Perhatikan bahwa ada TextView yang ditambahkan, dan perhatikan tanda seru berwarna merah di Component Tree.
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.

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

Klik tanda + di bagian atas kotak. Ini untuk batasan antara bagian atas tampilan teks dan tepi atas tata letak batasan.
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.

Ubah margin atas menjadi 16.

Lakukan hal yang sama untuk margin kiri.

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

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?

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

Tetapkan margin kanan ke 16.
Tetapkan margin bawah ke 16.

Di Attributes, tetapkan atribut text untuk menandatangani kartu, misalnya "From Emma".
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.

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

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

Perhatikan perubahan di Layout Editor.

Ubah fontFamily menjadi casual.
Coba beberapa font berbeda untuk melihat tampilannya. Tersedia pilihan font yang lebih banyak di bagian bawah daftar, di bawah More Fonts...
Setelah selesai mencoba berbagai font, setel fontFamily menjadi sans-serif-light.
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.

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

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

5. Solusi

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

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

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

Membuka project di Android Studio

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

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

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

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.