Mochamad Kolbi Nuron_5025231183_Membuat Halaman Login

 
Nama: Mochamad Kolbi Nuron

NRP: 5025231183

PPB (B)

membuat halaman login

1. Nama & Tujuan Proyek
Proyek ini adalah sebuah Halaman Login (Login Screen) untuk aplikasi Android. Aplikasi ini dirancang dengan antarmuka pengguna (UI) yang modern, bersih, dan fungsional, berfungsi sebagai gerbang masuk bagi pengguna ke dalam sistem aplikasi.

2. Teknologi yang Digunakan
•    Bahasa Pemrograman: Kotlin.
•    UI Framework: Jetpack Compose (toolkit modern Android untuk membangun UI secara deklaratif).
•    Design System: Material Design 3 (M3), yang terlihat dari penggunaan komponen seperti Scaffold, ButtonDefaults, dan             OutlinedTextField.
•    State Management: Menggunakan remember dan mutableStateOf untuk menangani input pengguna secara real-time.

3. Fitur Utama UI
•    Header Visual: Terdapat logo aplikasi (logo_login) yang diposisikan di tengah atas untuk memperkuat branding.
•    Input User:
            ◦Email Field: Menggunakan OutlinedTextField dengan tipe keyboard khusus email.
            ◦Password Field: Dilengkapi dengan fitur Toggle Visibility (ikon mata), yang memungkinkan pengguna melihat atau                     menyembunyikan kata sandi mereka.
•    Tombol Login: Tombol utama berwarna ungu gelap (0xFF421D8C) dengan sudut membulat (rounded) memberikan kesan         modern dan elegan.
•    Navigasi Tambahan: Terdapat teks interaktif "Forgot Password?" untuk pemulihan akun.
•    Social Login (Autentikasi Pihak Ketiga): Di bagian bawah terdapat opsi untuk masuk menggunakan akun media sosial:
    ◦Facebook (dengan latar belakang biru khas).
    ◦Google.
    ◦X (sebelumnya Twitter).

4. Desain dan Layout
•    Responsif: Menggunakan Column dan Row dengan pengaturan Arrangement.Center sehingga konten tetap rapi di tengah          layar.
•Estetika:
    ◦ Menggunakan sudut membulat (RoundedCornerShape(12.dp)) pada kolom input dan tombol.
    ◦Tipografi yang jelas dengan perbedaan ukuran antara judul ("Welcome Back") dan sub-judul.
    ◦Ikon media sosial yang diletakkan dalam Surface berbentuk lingkaran (CircleShape) dengan efek bayangan (shadow).

5. Struktur Kode
•    MainActivity: Sebagai entry point yang mengatur tema aplikasi dan memanggil LoginScreen.
•    LoginScreen (Composable): Fungsi utama yang menyusun seluruh elemen UI.
•    SocialLoginIcon (Composable): Komponen yang dapat digunakan kembali (reusable component) untuk menampilkan ikon         media sosial secara konsisten.


SOURCE CODE: GITHUB


Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Ucapan Happy BirthDay

Gambar
 Nama: Mochamad Kolbi Nuron Nrp: 5025231183 membuat ucapan ulang tahun  package com.example.happybirthday import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column 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.material3.Text import androidx.compose.runtime. Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview. Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.example.happybirthday.ui.theme.HappybirthdayTheme...
Baca selengkapnya

Mochamad Kolbi Nuron_5025231183_ETS PBO A

Gambar
 Nama : Mochamad Kolbi Nuron NRP : 5025231183 ETS PBO A 1. perbedaan kelas dan objek kelas/class adalah template untuk membuat objek yang berisi atribut (variabel) dan metode (fungsi) yang menggambarkan karakteristik dan perilaku dari objek-objek yang dibuat dari kelas tersebut. sehingga membuat pemrogaman menjadi lebih terstruktur dan efisien.  objek adalah entitas nyata yang memiliki atribut dan dapat berinteraksi dengan metode yang didefinisikan dalam kelas.  2. Aplikasi CoffeeMachine import java.util.Scanner; public class CoffeeMachine {     private String[] menu = {"Espresso", "Americano", "Latte"};     private int[] prices = {10000, 15000, 20000};       public void displayMenu() {         System.out.println("Menu CoffeeMachine:");         for (int i = 0; i < menu.length; i++) {             System.out.println((i + 1) + ". " + menu[i] + " - Rp " + prices[i]...
Baca selengkapnya

Tugas Pertemuan 2 PPB (B)

Gambar
 Nama: Mochamad Kolbi Nuron  NRP: 5025231183  Mata Kuliah: PPB (B) Membuat Aplikasi Hello Android 1. Buka Android Studio: ◦ Jika kamu berada di layar Welcome, klik tombol "New Project". ◦ Jika kamu sudah membuka proyek lain, pergi ke menu File > New > New Project.... 2. Pilih Template: ◦ Di jendela New Project, pastikan kategori di sisi kiri adalah Phone and Tablet. ◦ Cari dan pilih template bernama "Empty Compose Activity". ◦ Klik Next. 3. Konfigurasi Proyek (Configure Your Project): ◦ Name: Masukkan nama proyekmu, misalnya: My Application HelloWorld Tugas 2. ◦ Save Location: Pilih folder tempat kamu menyimpan tugas di komputermu. ◦ Language: Pastikan terpilih Kotlin (ini adalah standar untuk Compose). ◦ Minimum SDK: Untuk keamanan dan fitur modern, pilih minimal API 24: Android 7.0 (Nougat) atau lebih tinggi. ◦ Build Configuration Language: Pilih Kotlin DSL (build.gradle.kts) untuk mengikuti standar terbaru. 4. Selesaikan (Finish): ◦ Klik Finish. ◦Tunggu hin...
Baca selengkapnya