Menambahkan gambar ke aplikasi Android Anda

1. Pengantar

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 Membuat Kartu Ulang Tahun.

2. Menyiapkan aplikasi

1. Buka project Anda dari codelab sebelumnya di Android Studio. Anda dapat menggunakan kode solusi atau kode yang sudah Anda buat. Saat Anda menjalankan aplikasi, maka 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. Klik di sini untuk mengakses gambar kartu ulang tahun Anda di GitHub.
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.png. 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 Next. Android Studio akan menampilkan pratinjau gambar.
8. Klik Import.
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. Pastikan bahwa gambar ada di folder drawable pada aplikasi Anda dengan meluaskan app > res > drawable.

3. Menambahkan ImageView

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 sudah 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).

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.

3. Arahkan kursor ke lingkaran di bagian atas garis batas ImageView, dan tandai dengan lingkaran lain.
4. 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.

5. Tambahkan batasan dari bagian bawah ImageView ke bagian bawah ConstraintLayout. Letaknya mungkin terlalu dekat dengan tepi untuk bisa ditarik, seperti yang Anda lakukan di bagian atas. Jika demikian, Anda dapat mengeklik tanda + di bagian bawah pada Constraint Widget di jendela Attributes untuk menambahkan batasan. Pastikan marginnya 0.

6. 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:

7. Di bawah Constraint Widget di bagian Constraint, tetapkan layout_width ke 0dp (match constraint). 0dp adalah suatu singkatan untuk memberi tahu Android Studio agar menggunakan match constraint untuk lebar ImageView. Batasan yang baru saja Anda tambahkan akan menjadikannya selebar ConstraintLayout, dikurangi margin.

8. Tetapkan layout_height ke 0dp (match constraint). Batasan yang Anda tambahkan akan menjadikan ImageView setinggi ConstraintLayout, dikurangi margin.

9. ImageView selebar dan setinggi layar aplikasi, tetapi gambar diletakkan di tengah dalam ImageView dan ada banyak spasi kosong di atas dan bawah gambar. 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.

10. Cari atribut scaleType. Anda mungkin perlu men-scroll ke bawah atau menelusuri atribut ini. Coba tetapkan nilai scaleType yang berbeda untuk mengetahui dampaknya.

11. 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.

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 Annisa". kini seharusnya terlihat. (Untuk saat ini, abaikan peringatan tidak ada deskripsi konten.)

Selamat! Anda telah menambahkan gambar ke aplikasi Android!

4. Menerapkan praktik coding yang baik

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 digunakan kembali 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 memuat tulisan "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 Fix. Android Studio akan menampilkan 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.

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 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 yang ada dalam aplikasi ini hanya disertakan sebagai penghias saja. Jadi, Anda tidak perlu menyetel deskripsi konten yang akan diucapkan kepada pengguna. Untuk melakukannya, cukup beri tahu TalkBack untuk melewati ImageView dengan menyetel atribut importantForAccessibility ke no.

2. Di Component Tree, pilih ImageView.
3. Di jendela Attributes, di bagian All Attributes, cari 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!

5. Kode solusi

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.

Untuk mendapatkan kode yang dipakai pada 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.

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. Dalam folder project, pilih folder Selamat Ulang Tahun.
5. Klik Open.
6. Tunggu Android Studio membuka project.
7. Klik tombol Run untuk mem-build dan menjalankan aplikasi. Pastikan aplikasi di-build seperti yang diharapkan.
8. Cari file project di jendela alat Project untuk melihat cara aplikasi disiapkan.

6. Ringkasan

• 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.

7. Mempelajari lebih lanjut

• Kosakata Dasar-Dasar Android di Kotlin
• Resource Manager di Android Studio
• Kelas ImageView
• Aksesibilitas
• Mendukung berbagai bahasa
• Mulai Menggunakan GitHub

8. Berlatih sendiri

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 menarik 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.

Selamat, Anda berhasil membuat Kartu Ulang Tahun sendiri! Bagikan aplikasi buatan Anda di media sosial, dan gunakan hashtag #LearningKotlin sehingga kami dapat melihatnya!