Menambahkan gambar ke aplikasi Android Anda

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Sebelum memulai

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

Prasyarat

  • Pengetahuan dasar tentang cara membuat dan menjalankan aplikasi di Android Studio.
  • Pengetahuan dasar tentang cara menambahkan elemen UI, seperti composable teks.

Yang akan Anda pelajari

  • Cara menambahkan gambar atau foto ke aplikasi Android.
  • Cara menampilkan gambar di aplikasi dengan composable Image.
  • Praktik terbaik menggunakan referensi String.

Yang akan Anda build

  • Tingkatkan aplikasi Selamat Ulang Tahun dengan menyertakan gambar.

Yang akan Anda butuhkan

2. Menonton video beserta kodenya (Opsional)

Jika Anda ingin menonton salah satu instruktur kursus saat tengah menyelesaikan codelab, putar video di bawah. Langkah ini opsional. Anda juga dapat melewati video dan langsung memulai petunjuk codelab.

3. Menyiapkan aplikasi

Buka project Selamat Ulang Tahun dari codelab sebelumnya di Android Studio.

Saat Anda menjalankan aplikasi, maka akan terlihat seperti screenshot ini.

212ada011eb0ee83.png

Menambahkan gambar ke project Anda

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

  1. Buka gambar untuk aplikasi kartu ulang tahun Anda dari link ini.
  2. Klik Download.

Menampilkan gambar yang akan didownload dengan tombol download.

  1. Klik kanan pada gambar lalu simpan file ke komputer sebagai androidparty.png.
  2. Catat tempat Anda menyimpan gambar.

Misalnya, Anda mungkin telah menyimpannya di folder Downloads.

  1. Di Android Studio, klik View > Tool Windows > Resource Manager atau klik tab Resource Manager di samping jendela Project.

Gambar yang menunjukkan cara membuka resource manager dari menu

menampilkan tab resource manager

  1. Klik + (Tambahkan resource ke modul) > Import Drawables.

Menampilkan cara memilih import drawables

  1. Di file browser, pilih file gambar yang Anda download, lalu klik Open.

Tindakan ini akan membuka dialog Import Drawables. ab49bbfaa7b77620.png

  1. Android Studio akan menampilkan pratinjau gambar. Pilih Density dari menu drop-down Qualifier Type. Anda akan mempelajari alasan melakukan hal ini di bagian selanjutnya.

a2e2618aca6236b.png

  1. Pilih No Density dari daftar Value.

64581b6bcd20181a.png

Perangkat Android hadir dalam berbagai ukuran layar (misalnya, ponsel, tablet, dan TV), dan layarnya juga memiliki berbagai ukuran piksel. Maksudnya, perangkat yang satu memiliki 160 piksel per inci persegi, sedangkan perangkat lainnya sesuai dengan 480 piksel dalam ruang yang sama. Jika Anda tidak mempertimbangkan variasi ini di kepadatan piksel, sistem mungkin menskalakan gambar Anda, yang dapat menghasilkan gambar buram, atau gambar besar yang mengonsumsi terlalu banyak memori, atau gambar yang berukuran tidak tepat.

Jika Anda mengubah ukuran gambar yang lebih besar dari yang dapat ditangani oleh sistem Android, akan muncul error kehabisan memori. Untuk foto dan gambar latar, seperti gambar saat ini, androidparty.png, Anda harus menempatkannya di folder drawable-nodpi, yang akan menghentikan perilaku perubahan ukuran.

Untuk informasi selengkapnya tentang kepadatan piksel, lihat Mendukung kepadatan piksel yang berbeda.

  1. Klik Next.

c413a4f51aecf9b7.png

  1. Android Studio menunjukkan struktur folder tempat gambar Anda akan ditempatkan. Perhatikan folder drawable-nodpi.
  2. Klik Import.

menampilkan pratinjau gambar yang sedang diimpor

Android Studio membuat folder drawable-nodpi dan menempatkan gambar di dalamnya. Dalam tampilan project Android Studio, nama resource ditampilkan sebagai androidparty.png (nodpi). Di sistem file komputer, Android Studio akan membuat folder bernama drawable-nodpi.

Menyoroti file andriodparty.png

Menyoroti file andriodparty.png

Jika gambar berhasil diimpor, Android Studio akan menambahkan gambar ke daftar pada tab Drawable. Daftar ini mencakup semua gambar dan ikon Anda untuk aplikasi. Sekarang Anda dapat menggunakan gambar ini di aplikasi Anda.

435eb5cfd15260f8.png

  1. Kembali ke tampilan project, klik View > Tool Windows > Project atau klik tab Project di bagian paling kiri.
  2. Klik app > res > drawable untuk mengonfirmasi bahwa gambar ada di folder drawable.

panel project dipilih

4. Menambahkan Composable gambar

Untuk menampilkan gambar di aplikasi Anda, gambar memerlukan tempat untuk ditampilkan. Sama seperti menggunakan composable Text untuk menampilkan teks, Anda dapat menggunakan composable Image untuk menampilkan gambar.

Dalam tugas ini, Anda akan menambahkan composable Image ke aplikasi, menyetel gambarnya ke gambar kue yang sudah didownload, memosisikannya, dan menyesuaikan ukurannya agar memenuhi layar.

Menambahkan fungsi composable untuk menambahkan gambar

  1. Di file MainActivity.kt, tambahkan fungsi BirthdayGreetingWithImage() sebelum fungsi BirthdayCardPreview().
  2. Teruskan fungsi BirthdayGreetingWithImage() dua parameter String: satu parameter bernama message untuk ucapan ulang tahun dan parameter lainnya yang disebut from untuk nama pengirim.
@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
}

Resource di Jetpack Compose

Resource adalah file tambahan dan konten statis yang digunakan kode Anda, seperti bitmap, penetapan layout, string antarmuka pengguna, instruksi animasi, dan banyak lagi. Untuk informasi selengkapnya tentang resource di Android, lihat Ringkasan resource aplikasi.

Anda harus selalu memisahkan sumber daya aplikasi seperti gambar dan string dari kode, agar Anda bisa memeliharanya secara independen. Saat waktu proses, Android menggunakan sumber daya yang sesuai berdasarkan konfigurasi saat ini. Misalnya, Anda mungkin ingin memberikan layout UI yang berbeda berdasarkan ukuran layar atau string berbeda berdasarkan setelan bahasa.

Mengelompokkan sumber daya

Anda harus selalu menempatkan setiap jenis resource di subdirektori tertentu dari direktori res/ project Anda. Misalnya, berikut hierarki file untuk proyek sederhana:

MyProject/
    src/
        MyActivity.kt
    res/
        drawable/
            graphic.png
        mipmap/
            icon.png
        values/
            strings.xml

Seperti yang dapat Anda lihat dalam contoh ini, direktori res/ berisi semua resource di subdirektori, yang mencakup direktori drawable untuk resource gambar, direktori mipmap/ untuk ikon peluncur, dan direktori values/ untuk resource string. Untuk mempelajari penggunaan, format, dan sintaksis resource aplikasi lebih lanjut, lihat Ringkasan jenis resource.

Mengakses sumber daya

Jetpack Compose dapat mengakses resource yang ditentukan dalam project Android Anda. Resource dapat diakses dengan ID resource yang dibuat di class R project.

Class R adalah class yang dibuat secara otomatis oleh Android yang berisi ID semua resource dalam project. Biasanya, ID resource sama dengan nama file. Misalnya, gambar dalam hierarki file sebelumnya dapat diakses dengan kode ini:

R.drawable.graphic

R adalah drawable class yang dihasilkan secara otomatis adalah subdirektori dalam grafis folder res adalah ID resource

Pada tugas berikutnya, Anda akan menggunakan gambar, file androidparty.png, yang telah ditambahkan di tugas sebelumnya.

  1. Dalam fungsi BirthdayGreetingWithImage(), deklarasikan properti val dan beri nama image.
  2. Lakukan panggilan ke fungsi painterResource() dengan meneruskan resource androidparty. Tetapkan nilai yang ditampilkan ke image.
val image = painterResource(R.drawable.androidparty)

Fungsi painterResource() memuat resource gambar drawable, dan menggunakan ID resource (dalam kasus ini R.drawable.androidparty) sebagai argumen.

  1. Setelah panggilan ke fungsi painterResource(), tambahkan composable Image, lalu teruskan di image sebagai argumen bernama untuk painter.
Image(
   painter = image
)

Android Studio menampilkan error yang menyatakan, "Tidak satu pun dari fungsi berikut yang dapat dipanggil dengan argumen yang disediakan" argumen tidak cocok dengan fungsi. Anda dapat melihat error saat mengarahkan kursor ke composable Image. Alasan error ini adalah argumen yang Anda teruskan dalam fungsi composable Image() tidak memadai dan tidak cocok dengan fungsi nama pengirim. Pada langkah berikutnya, Anda dapat memperbaiki error tersebut.

Fungsi gambar ditandai dan pop-up dengan berbagai fungsi dan menyatakan tidak ada yang dapat dipanggil dengan argumen yang disediakan

Memeriksa aksesibilitas aplikasi Anda

Saat mengikuti praktik coding untuk aksesibilitas, Anda mengizinkan semua pengguna, termasuk yang memiliki disabilitas, lebih mudah membuka dan berinteraksi dengan aplikasi Anda.

Android Studio menyediakan petunjuk dan peringatan agar aplikasi Anda lebih mudah diakses. Deskripsi konten menentukan tujuan elemen UI, yang membuat aplikasi agar lebih mudah digunakan dengan TalkBack.

Namun, gambar yang ada dalam aplikasi ini hanya disertakan sebagai penghias saja. Penambahan deskripsi konten untuk gambar akan mempersulit penggunaan TalkBack dalam kasus ini. Anda dapat menyetel argumen contentDescription gambar ke null agar TalkBack melewati composable Image, bukan menyetel deskripsi konten yang diumumkan kepada pengguna.

  • Dalam composable Image, tambahkan argumen bernama lain yang disebut contentDescription dan tetapkan nilainya ke null.
Image(
   painter = image,
   contentDescription = null
)

Lihat pratinjau composable Image

Dalam tugas ini, Anda akan melihat pratinjau composable gambar dan menjalankan aplikasi di emulator atau perangkat.

  1. Di fungsi BirthdayCardPreview(), ganti panggilan fungsi BirthdayGreetingWithText() dengan fungsi BirthdayGreetingWithImage().

Fungsi Anda akan terlihat seperti cuplikan kode ini:

@Preview(showBackground = false)
@Composable
fun BirthdayCardPreview() {
   HappyBirthdayTheme {
       BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma")
   }
}
  1. Di panel Design, klik 609ccb451d05cf6b.png Build & Refresh.

Perhatikan bahwa Anda tidak dapat melihat teks lagi karena fungsi baru hanya memiliki composable Image, tetapi bukan composable Text.

3bf28a760bbcd266.png

5. Menambahkan tata letak Box

Tiga elemen tata letak standar dan dasar di Compose adalah composable Column, Row, dan Box. Anda telah mempelajari composable Column, Row di codelab sebelumnya. Sekarang Anda akan mengeksplorasi composable Box lebih lanjut.

Tata letak Box adalah salah satu elemen tata letak standar di Compose. Gunakan tata letak Box untuk menumpuk elemen di atas satu sama lain. Tata letak Box juga memungkinkan Anda mengonfigurasi pemerataan spesifik elemen di dalamnya.

4d191637aaecf374.png

  1. Dalam fungsi BirthdayGreetingWithImage(), tambahkan composable Box di sekitar composable Image seperti yang ditunjukkan:
@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
   val image = painterResource(R.drawable.androidparty)
   //Step 3 create a box to overlap image and texts
   Box {
      Image(
          painter = image,
          contentDescription = null
          )
   }
}
  1. Di akhir composable Box, panggil fungsi BirthdayGreetingWithText(), lalu teruskan pesan ulang tahun dan nama pengirim seperti yang ditunjukkan di bawah ini:
@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
   val image = painterResource(R.drawable.androidparty)
   //Step 3 create a box to overlap image and texts
   Box {
      Image(
          painter = image,
          contentDescription = null
          )
      BirthdayGreetingWithText(message = message, from = from)
   }
}
  1. Klik Build & Refresh di panel Design untuk melihat pratinjau yang telah diupdate.

Anda akan melihat teks dan gambar.

Gambar cupcake ditempatkan dengan ucapan ulang tahun dan teks nama pengirim

  1. Untuk membuat perubahan di atas tercermin di emulator atau perangkat, dalam fungsi onCreate(), ganti panggilan fungsi BirthdayGreetingWithText() dengan fungsi BirthdayGreetingWithImage().

Blok setContent Anda akan terlihat seperti cuplikan kode ini:

setContent {
   HappyBirthdayTheme {
       // A surface container using the 'background' color from the theme
       Surface(color = MaterialTheme.colors.background) {
           BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma")
       }
   }
}
  1. Menjalankan aplikasi di emulator atau perangkat.

Perhatikan bahwa gambar selebar layar aplikasi, tetapi gambar ditautkan ke bagian atas layar. Terdapat banyak spasi kosong di bagian bawah layar yang tidak terlihat begitu menarik. Pada tugas berikutnya, Anda akan mengisi lebar dan tinggi layar, serta menskalakan gambar untuk mengisi seluruh layar.

29eeec700ad8186e.png

6. Memosisikan dan menskalakan composable Gambar

Dalam tugas ini, Anda akan membuat gambar layar penuh untuk mempercantik aplikasi. Untuk melakukannya, gunakan parameter Modifier dan ContentScale.

Pengubah

Pengubah digunakan untuk mendekorasi atau menambahkan perilaku ke elemen UI Jetpack Compose. Misalnya, Anda dapat menambahkan latar belakang, padding, atau perilaku ke baris, teks, atau tombol. Untuk menyetelnya, composable perlu menerima pengubah sebagai parameter.

Dalam codelab sebelumnya, Anda telah mempelajari pengubah dan menggunakan pengubah padding (Modifier.padding) untuk menambahkan ruang di sekitar composable Text. Pengubah dapat melakukan banyak hal dan Anda akan melihatnya dalam jalur ini dan jalur mendatang.

Misalnya, composable Text ini memiliki argumen Modifier yang mengubah warna latar belakang menjadi hijau.

Text(
    text = "Hello, World!",
    // Solid element background color
    modifier = Modifier.background(color = Color.Green)
)

Sekarang, saatnya Anda menambahkan argumen Modifier ke composable Image.

  1. Dalam fungsi BirthdayGreetingWithImage(), tambahkan argumen bernama lain ke composable Image yang disebut modifier dan beri nilai Modifier.fillMaxHeight().

Tindakan ini akan menyetel tinggi composable ke tinggi maksimum yang tersedia.

Image(
   painter = image,
   contentDescription = null,
   modifier = Modifier
       .fillMaxHeight()
)

Impor fungsi androidx.compose.foundation.layout.fillMaxHeight saat diminta oleh Android Studio.

  1. Tambahkan fungsi .fillMaxWidth() ke pengubah.

Jika harus menggunakan lebih dari satu pengubah sekaligus, Anda dapat mengaitkan panggilan ke pengubah secara bersamaan seperti yang dapat Anda lihat di cuplikan kode ini:

Image(
   painter = image,
   contentDescription = null,
   modifier = Modifier
       .fillMaxHeight()
       .fillMaxWidth()
)

Impor fungsi androidx.compose.foundation.layout.fillMaxWidth saat diminta oleh Android Studio.

Menskalakan konten

Anda telah menambahkan gambar ke aplikasi dan memosisikan gambar. Sekarang, Anda perlu menyesuaikan jenis skala gambar, yang mengatakan cara menyesuaikan ukuran gambar, untuk menjadikannya layar penuh.

Terdapat beberapa jenis ContentScale yang tersedia. Anda menggunakan penskalaan parameter ContentScale.Crop, yang menskalakan gambar secara seragam untuk mempertahankan rasio tinggi lebar sehingga lebar dan tinggi gambar sama dengan, atau lebih besar dari, dimensi layar yang sesuai, seperti yang ditunjukkan pada gambar ini.

9d99146daeb20ff2.png

  1. Tambahkan argumen bernama ContentScale ke gambar.
Image(
   painter = image,
   contentDescription = null,
   modifier = Modifier
       .fillMaxHeight()
       .fillMaxWidth(),
   contentScale = ContentScale.Crop
)
  1. Impor androidx.compose.ui.layout.ContentScale, properti ketika diminta oleh Android Studio.

Kodenya banyak sekali! Saatnya melihat pratinjau semua kerja keras Anda.

Melihat pratinjau gambar

  • Klik Build & Refresh di panel Design.

Gambar kue kini akan memenuhi seluruh layar pratinjau seperti yang dapat Anda lihat di screenshot ini:

Gambar cupcake dengan ucapan ulang tahun dan nama pengirim

Menjalankan di perangkat

Jalankan aplikasi di perangkat atau emulator.

Sudah berhasil dengan gambar layar penuh dan pesan teks.

7. Meratakan teks dan menambahkan padding

Dalam tugas ini, Anda akan mengisi dan meratakan pesan teks untuk mempercantik aplikasi lebih lanjut.

  1. Dalam file MainActivity.kt, scroll ke fungsi BirthdayGreetingWithText(), lalu temukan pesan ulang tahun, yang merupakan composable Text pertama.
  2. Tambahkan argumen bernama modifier ke pesan ulang tahun, lalu setel nilai Modifier.fillMaxWidth(). Tindakan ini akan menyetel lebar composable ke lebar maksimum yang tersedia.
  3. Ikat fungsi .wrapContentWidth() lainnya ke Modifier. Tindakan ini akan menggabungkan dan meratakan composable di atas lebar layar yang tersedia (atau lebar induk).
  4. Teruskan fungsi .wrapContentWidth() ke argumen Alignment.Start. Tindakan ini akan meratakan composable Teks, atau elemen turunan, ke awal/awal layar, atau elemen induk.
modifier = Modifier
   .fillMaxWidth()
   .wrapContentWidth(Alignment.Start)

470075ea26fdf4f8.png

Pesan composable Text akan terlihat seperti cuplikan kode ini:

Text(
   text = message,
   fontSize = 36.sp,
   modifier = Modifier
  .fillMaxWidth()
       .wrapContentWidth(Alignment.Start)
)

Impor properti androidx.compose.ui.Alignment dari paket compose.ui.

Padding

Elemen UI menggabungkan dirinya sendiri di kontennya. Agar tidak terlalu ketat, Anda dapat menentukan jumlah padding di setiap sisi.

Padding digunakan sebagai pengubah, yang berarti Anda dapat menerapkannya ke composable mana pun. Untuk setiap sisi composable, pengubah padding mengambil argumen opsional yang menentukan jumlah padding.

Diagram menampilkan padding awal dan akhir awal atas

// This is an example. Don't copy it over
Modifier.padding(
    start = 16.dp,
    top = 16.dp,
    end = 16.dp,
    bottom = 16.dp
)
  1. Ikat panggilan fungsi .padding() ke Modifier, lalu teruskan argumen bernama start yang disetel ke 16.dp dan argumen bernama top yang disetel ke 16.dp.
Text(
   text = message,
   fontSize = 36.sp,
   modifier = Modifier
       .fillMaxWidth()
       .wrapContentWidth(Alignment.Start)
       .padding(start = 16.dp, top = 16.dp)
)
  1. Jika Android Studio tidak otomatis mengimpor paket ini, lakukan impor paket tersebut secara manual:
  • androidx.compose.foundation.layout.padding
  • androidx.compose.ui.unit.dp
  1. Klik Build & Refresh di panel Design, lalu perhatikan padding di bagian atas dan awal pesan ulang tahun.

Ucapan selamat ulang tahun dan nama pengirim sejajar dengan awal layar.

  1. Ratakan nama pengirim ke bagian akhir layar. Selain itu, tambahkan padding 16.dp di awal dan di akhir padding.
Text(
   text = from,
   fontSize = 24.sp,
   modifier = Modifier
       .fillMaxWidth()
       .wrapContentWidth(Alignment.End)
       .padding(start = 16.dp, end = 16.dp)
)
  1. Klik Build & Refresh di panel Design, lalu perhatikan padding dan perataan pada nama pengirim.

Ucapan ulang tahun sejajar dengan awal layar dan nama pengirim sejajar dengan akhir layar.

Bagus! Anda telah menambahkan gambar ke aplikasi Android!

8. Menggunakan praktik kode yang baik

Terjemahan

Saat Anda menulis aplikasi, penting untuk diingat bahwa aplikasi mungkin diterjemahkan ke bahasa lain. Seperti yang telah Anda pelajari di codelab sebelumnya, jenis data String adalah urutan karakter, seperti "Happy Birthday, Sam!".

String yang di-hardcode adalah string yang ditulis langsung dalam kode aplikasi Anda. String tersebut akan mempersulit penerjemahan aplikasi ke dalam bahasa lain dan lebih sulit untuk menggunakan kembali string di berbagai tempat di aplikasi. Anda dapat mengekstrak string ke dalam file resource untuk menyelesaikan masalah ini. Daripada melakukan hardcode string dalam kode, Anda dapat menempatkan string ke dalam file, beri nama resource string, dan gunakan nama tersebut setiap kali Anda ingin menggunakan string. Namanya tetap sama, meskipun Anda mengubah string atau menerjemahkannya ke bahasa lain.

  1. Di dalam file MainActivity.kt, scroll ke fungsi onCreate(). Pilih ucapan ulang tahun, string Happy Birthday Sam!.
  2. Klik ikon lampu di sisi kiri layar.
  3. Pilih Extract string resource.

Selamat Ulang Tahun Sam dipilih dengan mengklik ikon lampu yang akan menampilkan menu drop-down.

Android Studio akan menampilkan dialog Extract Resource. Dalam dialog ini, Anda dapat menyesuaikan nama resource string dan sejumlah informasi terkait cara penyimpanannya. Kolom Resource name adalah tempat untuk memasukkan nama panggilan untuk string. Kolom Resource value adalah tempat Anda memasukkan string sebenarnya.

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

2849a324f8a7c805.png

  1. Klik OK.
  2. Perhatikan perubahan dalam kode.

String hardcode kini diganti dengan fungsi stringResource().

HappyBirthdayTheme {
   // A surface container using the 'background' color from the theme
   Surface(color = MaterialTheme.colors.background) {
       BirthdayGreetingWithImage( stringResource(R.string.happy_birthday_text), "- from Emma")
   }
}
  1. Di panel Project, buka file strings.xml dari jalur app > res > values > strings.xml lalu perhatikan bahwa Android Studio 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.

  1. Ikuti langkah yang sama untuk mengekstrak teks nama pengirim composable Text, tetapi kali ini masukkan signature_text di kolom Resource name.

File yang sudah jadi akan terlihat seperti cuplikan kode 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>
  1. Jalankan lagi aplikasi Anda untuk memastikan bahwa aplikasi masih berfungsi dengan baik.

Ucapan ulang tahun dan nama pengirim yang menutupi gambar cupcake.

9. Coba tantangan ini

Anda berhasil menambahkan gambar ke aplikasi. Berikut tantangannya:

  • Susun atau ratakan kedua composable teks agar keduanya di tengah.

Berikut petunjuknya: Gunakan argumen Alignment.CenterHorizontally dengan fungsi wrapContentWidth().

Aplikasi Anda seharusnya terlihat seperti ini:

Ucapan ulang tahun Selamat ulang tahun Sam Signature dari gambar emma Cupcake di tengah

Berikut adalah kode solusi untuk fungsi BirthdayGreetingWithText() bagi referensi Anda:

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
   Column {
       Text(
           text = message,
           fontSize = 36.sp,
           modifier = Modifier
               .fillMaxWidth()
               .wrapContentWidth(Alignment.CenterHorizontally)
               .padding(start = 16.dp, top = 16.dp)

       )
       Text(
           text = from,
           fontSize = 24.sp,
           modifier = Modifier
               .fillMaxWidth()
               .wrapContentWidth(Alignment.CenterHorizontally)
               .padding(start = 16.dp, end = 16.dp)
       )
   }
}

10. Mendapatkan kode solusi

Kode solusi untuk aplikasi Selamat Ulang Tahun terdapat di GitHub.

GitHub adalah layanan yang dapat digunakan developer untuk mengelola kode project software mereka. Layanan ini menggunakan Git, sistem kontrol versi yang melacak perubahan yang dibuat untuk setiap versi kode. Jika Anda pernah melihat histori versi dokumen di Google Dokumen, Anda dapat melihat hasil edit yang dibuat dan waktu pengeditan tersebut. Proses di GitHub kurang lebih sama, Anda dapat melacak histori versi kode yang ada di sebuah project. Cara ini berguna saat Anda mengerjakan project sebagai individu atau tim.

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

Kode solusi untuk codelab ini terdapat dalam repositori ini dan cabang yang ditampilkan:

Cabang di GitHub

Sebelum Anda memahami apa itu cabang, pahami apa itu repositori atau repo. Repositori adalah seluruh project (direktori dan file) yang Anda clone (salin) di komputer. Cabang adalah versi repositori Anda, atau dengan kata lain, baris pengembangan independen. Sebagai contoh, dalam kursus ini, cabang starter dapat menjadi versi project Anda yang digunakan untuk mem-build selama codelab. Cabang utama atau solusi adalah versi project Anda di akhir codelab, yang berisi kode solusi lengkap.

Repositori dapat berisi beberapa cabang, yang berarti terdapat beberapa versi kode dalam repositori.

  1. Buka halaman repositori GitHub yang disediakan untuk project.
  2. Klik tombol Code. Tindakan ini akan membuka dialog.

1debcf330fd04c7b.png

  1. Dalam dialog, klik tab HTTPS, lalu klik d80cda5fcac5cc83.png di samping URL untuk menyalinnya. Gunakan URL ini di Android Studio.

52117cef9280e2c3.png

  1. Jika Android Studio tidak terbuka, buka lalu klik Get from VCS di jendela Welcome to Android Studio.

38e3cb13f6cbf3b8.png

  1. Jika Android Studio sudah terbuka, pilih File > New > Project from Version Control.

eb859f5f2f920118.png

  1. Di menu Version control pada jendela Get from Version Control, pilih Git.

c1ff21b37a87da88.png

  1. Di kotak teks URL, masukkan link yang Anda salin dari halaman repositori GitHub.
  2. Di menu Directory, pilih direktori tempat Anda ingin meng-clone kode sumber dari repositori GitHub.

d872acd8fb88d532.png

  1. Klik Clone.
  2. Tunggu Android Studio mendownload dan membuka project.
  3. Di menu navigasi Android Studio, klik 8de56cba7583251f.png 'Run app', lalu pastikan aplikasi telah dibuat seperti yang diharapkan.
  4. Di menu navigasi, klik Git > Branches.

3b3d9c44dcc1327a.png

  1. Pada dialog Git Branches di bagian Remote Branches, pilih nama cabang yang disediakan sebelumnya, lalu klik Checkout.

4d189e9e70df0234.png

  1. Jika Anda perlu beralih cabang, klik Git > Branches, lalu pilih cabang yang ingin Anda alihkan dan klik Smart Checkout.

596d8337aba9e937.png

11. Kesimpulan

Anda menambahkan gambar ke aplikasi Selamat Ulang Tahun, meratakan teks dengan pengubah, mengikuti panduan aksesibilitas, dan mempermudah penerjemahan ke bahasa lain! Selain itu, yang terpenting, Anda menyelesaikan pembuatan aplikasi Selamat Ulang Tahun sendiri! Bagikan aplikasi buatan Anda di media sosial, dan gunakan hashtag #AndroidBasics sehingga kami dapat melihatnya!

Ringkasan

  • Tab Resource Manager di Android Studio membantu menambahkan dan mengatur gambar serta resource lainnya.
  • Composable Image adalah elemen UI yang menampilkan gambar di aplikasi.
  • Composable Image harus memiliki deskripsi konten agar aplikasi Anda lebih mudah diakses.
  • Teks yang ditampilkan kepada pengguna, seperti ucapan ulang tahun, harus diekstrak ke resource string agar aplikasi mudah diterjemahkan ke bahasa lain.

Pelajari lebih lanjut