Tugas 2 PPB B - Membuat Aplikasi Happy Birthday

 Membuat Aplikasi Happy Birthday

Nama: Muhamad Ridho Pratama

NRP: 5025201186

Kelas: Pemrograman Perangkat Bergerak B

Tahun: 2024

1. Membuat Project di Android Studio

   1. Di halaman Welcome, pilih New Project
      
   2. Di halaman New Project, pilih Empty Activity, lalu klik Next
      
      
      
      
   3. Di kolom Name, masukkan "Happy Birthday" dan klik Finish
      
   4. Tunggu sampai Android Studio selesai mem-build dan sync Gradle project tersebut
   5. Setelah selesai, klik Run App
      

2.  Membuat Aplikasi Happy Birthday

   1. Di file MainActivity.kt, hapus definisi function Greeting() serta semua referensi yang memanggilnya, sehingga function onCreate() dan BirthdayCardPreview() menjadi seperti berikut:
      

      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.colorScheme.background
                      ) {
                      }
                  }
              }
          }
      }
      
      @Preview(showBackground = true)
      @Composable
      fun BirthdayCardPreview() {
          HappyBirthdayTheme {
          }
      }
      

   2. Sebelum function BirthdayCardPreview(), buat function baru dengan nama GreetingText(), jangan lupa tambahkan anotasi @Composable
      
   3. Tambahkan parameter message dan modifier ke function GreetingText()
      

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

   4. Di function GreetingText(), tambahkan sebuah composable Text, yang mengirimkan pesan text sebagai argumen yang dinamai
      

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

   Preview Function GreetingText()

   5. Tambahkan GreetingText(message = "Happy Birthday Ridho!") ke function BirthdayCardPreview()
      

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

      

   Mengubah Ukuran Font

   6. Di file MainActivity.kt, scroll ke composable Text() di function GreetingText()
      
   7. Tambah argumen fontSize ke function Text() sebagai argumen kedua yang dinamai dan atur ke nilai 100.sp
      
   8. Klik .sp yang di-highlight oleh Android Studio
      
   9. Pada pop-up yang muncul, klik Import untuk mengimpor androidx.compose.ui.unit.sp untuk menggunakan ekstensi .sp
      
   10. Perbarui composable Text() untuk menyertakan tinggi baris, agar text tidak tumpang tindih
       

       @Composable
       fun GreetingText(message: String, modifier: Modifier = Modifier) {
           Text(
               text = message,
               fontSize = 100.sp,
               lineHeight = 116.sp,
           )
       }
       

       

   Menambahkan Elemen Teks Lainnya

   11. Di dalam file MainActivity.kt, scroll ke fungsi GreetingText
       
   12. Teruskan parameter from jenis String ke fungsi untuk nama pengirim.

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

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

       
       @Composable
       fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
           Text(
               // ...
           )
           Text(
               text = from
           )
       }
       

       
       
   14. Tambahkan argumen yang telah diberi nama fontSize yang ditetapkan ke nilai 36.sp

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

       
       
   15. Scroll ke fungsi BirthdayCardPreview()
       
   16. Tambahkan argumen String lain untuk menandatangani kartu, seperti "From Dimas"

       GreetingText(message = "Happy Birthday Ridho!", from ="From Dimas")

       
       
   17. Perhatikan pratinjau
       
       
       

   Mengatur Elemen Teks dalam Baris dan Kolom

   18. Di dalam file MainActivity.kt, scroll ke fungsi GreetingText()
       
   19. Tambahkan composable Column di sekitar elemen teks agar kolom dengan dua elemen teks dapat ditampilkan. Pilih dua composable Text, klik bohlam. Pilih Surround with widget > Surround with Row
       
       
       Sekarang fungsi ini akan terlihat seperti cuplikan kode ini:

       @Composable
       fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
           Row {
               Text(
                   text = message,
                   fontSize = 100.sp,
                   lineHeight = 116.sp,
               )
               Text(
                   text = from,
                   fontSize = 36.sp
               )
           }
       }
       

   20. Amati pratinjau