Aplikasi Ucapan Ulang Tahun menggunakan Composable
Nama : Nadya Zuhria Amana
NRP : 5025211058
Kelas PBB B
Berikut ini adalah penjelasan mengenai langkah langkah dalam pembuatan perangkat Android untuk penugasan dari link berikut https://kuliahppb.blogspot.com/2024/03/mengenal-composable.html
A. Langkah Persiapan Aplikasi "Happy Birthday":
1. Buka Android Studio dan pilih "New Project" dari halaman selamat datang.
2. Pilih "Empty Activity" pada halaman proyek baru, lalu klik "Next".
3. Isi nama aplikasi dengan "Happy Birthday", atur level API minimum ke 24 (Nougat), dan klik "Finish".
B. Langkah dalam Membuat Aplikasi "Happy Birthday":
1. Di dalam fungsi BirthdayCardPreview(), ganti argumen "Android" di fungsi Greeting() dengan nama Anda.
Menambahkan Elemen Teks Baru:
1. Hapus definisi fungsi Greeting() dan ubah menjadi fungsi GreetingText().
2. Tambahkan parameter Modifier ke fungsi GreetingText().
3. Tambahkan parameter pesan bertipe String ke fungsi composable GreetingText().
4. Di dalam fungsi GreetingText(), tambahkan elemen teks yang menerima pesan teks sebagai argumen.
5. Panggil fungsi GreetingText() di dalam fungsi BirthdayCardPreview().
6. Berikan pesan ulang tahun kepada teman Anda sebagai argumen untuk fungsi GreetingText().
7. Lihat pratinjau perubahan di panel Design.
Mengubah Ukuran Font:
1. Di dalam file MainActivity.kt, cari composable Text() di dalam fungsi GreetingText().
2. Tambahkan argumen fontSize ke fungsi Text() dengan nilai 100.sp.
3. Klik .sp dan klik Import untuk mengimpor androidx.compose.ui.unit.sp.
4. Perhatikan pratinjau dan sesuaikan tinggi baris.
Menambahkan Elemen Teks Lainnya:
1. Di dalam file MainActivity.kt, temukan fungsi GreetingText().
2. Tambahkan parameter from bertipe String untuk nama pengirim.
3. Setelah elemen teks pesan ulang tahun, tambahkan elemen teks lain untuk menampilkan nama pengirim.
4. Tetapkan argumen fontSize menjadi 36.sp.
5. Di dalam fungsi BirthdayCardPreview(), tambahkan argumen String untuk menandatangani kartu.
Mengatur Elemen Teks dalam Baris dan Kolom:
1. Di dalam file MainActivity.kt, cari fungsi GreetingText().
2. Tambahkan composable Row di sekitar elemen teks untuk menampilkan dua elemen teks dalam satu baris.
3. Ubah ukuran font pesan menjadi 30.sp.
4. Ganti composable Row menjadi Column.
5. Tambahkan fungsi impor untuk Column.
Menambahkan Ucapan ke Aplikasi:
1. Di dalam file MainActivity.kt, temukan fungsi onCreate().
2. Panggil fungsi GreetingText() dari blok Surface.
3. Teruskan pesan ulang tahun dan nama pengirim ke fungsi GreetingText().
Menyejajarkan Ucapan ke Tengah:
1. Tambahkan parameter verticalArrangement dengan nilai Arrangement.Center untuk menyejajarkan ucapan ke tengah.
2. Impor fungsi Alignment.
3. Sejajarkan teks ucapan ke tengah dengan textAlign.
4. Tambahkan padding ke tanda tangan dan sejajarkan di sebelah kanan.
5. Perbarui parameter modifier di GreetingText() sesuai langkah-langkah di atas.
Code :
1. Import dan Package:
```kotlin
package com.example.happybirthdayappnadya
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
```
- Ini adalah bagian awal dari file Kotlin, di mana kita mendefinisikan paket aplikasi dan mengimpor kelas-kelas yang diperlukan.
2. Kelas MainActivity:
```kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Konten aplikasi ditentukan di sini
}
}
}
```
- Ini adalah kelas utama aplikasi, MainActivity, yang merupakan turunan dari ComponentActivity, salah satu kelas dasar dalam pengembangan aplikasi Android.
- Di dalam metode onCreate(), setContent() digunakan untuk menentukan tata letak aplikasi.
3. HappyBirthdayAppNadyaTheme:
```kotlin
HappyBirthdayAppNadyaTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
// Konten aplikasi ditentukan di sini
}
}
```
- Ini menggunakan tema yang didefinisikan dalam komponen HappyBirthdayAppNadyaTheme.
- Di dalamnya, terdapat Surface yang menempatkan konten aplikasi dengan mengisi seluruh ruang layar.
4. Fungsi GreetingText:
```kotlin
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
// Konten tampilan ucapan selamat ulang tahun ditentukan di sini
}
```
- Ini adalah fungsi komposabel yang menerima dua parameter, pesan dan dari siapa pesan tersebut.
- Ini bertujuan untuk menampilkan teks ucapan selamat ulang tahun.
5. Fungsi GreetingPreview:
```kotlin
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
// Pratinjau tampilan ucapan selamat ulang tahun ditentukan di sini
}
```
- Ini adalah fungsi komposabel yang digunakan untuk pratinjau tampilan ucapan selamat ulang tahun.
- Ini digunakan untuk melihat bagaimana tampilannya dalam pengembangan.
Dengan kode tersebut, Anda dapat membuat aplikasi sederhana yang menampilkan ucapan selamat ulang tahun menggunakan Jetpack Compose dalam pengembangan aplikasi Android.
Hasil Dokumentasi :
.png)
Link Github : https://github.com/nadyaza/tugas-ppb-b/tree/main/tugas2