Menambahkan gambar ke aplikasi Kartu Ulang Tahun

Dalam codelab ini, Anda akan mempelajari cara menambahkan gambar ke aplikasi menggunakan ImageView.

Prasyarat

• Cara membuat dan menjalankan aplikasi baru di Android Studio.
• Cara menambahkan dan menghapus, serta menetapkan atribut di TextViews menggunakan Layout Editor.

Yang akan Anda pelajari

• Cara menambahkan gambar atau foto ke aplikasi Android.
• Cara menampilkan gambar di aplikasi menggunakan ImageView.
• Cara mengekstrak teks ke resource string untuk memudahkan penerjemahan aplikasi dan menggunakan kembali string tersebut.
• Cara membuat aplikasi dapat digunakan oleh banyak orang.

Yang akan Anda buat

• Memperluas aplikasi Selamat Ulang Tahun untuk menambahkan gambar.

Yang Anda perlukan

• Komputer yang dilengkapi Android Studio.
• Aplikasi dari codelab "Buat aplikasi Kartu Ulang Tahun".

1. Buka project Anda dari codelab sebelumnya, Buat aplikasi Kartu Ulang Tahun, di Android Studio.
   Saat Anda menjalankan aplikasi tersebut, aplikasi tersebut akan terlihat seperti ini.
   

Menambahkan gambar ke project Anda

Dalam tugas ini, Anda akan mendownload gambar dari internet dan menambahkannya ke aplikasi Selamat Ulang Tahun.

1. Buka situs ini untuk menemukan gambar kartu ulang tahun Anda.
2. Klik tombol Download di sebelah kanan. Tindakan ini akan menampilkan gambar dengan sendirinya.
   
3. Klik kanan pada gambar dan simpan file ke komputer sebagai androidparty.jpg. Catat tempat Anda menyimpannya (misalnya, folder Downloads).
4. Di Android Studio, klik View > Tool Windows > Resource Manager di menu atau klik tab Resource Manager di sebelah kiri jendela Project.
5. Klik tanda + yang ada di bawah Resource Manager, lalu pilih Import Drawables. Tindakan ini akan membuka file browser.
   
6. Di file browser, temukan file gambar yang sudah didownload, lalu klik Open.
7. Klik Berikutnya.
   Android Studio akan menampilkan pratinjau gambar.
8. Klik Impor.
9. Jika gambar berhasil diimpor, Android Studio akan menambahkan gambar ke daftar Drawable. Daftar ini mencakup semua gambar dan ikon Anda untuk aplikasi. Sekarang Anda dapat menggunakan gambar ini di aplikasi Anda.
   
10. Kembali ke tampilan project dengan mengklik View > Tool Windows > Project di menu atau tab Project di bagian paling kiri.
11. Konfirmasikan bahwa gambar ada di folder drawable dari aplikasi Anda dengan memperluas app > res >drawable.
    

Anda memerlukan sebuah tempat untuk menampilkan gambar di aplikasi Anda. Sama seperti Anda menggunakan TextView untuk menampilkan teks, Anda dapat menggunakan ImageView untuk menampilkan gambar.

Dalam tugas ini, Anda akan menambahkan ImageView ke aplikasi, dan menyetel gambarnya ke gambar kue yang didownload. Kemudian Anda akan memosisikannya dan menyesuaikan ukurannya sehingga memenuhi layar.

Menambahkan ImageView dan menyetel gambarnya

1. Di jendela Project, buka activity_main.xml (app > res > layout > activity_main.xml).

Tips: Jika Anda tidak melihat Layout Editor, klik tombol mode Design di kanan atas.

2. Di Layout Editor, buka Palette dan tarik ImageView ke aplikasi Anda. Letakkan di dekat bagian tengah dan jangan tumpang-tindih dengan teks

Dialog Pick a Resource akan terbuka. Dialog ini mencantumkan semua resource gambar yang tersedia untuk aplikasi Anda. Perhatikan gambar tanggal lahir yang tercantum di bawah tab Drawable. Resource drawable adalah konsep umum untuk grafis yang dapat digambar di layar. Resource drawable ini termasuk gambar, bitmap, dan ikon serta banyak tipe resource lainnya yang digambar.

3. Pada dialog Pick a Resource, temukan gambar kue dalam daftar Drawable.
4. Klik gambar, lalu klik OK.
   

Tindakan ini akan menambahkan gambar ke aplikasi Anda, tetapi letaknya mungkin tidak pas dan ukurannya tidak memenuhi layar. Anda akan memperbaikinya di langkah berikutnya.

Memosisikan dan mengukur ImageView

1. Klik dan tarik ImageView di sekitar Layout Editor, dan perhatikan bahwa saat Anda menyeret, kotak merah muda akan muncul di sekitar layar aplikasi di tampilan Design. Kotak merah muda menunjukkan batas layar untuk memosisikan ImageView.
2. Letakkan ImageView dengan tepi kiri dan kanan sejajar kotak merah muda. Android Studio akan mengepaskan gambar ke tepi saat Anda hampir mencapainya. (Anda akan menangani bagian atas dan bawah sebentar lagi.)
   

Views di ConstraintLayout perlu memiliki batasan horizontal dan vertikal untuk memberi tahu ConstraintLayout cara memosisikannya. Anda akan menambahkan batasan tersebut nanti.

Catatan: Batasan dalam konteks Layout Editor mewakili sambungan atau perataan suatu tampilan dengan tampilan lain, tata letak induk, atau garis panduan tak kasatmata. Misalnya, tampilan dapat dibatasi menjadi jarak tertentu dari tepi penampungnya, atau selalu berada di sebelah kanan tampilan lain, atau selalu tampilan teratas di dalam penampung.

1. Arahkan kursor ke lingkaran di bagian atas garis batas ImageView, dan tandai dengan lingkaran lain.
2. Seret lingkaran ke bagian atas layar aplikasi, dan tanda panah akan menghubungkan lingkaran ke pointer seiring Anda menariknya. Tarik untuk mengepaskannya ke bagian atas layar. Anda telah menambahkan batasan dari bagian atas ImageView ke bagian atas ConstraintLayout.
   
   
3. Tambahkan batasan dari bagian bawah ImageView ke bagian bawah ConstraintLayout.

Tips: Batasan akan lebih sulit ditambahkan jika Anda menambahkan lebih banyak Views di layar. Jika Anda menambahkan batasan ke View yang salah, Anda dapat mengurungkan langkah tersebut dengan Control+Z (Command+Z di Mac.) Atau, klik kanan pada View yang akan memunculkan menu, lalu pilih Clear Constraints of Selection yang akan menghapus semua batasan pada View.

4. Di panel Attributes, gunakan Constraint Widget untuk menambahkan margin 0 ke sisi kiri dan kanan. Tindakan ini akan otomatis membuat batasan ke arah tersebut.
   

Sekarang gambar sudah berada di tengah, tetapi belum memenuhi seluruh layar. Anda akan memperbaikinya di langkah berikutnya.

1. Di bawah Constraint Widget di bagian Constraint, tetapkan layout_width ke 0dp (match constraint).
   0dp adalah singkatan untuk memberi tahu Android Studio agar menggunakan match constraint untuk lebar ImageView. "match constraints artinya.... Batasan yang baru saja Anda tambahkan akan menjadikannya selebar ConstraintLayout, dikurangi margin.
   
2. Tetapkan layout_height menjadi 0dp (match constraint).
   Karena batasan yang Anda tambahkan, nilai ini membuat ImageView setinggi ConstraintLayout, dikurangi margin.
   
3. ImageView selebar dan setinggi layar aplikasi, tetapi foto ditempatkan di tengah dalam ImageView dan ada banyak spasi kosong di atas dan bawah foto. Namun, karena komposisi seperti ini tidak terlihat menarik, Anda harus menyesuaikan scaleType dari ImageView, yang menjelaskan cara menyesuaikan ukuran dan menyelaraskan gambar. Baca lebih lanjut ScaleType dalam panduan referensi developer. Aplikasi Anda sekarang seharusnya terlihat seperti di bawah ini.
   
4. Cari atribut scaleType. Anda mungkin perlu men-scroll ke bawah atau menelusuri atribut ini. Coba tetapkan nilai scaleType yang berbeda untuk mengetahui dampaknya.

Tips: Untuk menemukan properti yang Anda inginkan dalam daftar semua properti, klik ikon kaca pembesar di sebelah kanan Attributes, dan ketikkan nama properti. Android Studio hanya akan menampilkan properti yang berisi string tersebut.

5. Setelah selesai, tetapkan scaleType ke centerCrop karena ini akan membuat gambar mengisi layar tanpa mendistorsinya.

Gambar kue kini akan memenuhi seluruh layar, seperti yang ditunjukkan di bawah ini.

Namun, kini Anda tidak dapat melihat tanda tangan dan ucapan selamat ulang tahun. Anda akan memperbaikinya di langkah berikutnya.

Memindahkan ImageView ke belakang teks

Setelah membuat ImageView agar mengisi layar, Anda tidak dapat melihat teksnya lagi. Itu karena gambar sekarang menutupi teks. Ternyata, urutan penempatan elemen UI sangatlah penting. Tadi Anda menambahkan TextViews terlebih dahulu, lalu menambahkan ImageView, yang berarti ImageView ada di posisi teratas. Jika Anda menambahkan sejumlah tampilan ke tata letak, tampilan tersebut akan ditempatkan di urutan belakang daftar tampilan yang ada, dan akan digambar sesuai urutannya dalam daftar. ImageView ditambahkan ke akhir daftar Views di ConstraintLayout, yang berarti akan digambar terakhir dan digambar di atas TextViews. Untuk memperbaikinya, Anda harus mengubah urutan tampilan dan memindahkan ImageView ke awal daftar agar digambar terlebih dahulu.

1. Di Component Tree, klik ImageView, dan tarik ke atas TextViews tepat di bawah ConstraintLayout. Garis biru beserta ikon segitiga akan muncul dan menunjukkan batasan ImageView. Letakkan ImageView tepat di bawah ConstraintLayout.
   
   

ImageView sekarang ada di urutan pertama dalam daftar di bawah ConstraintLayout, dan TextViews berada setelahnya. Teks 'Selamat Ulang Tahun, Bud!"dan 'Dari Emma." teks sekarang harus terlihat, tetapi "Selamat Ulang Tahun, Sam!" mungkin sulit dibaca karena teks gelap dengan latar belakang gelap. (Untuk saat ini, abaikan peringatan tidak ada deskripsi konten.)

Mengubah warna teks

Teks salam dan tanda tangan Anda sekarang ada di depan gambar. Namun, teks tersebut mungkin tetap sulit dilihat, bergantung pada warna teks yang Anda pilih. Pada langkah ini, Anda akan menetapkan warna teks agar muncul lebih baik dengan gambar di belakangnya.

1. Pilih TextView pertama dengan mengkliknya di Component Tree.
2. Di Attributes, klik atribut textColor, lalu mulai ketik white.
   Perhatikan bahwa saat Anda mengetik, Android Studio akan menampilkan daftar warna yang berisi teks yang telah Anda ketik sejauh ini.
   
3. Pilih @android:color/white dari daftar warna dan tekan Enter. Android menentukan sejumlah warna sehingga Anda dapat menggunakannya secara konsisten di berbagai bagian aplikasi.
4. Lakukan hal yang sama untuk TextView lainnya.
5. Jalankan aplikasi dan amati bahwa teks kini jauh lebih mudah dibaca.
   

Selamat! Anda telah menambahkan gambar ke aplikasi Android, dan teks Anda terlihat bagus!!

Saat Anda menambahkan TextViews di codelab sebelumnya, Android Studio menandainya dengan segitiga peringatan. Pada langkah ini, Anda akan memperbaiki peringatan tersebut dan juga memperbaiki peringatan di ImageView.

Menerjemahkan

Saat Anda menulis aplikasi, penting untuk diingat bahwa aplikasi mungkin diterjemahkan ke bahasa lain. Seperti yang sudah Anda pelajari di codelab sebelumnya, string adalah rangkaian karakter seperti "Selamat Ulang Tahun, Bud!".

String yang di-hardcode adalah string yang ditulis langsung dalam kode aplikasi Anda. String tersebut membuat aplikasi lebih sulit diterjemahkan ke bahasa lain, dan juga lebih sulit untuk menggunakan kembali string di berbagai tempat di aplikasi. Anda dapat mengatasi masalah tersebut dengan "mengekstrak string ke file resource". Itu berarti, masukkan string ke dalam sebuah file, beri nama, lalu gunakan nama tersebut setiap kali Anda ingin menggunakan string ini, bukan meng-hardcode string yang ada di dalam kode. Nama filenya akan tetap sama, meskipun Anda mengubah string atau menerjemahkannya ke bahasa lain.

1. Klik segitiga oranye di samping TextView pertama yang berisi "Selamat Ulang Tahun, Bud!"
   Android Studio akan membuka jendela berisi informasi lebih lanjut dan perbaikan yang disarankan. Anda mungkin perlu men-scroll ke bawah untuk melihat Suggested Fix.
   
   
2. Klik tombol Perbaiki.
   Android Studio akan membuka dialog Extract Resource. Dalam dialog ini, Anda dapat menyesuaikan nama resource string dan sejumlah informasi terkait cara penyimpanannya. Resource name merupakan nama yang dipakai untuk string. Resource value adalah isi dari string-nya.
3. Pada dialog Extract Resource , ubah Resource name menjadi happy_birthday_text. Resource string harus memiliki nama huruf kecil, dan jika namanya terdiri dari beberapa kata harus dipisahkan dengan garis bawah. Biarkan setelan lain menggunakan setelan default.
   
4. Klik tombol OK.
5. Di panel Attributes, temukan atribut text, dan perhatikan bahwa Android Studio otomatis menetapkannya ke @string/happy_birthday_text untuk Anda.
   
6. Buka strings.xml (app > res > values > strings.xml) dan perhatikan bahwa Android Studio telah membuat resource string yang disebut happy_birthday_text.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

File strings.xml memiliki daftar string yang akan dilihat pengguna di aplikasi Anda. Perhatikan bahwa nama aplikasi Anda juga merupakan resource string. Dengan menempatkan string di satu tempat, Anda bisa menerjemahkan semua teks dalam aplikasi dengan mudah, dan menggunakan kembali string di berbagai bagian aplikasi dengan lebih mudah.

7. Ikuti langkah yang sama untuk mengekstrak teks tanda tangan TextView, dan beri nama resource string-nya sebagai signature_text.

File yang sudah jadi akan terlihat seperti ini.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

Memeriksa aksesibilitas aplikasi Anda

Dengan mengikuti praktik coding yang baik untuk aksesibilitas, semua pengguna, termasuk pengguna dengan disabilitas, dapat lebih mudah menjelajahi dan berinteraksi dengan aplikasi Anda.

Catatan: Android menyediakan banyak fitur bagi pengguna. Misalnya, TalkBack adalah pembaca layar Google yang disertakan di perangkat Android. TalkBack memberikan respons lisan kepada pengguna sehingga mereka dapat menggunakan perangkatnya tanpa perlu melihat layar. Baca selengkapnya mengenai aksesibilitas di panduan referensi developer.

Android Studio menyediakan petunjuk dan peringatan agar aplikasi Anda lebih mudah diakses.

1. Pada Component Tree, perhatikan segitiga oranye di sebelah ImageView yang sebelumnya Anda tambahkan. Jika Anda mengarahkan pointer ke atasnya, Anda akan melihat tooltip yang berisi peringatan tentang atribut 'contentDescription' yang tidak ada pada gambar. Deskripsi konten, yang berfungsi menjelaskan tujuan elemen UI, dapat membuat aplikasi Anda jadi lebih bermanfaat jika digunakan dengan fitur TalkBack.

Namun, gambar dalam aplikasi ini hanya untuk dekorasi. Fungsi ini tidak melakukan apa pun jika pengguna mengetuknya, dan tidak memiliki arti khusus untuk aksesibilitas. Alih-alih menyetel deskripsi konten, Anda akan menandai ImageView sehingga sistem tahu bahwa ini tidak penting untuk aksesibilitas. Pembaca layar akan melewatinya.

2. Di Component Tree, pilih ImageView.
3. Di jendela Attributes, di bagian All Attributes, temukan importantForAccessibility dan tetapkan ke no.
   

Segitiga oranye di samping ImageView akan hilang.

4. Jalankan lagi aplikasi Anda untuk memastikan aplikasi masih berfungsi dengan baik.

Selamat! Anda telah menambahkan gambar ke aplikasi Selamat Ulang Tahun dengan mengikuti panduan aksesibilitas sehingga mudah diterjemahkan ke bahasa lain!

Kode solusi untuk aplikasi Selamat Ulang Tahun telah kami upload ke GitHub jika Anda ingin tahu seluruh kode yang dipakai untuk aplikasi ini.

GitHub adalah layanan yang dapat digunakan developer untuik mengelola kode project software yang mereka buat. Layanan ini menggunakan Git sebagai sistem kontrol versi yang memantau jika ada perubahan pada setiap versi kode. Jika Anda pernah melihat histori versi dokumen di Google Dokumen, Anda dapat melihat waktu dan hasil edit pada dokumen sebelumnya. Proses di GitHub kurang lebih sama, Anda dapat melacak histori versi kode yang ada di sebuah project. Cara ini sangat membantu jika Anda mengerjakan sendiri atau bersama tim.

GitHub juga memiliki situs web yang dapat digunakan untuk melihat dan mengelola project. Anda dapat menggunakan link GitHub berikut ini untuk mencari file project Selamat Ulang Tahun secara online atau mendownloadnya ke komputer.

URL Kode Solusi: https://github.com/google-developer-training/android-basics-kotlin-<APPNAME>

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

Mendapatkan kode

1. Klik URL Kode Solusi. Tindakan ini akan membuka halaman GitHub project di browser.
2. Di halaman GitHub project, klik tombol Clone or download dan dialog Clone akan muncul.

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

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

3. Di dialog Import Project, 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 membuat dan menjalankan aplikasi. Pastikan fitur ini berfungsi seperti yang diharapkan.
7. Cari file project di jendela alat Project untuk melihat cara aplikasi diterapkan.

Bantuan: Lihat Panduan Bantuan dan Pemecahan Masalah jika kode yang didownload tidak dimuat atau berjalan dengan benar.

• Resource Manager di Android Studio membantu menambahkan dan mengatur gambar serta resource lainnya.
• ImageView adalah elemen UI untuk menampilkan gambar di aplikasi.
• ImageViews harus memiliki deskripsi konten agar aplikasi juga dapat diakses oleh penyandang disabilitas.
• Teks yang ditampilkan kepada pengguna, seperti ucapan ulang tahun, harus diekstrak ke resource string agar aplikasi mudah diterjemahkan ke bahasa lain.

• Resource Manager di Android Studio
• Kelas ImageView
• Aksesibilitas
• Mendukung berbagai bahasa
• Mulai Menggunakan GitHub

Catatan: Latihan bersifat opsional. Dengan latihan, Anda bisa mempraktikkan ilmu yang telah Anda pelajari dalam codelab ini.

Lakukan hal berikut:

1. Buat aplikasi kartu ulang tahun dengan desain Anda sendiri.
2. Mulailah dengan memikirkan Views yang akan diperlukan.
3. Urutan apa yang paling mudah untuk ditambahkan?
4. Gambar apa yang perlu Anda tambahkan ke folder drawable?

Ada dua jenis gambar bitmap yang umum digunakan untuk aplikasi Android, yaitu file JPEG dan file PNG. File PNG dapat memiliki area transparan (kosong) di dalamnya. Baca format gambar selengkapnya di referensi developer.

5. Jangan lupa memosisikan Views terlebih dahulu dengan batasan dan margin, lalu menata gayanya.
6. Untuk membuat teks lebih menonjol di beberapa gambar, coba bereksperimen dengan shadowColor, shadowDx, shadowDy, dan shadowRadius
   

Periksa hasil kerja Anda:

Aplikasi yang sudah selesai akan berjalan tanpa error dan menampilkan kartu ulang tahun yang sudah Anda desain.