Menambahkan gambar ke aplikasi Android 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 bangun

• Tingkatkan kualitas aplikasi Happy Birthday dengan menyertakan gambar.

Yang akan Anda butuhkan

• Komputer yang dilengkapi Android Studio.
• Aplikasi dari codelab Membangun aplikasi sederhana dengan composable teks.

2. Menyiapkan aplikasi

Buka project Happy Birthday dari codelab sebelumnya di Android Studio.

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

Menambahkan gambar ke project Anda

Dalam tugas ini, Anda akan mendownload gambar dari internet dan menambahkannya ke aplikasi Happy Birthday.

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

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

Misalnya, Anda mungkin telah menyimpannya di folder Downloads.

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

Catatan: Resource Manager adalah jendela alat yang memungkinkan Anda mengimpor, membuat, mengelola, dan menggunakan resource di aplikasi.

6. Klik + (Add resources to the module) > Import Drawables.

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

Tindakan ini akan membuka dialog Import drawables.

8. Android Studio akan menampilkan pratinjau gambar. Pilih Density dari menu drop-down QUALIFIER TYPE. Anda akan mempelajari alasan melakukan hal ini di bagian selanjutnya.

9. Pilih No Density dari daftar VALUE.

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 kepadatan piksel ini, sistem mungkin akan 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.

10. Klik Next.
11. Android Studio menunjukkan struktur folder tempat gambar Anda akan ditempatkan. Perhatikan folder drawable-nodpi.
12. Klik Import(C).

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.

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.

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

3. Menambahkan composable Image

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 yang sudah didownload, memosisikannya, dan menyesuaikan ukurannya agar memenuhi layar.

Menambahkan fungsi composable untuk menambahkan gambar

1. Dalam file MainActivity.kt, tambahkan fungsi composable GreetingImage() setelah fungsi GreetingText().
2. Teruskan fungsi GreetingImage() dua parameter String: satu parameter bernama message untuk ucapan ulang tahun dan parameter lain yang bernama from untuk nama pengirim.

@Composable
fun GreetingImage(message: String, from: String) {
}

3. Setiap fungsi composable harus menerima parameter Modifier opsional. Pengubah memberi tahu elemen UI cara membuat tata letak, menampilkan, atau berperilaku dalam tata letak induknya. Tambahkan parameter lain di composable GreetingImage().

@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
}

Resource di Jetpack Compose

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

Anda harus selalu memisahkan aset aplikasi seperti gambar dan string dari kode, agar Anda bisa mengelolanya secara independen. Saat runtime, Android menggunakan resource 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 project 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 resource

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

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

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

val image = painterResource(R.drawable.androidparty)

Android Studio menandai kode painterResource karena Anda harus mengimpor fungsi untuk mengompilasi aplikasi.

3. Klik .painterResource yang ditandai oleh Android Studio.
4. Klik Import pada pop-up untuk menambahkan impor untuk androidx.compose.ui.res.painterResource.

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

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

Image(
    painter = image
)

Android Studio menandai kode Image karena Anda harus mengimpor fungsi untuk mengompilasi aplikasi.

Untuk memperbaiki peringatan ini, tambahkan impor berikut di bagian atas file MainActivity.kt Anda:

import androidx.compose.foundation.Image

Peringatan awal kini telah terselesaikan, tetapi jika Anda mengarahkan kursor ke kata Image, Android Studio akan menampilkan peringatan baru yang menyatakan, "None of the following functions can be called with the arguments supplied" (Tidak satu pun dari fungsi berikut yang dapat dipanggil dengan argumen yang disediakan). Hal ini karena argumen yang disediakan tidak cocok dengan tanda tangan fungsi Image mana pun.

Peringatan ini akan diperbaiki di bagian berikutnya.

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.

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. Untuk mempelajari aksesibilitas lebih lanjut, lihat Membangun aplikasi yang dapat diakses.

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 GreetingText() dengan panggilan fungsi GreetingImage().

Fungsi Anda akan terlihat seperti cuplikan kode ini:

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingImage(
            message = "Happy Birthday Sam!",
            from = "From Emma"
        )
    }
}

2. Panel Design akan diperbarui secara otomatis. Jika tidak, klik untuk membangun.

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

4. Menambahkan tata letak Box

Tiga elemen tata letak standar dan dasar di Compose adalah composable Column, Row, dan Box. Anda mempelajari composable Column dan 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.

1. Dalam fungsi GreetingImage(), tambahkan composable Box di sekitar composable Image seperti yang ditunjukkan:

@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
    val image = painterResource(R.drawable.androidparty)
    Box {
        Image(
            painter = image,
            contentDescription = null
        )
    }
}

2. Impor fungsi androidx.compose.foundation.layout.Box saat diminta oleh Android Studio.
3. Tambahkan kode untuk meneruskan parameter modifier ke composable Box.

@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
    val image = painterResource(R.drawable.androidparty)
    Box(modifier) {
        Image(
            painter = image,
            contentDescription = null
        )
    }
}

4. Di akhir composable Box, panggil fungsi GreetingText(), lalu teruskan pesan ulang tahun, nama pengirim, dan pengubah seperti yang ditunjukkan di bawah ini:

@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
    val image = painterResource(R.drawable.androidparty)
    Box(modifier) {
        Image(
            painter = image,
            contentDescription = null
        )
        GreetingText(
            message = message,
            from = from,
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp)
        )
    }
}

5. Perhatikan pratinjau yang telah diperbarui di panel Design.

Anda akan melihat teks dan gambar.

6. Untuk membuat perubahan di atas tercermin di emulator atau perangkat, dalam fungsi onCreate(), ganti panggilan fungsi GreetingText() dengan panggilan fungsi GreetingImage().

Blok setContent Anda akan terlihat seperti cuplikan kode ini:

setContent {
    HappyBirthdayTheme {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            GreetingImage(
                message = "Happy Birthday Sam!",
                from = "From Emma"
            )
        }
    }
}

Perhatikan bahwa gambar selebar layar, tetapi gambar ditambatkan ke bagian atas layar. Terdapat 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.

5. Mengubah opasitas dan menskalakan gambar

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

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 aspek sehingga lebar dan tinggi gambar sama dengan, atau lebih besar dari, dimensi layar yang sesuai.

1. Tambahkan argumen bernama ContentScale ke gambar.

Image(
    painter = image,
    contentDescription = null,
    contentScale = ContentScale.Crop
)

2. Impor antarmuka androidx.compose.ui.layout.ContentScale saat diminta oleh Android Studio.
3. Lihat panel Design.

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

Mengubah opasitas

Untuk meningkatkan kontras aplikasi, ubah opasitas gambar latar belakang.

Tambahkan parameter alpha ke composable Image dan setel ke 0.5F.

Image(
    painter = image,
    contentDescription = null,
    contentScale = ContentScale.Crop,
    alpha = 0.5F
)

Perhatikan perubahan opasitas gambar.

Terlalu banyak kode! Saatnya melihat pratinjau semua kerja keras Anda.

Menjalankan aplikasi

Jalankan aplikasi di perangkat atau emulator.

Anda berhasil membuat gambar layar penuh dan pesan teks. Anda juga telah mengubah opasitas gambar.

Pengubah Tata Letak

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 menetapkannya, composable atau tata letak harus 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.

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

Serupa dengan contoh di atas, Anda dapat menambahkan Pengubah ke tata letak untuk memosisikan elemen turunan menggunakan properti pengaturan dan perataan.

Untuk menyetel posisi turunan dalam Row, setel argumen horizontalArrangement dan verticalAlignment. Untuk Column, setel argumen verticalArrangement dan horizontalAlignment.

Properti pengaturan digunakan untuk mengatur elemen turunan saat ukuran tata letak lebih besar dari jumlah turunannya.

Misalnya: jika ukuran Column lebih besar dari jumlah ukuran turunannya, verticalArrangement dapat ditentukan untuk menentukan posisi turunan di dalam Column. Berikut adalah ilustrasi untuk pengaturan vertikal yang berbeda:

Demikian pula, jika ukuran Row lebih besar dari jumlah ukuran turunannya, horizontalArrangement dapat ditentukan untuk menentukan posisi turunan di dalam Row. Berikut adalah ilustrasi pengaturan horizontal yang berbeda:

Properti perataan digunakan untuk meratakan elemen turunan di awal, tengah, atau akhir tata letak.

6. Meratakan dan mengatur teks

Dalam tugas ini, Anda akan mengamati kode yang telah ditambahkan di codelab sebelumnya untuk mengatur teks di aplikasi.

1. Di dalam file MainActivity.kt, scroll ke fungsi GreetingText(). Properti verticalArrangement di kolom disetel ke Arrangement.Center. Konten teks akan diposisikan di tengah layar.

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

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.

// This is an example.
Modifier.padding(
    start = 16.dp,
    top = 16.dp,
    end = 16.dp,
    bottom = 16.dp
)

1. Giliran Anda. Dalam file MainActivity.kt, scroll ke tempat fungsi GreetingText() dipanggil dan perhatikan atribut padding.

modifier = Modifier
    .fillMaxSize()
    .padding(8.dp)

2. Perhatikan juga di dalam fungsi GreetingText(), padding untuk composable Text nama pengirim.

modifier = Modifier
    .padding(16.dp)
    .align(alignment = Alignment.End)

7. 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! tanpa tanda kutip.
2. Klik ikon lampu di sisi kiri layar.
3. Pilih Extract string resource.

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.

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

5. Klik OK.
6. Perhatikan perubahan dalam kode.

String hardcode kini diganti dengan panggilan ke fungsi getString().

GreetingImage(
    message = getString(R.string.happy_birthday_text),
    from = "From Emma",
    modifier = Modifier.padding(8.dp)
)

Catatan: Beberapa versi Android Studio mengganti string hardcode dengan fungsi getString(). Jika demikian, ubah fungsi secara manual menjadi stringResource().

Jika perlu, tambahkan import androidx.compose.ui.res.stringResource ke bagian impor.

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

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

9. Perbarui BirthdayCardPreview() untuk menggunakan stringResource() dan string yang diekstrak.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingImage(
            message = stringResource(R.string.happy_birthday_text),
            from = stringResource(R.string.signature_text)
        )
    }
}

Catatan: Jika Android Studio menampilkan pesan peringatan "Unresolved reference: stringResource" saat mengarahkan kursor ke stringResource, Anda harus menambahkan pernyataan impor untuk androidx.compose.ui.res.stringResource agar dapat menggunakan stringResource().

10. Jalankan lagi aplikasi Anda untuk memastikan bahwa aplikasi masih berfungsi dengan baik.

8. Coba tantangan ini

Anda berhasil menambahkan gambar ke aplikasi. Berikut tantangannya:

1. Atur atau ratakan composable teks nama pengirim agar sejajar dengan bagian tengah layar.

Berikut petunjuknya: Compose menawarkan pengubah align untuk memosisikan composable turunan satu per satu, menentang aturan tata letak perataan yang diterapkan oleh tata letak induk. Buat rantai argumen .align(alignment = Alignment.CenterHorizontally) dengan composable teks Modifier.

Aplikasi Anda akan terlihat seperti ini:

Berikut adalah kode solusi untuk fungsi GreetingText() sebagai referensi Anda:

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.CenterHorizontally)
        )
    }
}

9. 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 Happy Birthday secara online atau mendownloadnya di komputer.

Guna mendownload kode untuk codelab yang sudah selesai, Anda dapat menggunakan perintah git ini:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-birthday-card-app.git

Atau, Anda dapat mendownload repositori sebagai file ZIP, lalu mengekstraknya, dan membukanya di Android Studio.

Download zip

Catatan: Kode solusi ada di cabang main dari repositori yang didownload.

Jika Anda ingin melihat kode solusi, lihat di GitHub.

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

10. 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 Happy Birthday 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

• Mengelola resource UI aplikasi dengan Resource Manager
• Membuat aplikasi yang lebih mudah diakses
• Mendukung berbagai bahasa dan budaya
• Mulai Menggunakan GitHub