Login Page

Nama : Made Nanda Wija Vahindra

NRP : 5025211160

Kelas : PBB - A

Tugas 7: Membuat aplikasi Login Page

Dokumentasi Tugas 7 yaitu latihan membuat aplikasi login page



Link GitHub

Referensi : https://www.youtube.com/watch?v=-Kj9T1sa6zk

Berikut penjelasan mengenai kode untuk halaman login:

1. UI Structure:

  • Column: Menyusun elemen-elemen secara vertikal dengan verticalArrangement = Arrangement.Center agar elemen berada di tengah layar.

  • Image: Menampilkan gambar pada bagian atas layar menggunakan painterResource(id = R.drawable.img) untuk mengakses sumber daya gambar.

  • Text: Menampilkan teks untuk judul dan petunjuk login seperti "Welcome Back", "Login to your account", dan lainnya.

2. Input Fields:

  • OutlinedTextField: Digunakan untuk input email dan password. Setiap OutlinedTextField memiliki label untuk menunjukkan fungsi input tersebut (Email dan Password).

3. Buttons and Text:

  • Button: Tombol untuk login, yang saat ini belum memiliki aksi terkait (kosong di onClick).

  • Text: Menampilkan teks "Forgot Password?" yang dapat diklik, serta teks "Or sign in with" untuk menampilkan pilihan login menggunakan media sosial.

4. Social Media Login Options:

  • Row: Mengatur tiga ikon media sosial (Facebook, Google, Twitter) secara horizontal dengan jarak yang rata menggunakan Arrangement.SpaceEvenly.

  • Setiap ikon menggunakan Image yang dapat diklik, tetapi aksi untuk masing-masing ikon media sosial juga masih kosong (di onClick).

5. Spacing:

  • Spacer: Digunakan untuk memberikan ruang antara elemen-elemen UI, memastikan tampilan tidak terlalu rapat.

6. Styling:

  • Font Size and Weight: Teks memiliki ukuran font yang berbeda, seperti 28sp untuk judul dengan FontWeight.Bold.

  • Image Size: Gambar diatur agar memiliki ukuran 300.dp.

Kode ini merender tampilan layar login dengan elemen-elemen seperti gambar, teks, input email, input password, tombol login, opsi lupa password, dan ikon untuk login media sosial. Interaksi klik pada ikon media sosial dan tombol login belum diimplementasikan.


Comments

Post a Comment

Popular posts from this blog

Proyek ETS - Mobile Front End

Image
Nama : Made Nanda Wija Vahindra NRP : 5025211160 Kelas : PBB - A Proyek ETS: Membuat mobile Front End Mobile Front End MyMoneyNotes Deskripsi  Proyek 4: Aplikasi Catatan Keuangan Pribadi Judul Proyek:   “MyMoney Notes” Deskripsi:  Buat aplikasi sederhana untuk mencatat pengeluaran dan pemasukan harian. Fitur Utama: Input jenis transaksi (pemasukan/pengeluaran) Pilih kategori dan nominal Lihat daftar transaksi Tampilan grafik sederhana (opsional menggunakan chart library untuk visualisasi) Preview :      PPT:  Link PPT Video Presentasi:  Link Source Code: GitHub Link Aplikasi: MyMoneyNotes
Read more

Jetpack Compose: Hello Android

Image
Nama : Made Nanda Wija Vahindra NRP : 5025211160 Kelas : PBB - A Tugas 2: Membuat aplikasi Hello Android menggunakan Jetpack Compose Dokumentasikan proyek Basics Codelab menggunakan Jetpack Compose , framework UI deklaratif untuk Android. Aplikasi ini menyajikan daftar Greetings dengan animasi expand serta layar Onboarding yang menyambut pengguna saat pertama kali membuka aplikasi. Aplikasi ini terdiri dari beberapa komponen utama: MainActivity – Titik masuk aplikasi MyApp – Mengelola tampilan utama OnboardingScreen – Layar penyambutan pengguna Greetings – Daftar greeting dengan animasi ekspansi Greeting – Komponen kartu yang menampilkan nama dengan teks animasi CardContent – Konten dalam kartu yang dapat diperluas Preview Functions – Untuk menampilkan tampilan dalam Android Studio 1. MainActivity class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() ...
Read more

Aplikasi Selamat Ulang Tahun

Image
Nama : Made Nanda Wija Vahindra NRP : 5025211160 Kelas : PBB - A Tugas 3: Membuat aplikasi Selamat Ulang Tahun Dokumentasi Tugas 3 yaitu latihan membuat aplikasi selamat ulang tahun. Dokumentasi Latihan membuat aplikasi Selamat Ulang Tahun Untuk Kode lengkapnya dapat dilihat pada link Github dibawah Github:  https://github.com/NandaVahindra/PBB-A/tree/main/Tugas3/HappyBirthday
Read more