Mem-build aplikasi sederhana dengan composable teks

1. Sebelum memulai

Dalam codelab ini, Anda menggunakan Jetpack Compose untuk mem-build aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar.

Prasyarat

• Cara membuat aplikasi di Android Studio.
• Cara menjalankan aplikasi di emulator atau perangkat Android.

Yang akan Anda pelajari

• Cara menulis fungsi composable, seperti fungsi composable Text, Column, dan Row.
• Cara menampilkan teks di aplikasi dalam tata letak.
• Cara memformat teks, seperti mengubah ukuran teks.

Yang akan Anda build

• Aplikasi Android yang menampilkan ucapan ulang tahun dalam format teks yang akan terlihat seperti screenshot ini jika sudah selesai:

Yang akan Anda butuhkan

• Komputer yang dilengkapi Android Studio

2. Menonton video tutorial coding langsung (Opsional)

Jika Anda ingin menonton salah satu instruktur kursus saat tengah menyelesaikan codelab, putar video di bawah.

Sebaiknya luaskan video ke layar penuh. Di pemutar video, klik ikon Layar penuh agar Anda dapat melihat Android Studio dan kodenya dengan lebih jelas.

Langkah ini opsional. Anda juga dapat melewati video dan langsung memulai petunjuk codelab.

3. Menyiapkan aplikasi Selamat Ulang Tahun

Dalam tugas ini, Anda menyiapkan project di Android Studio dengan template Empty Compose Activity dan mengubah pesan teks menjadi ucapan ulang tahun yang dipersonalisasi.

Membuat project Empty Compose Activity

1. Dalam dialog Welcome to Android Studio, pilih New Project.
2. Dalam dialog New Project, pilih Empty Compose Activity, lalu klik Next.
3. Masukkan Happy Birthday di kolom Name, lalu pilih API level minimum 24 (Nougat) di kolom Minimum SDK, lalu klik Finish.

4. Tunggu hingga Android Studio membuat file project dan mem-build project tersebut.
5. Klik Run 'app'.

Aplikasinya akan terlihat seperti screenshot ini:

Saat membuat aplikasi Selamat Ulang Tahun dengan template Empty Compose Activity, Android Studio akan menyiapkan resource untuk aplikasi Android dasar, termasuk pesan Hello Android! di layar. Dalam codelab ini, Anda akan mempelajari cara memunculkan pesan tersebut, cara mengubah teksnya menjadi ucapan ulang tahun, dan cara menambahkan serta memformat pesan tambahan.

Apa itu antarmuka pengguna (UI)?

Antarmuka pengguna (UI) aplikasi adalah tampilan visual yang Anda lihat di layar: teks, gambar, tombol, dan berbagai jenis elemen lainnya, serta cara elemen tersebut diletakkan di layar. Inilah cara aplikasi menampilkan berbagai hal kepada pengguna dan cara pengguna berinteraksi dengan aplikasi.

Gambar ini berisi tombol yang dapat diklik, pesan teks, dan kolom input teks tempat pengguna dapat memasukkan data.

Tombol yang dapat diklik

Pesan teks

Kolom input teks

Setiap elemen ini disebut komponen UI. Hampir semua yang Anda lihat di layar aplikasi adalah elemen UI (juga dikenal sebagai komponen UI). Elemen tersebut dapat bersifat interaktif, seperti tombol yang dapat diklik atau kolom input yang dapat diedit, atau berupa gambar dekoratif.

Di aplikasi berikut, cobalah untuk menemukan komponen UI sebanyak mungkin.

Dalam codelab ini, Anda menggunakan elemen UI yang menampilkan teks yang disebut "elemen Text".

4. Apa itu Jetpack Compose?

Jetpack Compose adalah toolkit modern untuk mem-build UI Android. Compose menyederhanakan dan mempercepat pengembangan UI di Android dengan lebih sedikit kode, alat yang canggih, dan kemampuan Kotlin yang intuitif. Compose dapat membantu Anda mem-build UI dengan menentukan sekumpulan fungsi, yang disebut fungsi composable, yang mengambil data dan memunculkan elemen UI.

Fungsi composable

Fungsi composable adalah elemen dasar penyusun UI di Compose. Fungsi composable:

• Menjelaskan beberapa bagian UI Anda.
• Tidak menampilkan apa pun.
• Mengambil beberapa input dan menghasilkan elemen yang ditampilkan di layar.
• Dapat juga memunculkan beberapa elemen UI.

Anotasi

Anotasi adalah cara untuk melampirkan informasi tambahan ke kode. Informasi ini membantu alat seperti compiler Jetpack Compose, dan developer lain memahami kode aplikasi.

Anotasi diterapkan dengan menambahkan awalan nama (anotasi) dengan karakter @ di awal deklarasi yang Anda anotasikan. Berbagai elemen kode, seperti properti, fungsi, dan class, dapat dianotasi. Kemudian dalam kursus ini, Anda akan mempelajari class.

Diagram berikut adalah contoh fungsi yang dianotasi:

Cuplikan kode berikut memiliki contoh properti yang telah dianotasi. Anda akan menggunakannya dalam codelab selanjutnya.

// Example code, do not copy it over

@Json
val imgSrcUrl: String

@Volatile
private var INSTANCE: AppDatabase? = null

Anotasi dengan parameter

Anotasi dapat mengambil parameter. Parameter memberikan informasi tambahan ke alat yang memprosesnya. Berikut adalah beberapa contoh anotasi @Preview dengan dan tanpa parameter.

Anotasi tanpa parameter

Anotasi yang melihat pratinjau latar belakang

Anotasi dengan judul pratinjau

Anda dapat meneruskan beberapa parameter ke anotasi, seperti yang ditunjukkan di sini.

Anotasi dengan judul pratinjau dan UI sistem (layar ponsel)

Jetpack Compose mencakup berbagai anotasi bawaan, dan sejauh ini Anda telah melihat anotasi @Composable dan @Preview dalam kursus. Anda akan mempelajari anotasi dan penggunaannya lebih lanjut di bagian selanjutnya dalam kursus ini.

Contoh fungsi composable

Fungsi composable ini dianotasi dengan anotasi @Composable. Semua fungsi composable harus memiliki anotasi ini. Anotasi ini memberi tahu compiler Compose bahwa fungsi ini dimaksudkan untuk mengonversi data menjadi UI. Sebagai pengingat, compiler adalah program khusus yang mengambil kode yang Anda tulis, melihatnya baris demi baris, dan menerjemahkannya menjadi sesuatu yang dapat dipahami komputer (bahasa mesin).

Cuplikan kode ini adalah contoh dari fungsi composable sederhana yang meneruskan data (parameter fungsi name) dan menggunakannya untuk merender elemen teks di layar.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Beberapa catatan tentang fungsi composable:

• Fungsi composable dapat menerima parameter, yang memungkinkan logika aplikasi mendeskripsikan atau memodifikasi UI. Dalam hal ini, elemen UI menerima String sehingga dapat menyambut pengguna dengan nama mereka.
• Fungsi ini tidak menampilkan apa pun. Fungsi composable yang memunculkan UI tidak perlu menampilkan apa pun karena fungsi tersebut mendeskripsikan status layar yang diinginkan, bukan membuat elemen UI. Dengan kata lain, fungsi composable hanya mendeskripsikan UI. Fungsi ini tidak menyusun atau membuat UI sehingga tidak ada yang ditampilkan.

Memperhatikan fungsi composable dalam kode

1. Di Android Studio, buka file MainActivity.kt.
2. Scroll ke fungsi DefaultPreview(), lalu hapus. Tambahkan fungsi composable baru, BirthdayCardPreview() untuk melihat pratinjau fungsi Greeting(), seperti berikut. Sebagai praktik yang baik, fungsi harus selalu diberi nama atau diganti namanya agar dapat menjelaskan fungsinya.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

Fungsi composable dapat memanggil fungsi composable lainnya. Dalam cuplikan kode ini, fungsi pratinjau memanggil fungsi composable Greeting().

Perhatikan bahwa fungsi sebelumnya juga memiliki anotasi lain, yakni anotasi @Preview, dengan parameter sebelum anotasi @Composable. Anda akan mempelajari lebih lanjut argumen yang diteruskan ke anotasi @Preview tersebut nanti dalam kursus ini.

Nama fungsi composable

Fungsi compose yang tidak menampilkan apa pun dan menyertakan anotasi @Composable HARUS diberi nama menggunakan pascal case. Pascal case mengacu pada konvensi penamaan yang menggunakan huruf kapital untuk huruf pertama setiap kata dalam kata majemuk. Perbedaan antara pascal case dan camel case adalah semua kata dalam pascal case harus ditulis dalam huruf kapital. Dalam konvensi camel case, kata pertama tidak menggunakan huruf kapital.

Fungsi Compose:

• HARUS kata benda: DoneButton()
• BUKAN kata kerja atau frasa kata kerja: DrawTextField()
• BUKAN preposisi yang dibuat menjadi kata benda: TextFieldWithLink()
• BUKAN kata sifat: Bright()
• BUKAN kata keterangan: Outside()
• Kata benda DAPAT diawali dengan kata sifat deskriptif: RoundIcon()

Panduan ini berlaku saat fungsi memunculkan elemen UI ataupun tidak. Untuk mempelajari lebih lanjut, lihat Penamaan fungsi Composable.

Kode contoh . Jangan disalin

// Do: This function is a descriptive PascalCased noun as a visual UI element
@Composable
fun FancyButton(text: String) {}

// Do: This function is a descriptive PascalCased noun as a non-visual element
// with presence in the composition
@Composable
fun BackButtonHandler() {}

// Don't: This function is a noun but is not PascalCased!
@Composable
fun fancyButton(text: String) {}

// Don't: This function is PascalCased but is not a noun!
@Composable
fun RenderFancyButton(text: String) {}

// Don't: This function is neither PascalCased nor a noun!
@Composable
fun drawProfileImage(image: ImageAsset) {}

5. Panel desain di Android Studio

Android Studio memungkinkan Anda melihat pratinjau fungsi composable dalam IDE, bukan menginstal aplikasi ke perangkat Android atau emulator. Seperti yang telah dipelajari di jalur sebelumnya, Anda dapat melihat pratinjau tampilan aplikasi di panel Design di Android Studio.

Fungsi composable harus menyediakan nilai default untuk setiap parameter agar dapat dipratinjau. Karena alasan ini, Anda tidak dapat melihat pratinjau fungsi Greeting() secara langsung. Sebagai gantinya, Anda perlu menambahkan fungsi lain, fungsi BirthdayCardPreview() dalam kasus ini, yang akan memanggil fungsi Greeting() dengan parameter yang sesuai.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

Untuk melihat pratinjau:

1. Build kode.

Pratinjau akan otomatis diupdate.

Cara lain untuk mengupdate atau merefresh pratinjau adalah dengan mengklik Build & Refresh di panel Design.

2. Di fungsi BirthdayCardPreview(), ubah argumen "Android" di fungsi Greeting() menjadi nama Anda.

fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("James")
    }
}

3. Klik Build & Refresh di panel Design.

Anda akan melihat pratinjau yang telah diperbarui.

6. Menambahkan elemen teks baru

Dalam tugas ini, Anda akan menghapus salam Hello $name! dan menambahkan ucapan ulang tahun.

Menambahkan fungsi composable baru

1. Dalam file MainActivity.kt, hapus definisi fungsi Greeting(). Anda akan menambahkan fungsi Anda sendiri untuk menampilkan ucapan di codelab nanti.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

2. Arahkan kursor ke fungsi Greeting(). Perhatikan bahwa Android Studio menandai panggilan fungsi Greeting(), lalu mengarahkan kursor ke panggilan fungsi ini untuk mengidentifikasi error.

3. Hapus panggilan fungsi Greeting() beserta argumennya dari fungsi onCreate() dan BirthdayCardPreview(). File MainActivity.kt Anda akan terlihat seperti ini:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview(){
    HappyBirthdayTheme {
    }
}

4. Sebelum fungsi BirthdayCardPreview(), tambahkan terlebih dahulu fungsi baru bernama BirthdayGreetingWithText(). Jangan lupa untuk menambahkan anotasi @Composable sebelum fungsi karena anotasi ini akan menjadi fungsi compose yang memunculkan composable Text.

@Composable
fun BirthdayGreetingWithText() {
}

5. Praktik terbaiknya adalah membuat Composable menerima parameter Modifier, dan meneruskan modifier tersebut ke turunan pertamanya yang menampilkan UI. Anda akan mempelajari lebih lanjut elemen turunan dan Modifier dalam tugas dan codelab berikutnya. Untuk saat ini, tambahkan parameter Modifier ke fungsi BirthdayGreetingWithText().

@Composable
fun BirthdayGreetingWithText(modifier: Modifier = Modifier) {
}

6. Tambahkan parameter message jenis String ke fungsi composable BirthdayGreetingWithText().

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

7. Di fungsi BirthdayGreetingWithText(), tambahkan composable Text yang meneruskan pesan teks sebagai argumen yang telah diberi nama.

@Composable
fun BirthdayGreetingWithText(message: String, modifier: Modifier = Modifier) {
    Text(
       text = message
    )
}

Fungsi BirthdayGreetingWithText() ini menampilkan teks di UI. Hal ini dilakukan dengan memanggil fungsi composable Text().

Melihat pratinjau fungsi

Dalam tugas ini, Anda akan melihat pratinjau fungsi BirthdayGreetingWithText() di panel Design.

1. Panggil fungsi BirthdayGreetingWithText() di dalam fungsi BirthdayCardPreview().
2. Teruskan argumen String ke fungsi BirthdayGreetingWithText() yang merupakan ucapan ulang tahun kepada teman Anda. Anda dapat menambahkan nama jika menginginkannya, seperti "Happy Birthday Sam!".

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayGreetingWithText(message = "Happy Birthday Sam!")
    }
}

3. Di panel Design, klik Build & Refresh dan tunggu hingga build selesai untuk melihat pratinjau fungsi Anda.

7. Mengubah ukuran font

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 elemen teks. Anda juga dapat bereksperimen dengan berbagai ukuran dan warna font.

Piksel skalabel

Piksel skalabel (SP) adalah satuan ukuran untuk ukuran font. Elemen UI di aplikasi Android menggunakan dua unit pengukuran yang berbeda: piksel kepadatan mandiri (DP) yang Anda gunakan nanti untuk tata letak, dan piksel skalabel (SP). Secara default, unit SP memiliki ukuran yang sama dengan unit DP, tetapi ukurannya dapat diubah berdasarkan ukuran teks pilihan pengguna di setelan ponsel.

1. Di file MainActivity.kt, scroll ke composable Text() di fungsi BirthdayGreetingWithText().
2. Teruskan argumen fontSize ke fungsi Text() sebagai argumen kedua yang telah diberi nama dan tetapkan ke nilai 36.sp.

Text(
   text = message,
   fontSize = 36.sp
)

Android Studio menandai kode .sp karena Anda harus mengimpor beberapa class atau properti untuk mengompilasi aplikasi.

3. Klik .sp yang ditandai oleh Android Studio.
4. Klik Import di pop-up untuk mengimpor androidx.compose.ui.unit.sp agar dapat menggunakan properti ekstensi .sp.

5. Scroll ke bagian atas file dan perhatikan pernyataan import, dan di sana Anda akan melihat pernyataan import androidx.compose.ui.unit.sp, yang berarti bahwa paket ditambahkan ke file Anda oleh Android Studio.

6. Klik Build & Refresh di panel Design untuk melihat pratinjau yang telah diupdate. Perhatikan perubahan ukuran font di pratinjau ucapan.

Sekarang Anda dapat bereksperimen dengan berbagai ukuran font.

8. Menambahkan elemen teks lainnya

Pada tugas sebelumnya, Anda telah menambahkan pesan ucapan ulang tahun kepada teman. Dalam tugas ini, Anda menandatangani kartu dengan nama Anda.

1. Di dalam file MainActivity.kt, scroll ke fungsi BirthdayGreetingWithText().
2. Teruskan parameter from jenis String ke fungsi untuk nama pengirim.

fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier)

3. Setelah composable pesan ulang tahun Text, tambahkan composable Text lain yang menerima argumen text yang ditetapkan ke nilai from.

Text(
   text = from
)

4. Tambahkan argumen yang telah diberi nama fontSize yang ditetapkan ke nilai 24.sp.

Text(
   text = from,
   fontSize = 24.sp
)

5. Scroll ke fungsi BirthdayCardPreview().
6. Tambahkan argumen String lain untuk menandatangani kartu, seperti "- from Emma".

BirthdayGreetingWithText(message = "Happy Birthday Sam!", from ="- from Emma")

7. Klik Build & Refresh di panel Design.
8. Perhatikan pratinjau.

Fungsi composable dapat memunculkan beberapa elemen UI. Namun, jika Anda tidak memberikan panduan mengenai cara mengaturnya, Compose mungkin dapat mengatur elemen dengan cara yang tidak Anda sukai. Misalnya, kode sebelumnya menghasilkan dua elemen teks yang saling tumpang-tindih karena tidak ada panduan tentang cara mengatur dua composable.

Di tugas berikutnya, Anda akan mempelajari cara mengatur composable dalam baris dan kolom.

9. Mengatur elemen teks dalam baris dan kolom

Hierarki UI

Hierarki UI didasarkan pada containment, yang berarti satu komponen dapat berisi satu atau beberapa komponen, serta istilah induk dan turunan terkadang digunakan. Konteksnya di sini adalah elemen UI induk berisi elemen UI turunan, yang selanjutnya dapat berisi elemen UI turunan. Di bagian ini, Anda akan mempelajari composable Column, Row, dan Box, yang dapat bertindak sebagai elemen UI induk.

Tiga elemen tata letak standar dan dasar di Compose adalah composable Column, Row, dan Box. Anda dapat mempelajari composable Box lebih lanjut di codelab berikutnya.

Column, Row, dan Box adalah fungsi composable yang menggunakan konten composable sebagai argumen sehingga Anda dapat menempatkan item di dalam elemen tata letak ini. Misalnya, setiap elemen turunan dalam composable Row ditempatkan secara horizontal di samping satu sama lain dalam satu baris.

// Don't copy.
Row {
    Text("First Column")
    Text("Second Column")
}

Elemen teks ini ditampilkan berdampingan di layar seperti yang terlihat dalam gambar ini.

Batas biru hanya untuk tujuan demonstrasi dan tidak ditampilkan.

Sintaksis lambda akhir

Perhatikan dalam cuplikan kode sebelumnya bahwa tanda kurung kurawal digunakan sebagai pengganti tanda kurung di fungsi composable Row. Ini disebut Sintaksis Lambda Akhir. Anda akan mempelajari lambda dan sintaksis lambda akhir secara mendetail di kursus ini nanti. Untuk saat ini, pahami sintaksis Compose yang biasa digunakan ini.

Kotlin menawarkan sintaksis khusus untuk meneruskan fungsi sebagai parameter ke fungsi, dengan parameter terakhir sebagai fungsi.

Jika ingin meneruskan fungsi sebagai parameter tersebut, Anda dapat menggunakan sintaksis lambda akhir. Anda dapat menempatkan tanda kurung beserta isi fungsi setelah nama fungsi, bukan menempatkan isi fungsi bersama dengan nama fungsi dalam tanda kurung ({}). Ini adalah situasi umum di Compose. Jadi, Anda harus mengetahui tampilan kodenya.

Misalnya, parameter terakhir dalam fungsi composable Row() adalah parameter content, fungsi yang memunculkan elemen UI turunan. Misalnya Anda ingin membuat baris yang berisi tiga elemen teks. Kode ini akan berfungsi, tetapi sangat rumit:

Row(
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)

Karena parameter content adalah parameter terakhir dalam fungsi nama pengirim dan Anda meneruskan nilainya sebagai ekspresi lambda (untuk saat ini, tidak masalah jika Anda tidak tahu apa itu lambda, cukup pahami sintaksisnya), Anda dapat menghapus parameter content dan tanda kurung seperti berikut:

Row {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}

Mengatur elemen teks dalam baris

Dalam tugas ini, Anda akan mengatur elemen teks di aplikasi dalam satu baris untuk menghindari tumpang-tindih.

1. Di dalam file MainActivity.kt, scroll ke fungsi BirthdayGreetingWithText().
2. Tambahkan composable Row di sekitar elemen teks agar kolom dengan dua elemen teks dapat ditampilkan.

Sekarang fungsi ini akan terlihat seperti cuplikan kode ini:

@Composable
fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier)  {
    Row{
        Text(
            text = message,
            fontSize = 36.sp,
       )
        Text(
            text = from,
            fontSize = 24.sp,
       )
   }
}

3. Klik Row, dalam cuplikan kode yang telah ditandai.
4. Perhatikan bahwa Android Studio memberi Anda beberapa pilihan impor untuk Row.
5. Klik Impor.

6. Dari paket androidx.compose.foundation.layout, pilih fungsi yang diawali dengan Row(androidx.compose.ui.Modifier, androidx.compose.foundation.layout.Argument.Horizontal, androidx....

7. Klik Build & Refresh untuk mengupdate pratinjau di panel Design.

Pratinjau terlihat jauh lebih baik karena tidak tumpang-tindih. Namun, ini bukanlah yang Anda inginkan karena tidak ada ruang untuk menuliskan nama pengirim. Pada tugas berikutnya, Anda dapat mengatur elemen teks dalam kolom untuk mengatasi masalah ini.

Mengatur elemen teks dalam kolom

Dalam tugas ini, giliran Anda untuk mengubah fungsi BirthdayGreetingWithText() untuk mengatur elemen teks dalam kolom. Setelah selesai, jangan lupa mengklik Build & Refresh untuk memperbarui pratinjau, yang akan terlihat seperti screenshot berikut:

Setelah Anda mencoba melakukannya sendiri, jangan ragu untuk membandingkan kode Anda dengan kode solusi dalam cuplikan ini untuk memeriksanya:

@Composable
fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

Impor paket ini jika diminta oleh Android Studio:

import androidx.compose.foundation.layout.Column

1. Ingat kembali bahwa Anda perlu meneruskan parameter pengubah ke elemen turunan dalam composable. Artinya, Anda perlu meneruskan parameter pengubah ke composable Column.

@Composable
   fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column(modifier = modifier) {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

10. Menampilkan di perangkat

Setelah puas dengan pratinjau, kini saatnya menjalankan aplikasi Anda di perangkat atau emulator.

1. Di dalam file MainActivity.kt, scroll ke fungsi onCreate().
2. Panggil fungsi BirthdayGreetingWithText() dari blok Surface.
3. Teruskan fungsi BirthdayGreetingWithText(), ucapan ulang tahun, dan nama pengirim.

Fungsi onCreate() yang telah selesai akan terlihat seperti cuplikan kode ini:

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           HappyBirthdayTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   BirthdayGreetingWithText( message = "Happy Birthday Sam!", from = "- from Emma")
               }
           }
       }
   }
}

4. Build dan jalankan aplikasi Anda di emulator.

11. Mendapatkan kode solusi

MainActivity.kt yang telah selesai:

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           HappyBirthdayTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   BirthdayGreetingWithText( message = "Happy Birthday Sam!", from = "- from Emma")
               }
           }
       }
   }
}

@Composable
   fun BirthdayGreetingWithText(message: String, from: String, modifier: Modifier = Modifier) {
   Column(modifier = modifier) {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

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

12. Kesimpulan

Anda telah membuat aplikasi Selamat Ulang Tahun.

Pada codelab berikutnya, Anda akan menambahkan gambar ke aplikasi, dan mengubah perataan elemen teks untuk mempercantiknya.

Ringkasan

• Jetpack Compose adalah toolkit modern untuk mem-build UI Android. Jetpack Compose menyederhanakan dan mempercepat pengembangan UI di Android dengan lebih sedikit kode, alat yang canggih, dan API Kotlin yang intuitif.
• Antarmuka pengguna (UI) aplikasi adalah tampilan visual yang Anda lihat di layar: teks, gambar, tombol, dan berbagai jenis elemen lainnya.
• Fungsi composable adalah elemen penyusun dasar Compose. Fungsi composable adalah fungsi yang mendeskripsikan beberapa bagian UI Anda.
• Fungsi composable dianotasi menggunakan anotasi @Composable; anotasi ini memberi tahu compiler Compose bahwa fungsi ini dimaksudkan untuk mengonversi data menjadi UI.
• Tiga elemen tata letak standar dan dasar di Compose adalah Column, Row,, dan Box. Tiga elemen tersebut adalah fungsi Composable yang menggunakan konten Composable sehingga Anda dapat menempatkan item di dalamnya. Misalnya, setiap turunan dalam Row akan ditempatkan berdampingan secara horizontal.

Pelajari lebih lanjut

• Composable
• Dasar-dasar tata letak Compose
• Kepadatan piksel
• Teks dalam Compose
• Kotlin untuk Jetpack Compose