Membuat aplikasi Kartu Ulang Tahun

Dalam codelab ini, Anda akan membuat 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 buat

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

Seperti inilah tampilan aplikasi Anda saat selesai. f63d6bfe87981e25.png

Yang Anda perlukan

  • Komputer yang dilengkapi Android Studio.

Membuat project Empty Activity

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

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

14287408defb6e70.png

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

ba27e9a7dc660e63.png

Saat Anda membuat aplikasi Selamat Ulang Tahun 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. Inilah 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 tinggi lebar 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.

e4c1f4e455d72c81.png

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 "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:

ba8fee53dbc7dba4.png

Ayo 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. 8cf417be2106c8d6.png
  1. 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.
  2. Perhatikan bahwa TextView berisi "Hello World!" (Halo Dunia!) di sebelahnya, yaitu teks yang Anda lihat saat menjalankan aplikasi. bdc321e165680ff0.png
  3. Di Component Tree, klik TextView.
  4. Cari Attributes di sebelah kanan.
  5. Cari bagian Declared Attributes.
  6. Perhatikan bahwa atribut text di bagian Declared Attributes berisi Hello World! (Halo Dunia!). 94a84633f74f4404.png

Atribut text menampilkan teks yang dicetak di dalam TextView.

  1. Klik atribut text yang menampilkan teks Hello World! (Halo Dunia!).
  2. Ubah menjadi Selamat Ulang Tahun!, 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.
  3. Perhatikan bahwa teks di Design View telah berubah.....(Bagus! Anda bisa langsung melihat perubahannya)
  4. Jalankan aplikasi, dan sekarang Anda melihat teks Selamat Ulang Tahun!233655306db5a589.png

Bagus! Anda membuat perubahan pertama pada aplikasi Android.

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. 4af0d3a1ec4de079.png
  2. Tekan tombol Delete. Android Studio akan menghapus TextView, dan sekarang aplikasi Anda hanya menampilkan ConstraintLayout di Layout Editor dan Component Tree. f3a2eeedd3d636c6.png

Menambahkan TextView

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

da933f736e60ee9b.png

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. e9d7cbe0218ad9a2.png
  2. Tarik TextView dari Palette ke kiri atas permukaan desain di Layout Editor dan letakkan. Posisinya tidak harus sama persis, cukup letakkan di dekat sudut kiri atas. bdc71e5cd4f88012.gif
  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. dec0dca3f753bc8c.png

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. ae54b1ca99784e08.png

  1. Di Attributes di sebelah kanan, cari Constraint Widget di bagian Layout. Gambar persegi yang muncul mewakili tampilan Anda. ad04973e9a49e7db.png
  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 ConstrainLayout. eb0dc185dcac8a52.png
  4. Ubah margin atas menjadi 16.
  1. Lakukan hal yang sama untuk margin kiri. a323a885bc39853d.png
  2. Atur text untuk mengucapkan selamat ulang tahun kepada teman, misalnya "Selamat Ulang Tahun, Bud!" lalu tekan tombol Enter. df20bb9a9fecaaeb.png
  3. Perhatikan bahwa tampilan Design akan diperbarui untuk memperlihatkan tampilan terkini aplikasi Anda. da933f736e60ee9b.png

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 Palette dan letakkan di dekat bagian kanan bawah tampilan aplikasi di Layout Editor. 80225484f67a3fc4.png
  2. Tetapkan margin kanan ke 16.
  3. Tetapkan margin bawah ke 16. 279401c5156ba23f.png
  4. Di Attributes, tetapkan atribut text untuk menandatangani kartu, misalnya "Dari Annisa".
  5. Jalankan aplikasi dan Anda akan melihat ucapan selamat ulang tahun di kiri atas dan tanda tangan di kanan bawah. f547c1b45045984a.png

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

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. 623877d1c739fd8b.png
  3. Cari textAppearance.
  4. Jika textAppearance tidak diperluas, klik ikon segitiga terbalik.
  5. Tetapkan textSize menjadi 36sp. fc28815db05fbb5f.png
  1. Perhatikan perubahan di Layout Editor. 4845b7d5265f0417.png
  2. Ubah fontFamily menjadi casual.
  3. Coba beberapa font berbeda untuk melihat tampilannya. Tersedia pilihan font yang lebih banyak di bagian bawah daftar, di bawah More Fonts...
  4. Setelah selesai mencoba berbagai font, setel fontFamily menjadi sans-serif-light.
  5. 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. a615955683853ace.png
  6. Pilih @android:color/black dari daftar warna dan tekan tombol Enter.
  7. Di TextView pada tanda tangan Anda, ubah textSize, textColor, dan fontFamily agar cocok.
  8. Jalankan aplikasi Anda dan lihat hasilnya. f22135316709f0f7.png

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

Untuk mendapatkan kode codelab ini dan membukanya di Android Studio, lakukan hal berikut.

Mendapatkan kode

  1. Klik URL yang diberikan. Tindakan ini akan membuka halaman GitHub project di browser.
  2. Di halaman GitHub project, klik tombol Code yang akan menampilkan dialog.

Eme2bJP46u-pMpnXVfm-bS2N2dlyq6c0jn1DtQYqBaml7TUhzXDWpYoDI0lGKi4xndE_uJw8sKfwfOZ1fC503xCVZrbh10JKJ4iEHdLDwFfdvnOheNxkokITW1LW6UZTncVJJUZ5Fw

  1. Di dialog, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
  2. Temukan file di komputer Anda (mungkin di folder Downloads).
  3. 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 an existing Android Studio project.

Tdjf5eS2nCikM9KdHgFaZNSbIUCzKXP6WfEaKVE2Oz1XIGZhgTJYlaNtXTHPFU1xC9pPiaD-XOPdIxVxwZAK8onA7eJyCXz2Km24B_8rpEVI_Po5qlcMNN8s4Tkt6kHEXdLQTDW7mg

Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > New > Import Project.

PaMkVnfCxQqSNB1LxPpC6C6cuVCAc8jWNZCqy5tDVA6IO3NE2fqrfJ6p6ggGpk7jd27ybXaWU7rGNOFi6CvtMyHtWdhNzdAHmndzvEdwshF_SG24Le01z7925JsFa47qa-Q19t3RxQ

  1. Di dialog Import Project, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
  2. Klik dua kali pada folder project tersebut.
  3. Tunggu Android Studio membuka project.
  4. Klik tombol Run j7ptomO2PEQNe8jFt4nKCOw_Oc_Aucgf4l_La8fGLCMLy0t9RN9SkmBFGOFjkEzlX4ce2w2NWq4J30sDaxEe4MaSNuJPpMgHxnsRYoBtIV3-GUpYYcIvRJ2HrqR27XGuTS4F7lKCzg untuk membuat dan menjalankan aplikasi. Pastikan aplikasi berfungsi seperti yang diharapkan.
  5. Cari file project di jendela fitur Project untuk melihat cara aplikasi diterapkan.
  • 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.