Pertemuan 7 PPB (B)

 

 TUGAS 6
Membuat Halaman Login Sederhana

Nama : Tarisha Falah Basuki
NRP : 5025231043

Kelas : PPB (B)

Berikut langkah-langkah membuat aplikasi Kalkulator Sederhana menggunakan Android Studio:

1. Membuat Project Baru

- Buka Android Studio.

- Klik New Project.

- Pilih template Empty Activity.

2.  Mengisi Konfigurasi Project

- Isi data project seperti berikut:

    Name : MyLogin

    Package name : com.example.mylogin

    Save location : pilih folder penyimpanan

    Language : Java atau Kotlin

    Minimum SDK : pilih API 24 (Android 7.0) 

- Klik Finish.

- Android Studio akan membuat project dan melakukan Gradle build (tunggu sampai selesai).

3. Hapus Greeting Preview

- Buka MainActivity.kt

- Hapus GreetingPreview() dan Composable Greeting serta MyLoginTheme { } yang terletak dalam ovveride fun OnCreate.

- Berikut adalah tampilan MainActivity.kt ketika sudah dihapus. 

4. Membuat Composable LoginScreen

- Buat fungsi composable untuk halaman login.

- Tambahkan kode: 

@Composable
fun LoginScreen() {

}

dan, pada onCreate:

setContent {
    LoginScreen()
}

- Berikut adalah tampilan MainActivity.kt ketika sudah ditambahkan. 

4. Menambahkan Asset Gambar untuk Ilustrasi Login

- Siapkan file gambar.

- Copy gambar tersebut ke folder: res/drawable

5. Menampilkan Image Ilustrasi

- Pada MainActivity.kt di LoginScreen() yang sudah ditambahkan, isi dengan kode seperti pada gambar di bawah.

- Hasilnya seperti pada gambar di bawah.

6. Membuat Textfield Pada LoginScreen

- Pada MainActivity.kt di LoginScreen(), isi dengan kode seperti pada gambar di bawah untuk menambahkan text field Email dan Password.

- Hasilnya seperti pada gambar di bawah.

6. Membuat Button Pada LoginScreen

- Pada MainActivity.kt di LoginScreen(), isi dengan kode seperti pada gambar di bawah untuk menambahkan button login, forgot password, atau sign in dengan cara lain.

- Hasilnya seperti pada gambar di bawah.

7. Menambahkan Asset Gambar untuk Sign In Cara Lain

- Siapkan file gambar.

- Copy gambar tersebut ke folder: res/drawable

8. Menampilkan Image Logo

- Pada MainActivity.kt di LoginScreen(), isi dengan kode seperti pada gambar di bawah.

- Hasilnya seperti pada gambar di bawah.