Langsung ke konten utama

Halaman Login

 Membuat Halaman Login

Membuat Projek Baru

Klik New Project lalu pilih Empty Activities. Ubah nama projek sesuai keinginan Anda, saya memilih nama MyLogin. Pilih minimum SDK menjadi API 26 ("Oreo"; Android 8.0). Klik Finish.

Mengedit File MainActitivty.kt

  1. Menghapus fungsi Greeting dan GreetingPreview serta menghapus MyLoginTheme. Sehingga sumber kode menjadi seperti ini
  2. Kita ingin membuat fungsi baru, tetapi menaruhnya pada file yang berbeda. Hal ini dapat dilakukan dengan cara klik kanan pada folder package, lalu new, lalu Kotlin Class/File
  3. Pilih tipe file dan beri nama LoginScreen, di sini kita akan mencoba terlebih dahulu memberikan tulisan sembarang. Ubah LoginScreen.kt dengan menambahkan elemen text dan panggil fungsi LoginScreen pada MainActivity.kt. Didapatkan hasil sesuai gambar di bawah ini:
    package com.example.mylogin
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.Surface
    import androidx.compose.material3.Text
    import androidx.compose.runtime.Composable
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.tooling.preview.Preview
    import com.example.mylogin.ui.theme.MyLoginTheme
    class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    LoginScreen()
    }
    }
    }
    view raw MainActivity.kt hosted with ❤ by GitHub
  4. Membuat tampilan yang menarik dengan menata setiap elemen. Ubahlah kode LoginScreen.kt menjadi seperti berikut:
    package com.example.mylogin
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.material3.Text
    import androidx.compose.runtime.Composable
    import androidx.compose.ui.Modifier
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.clickable
    import androidx.compose.foundation.layout.Row
    import androidx.compose.foundation.layout.Spacer
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.height
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.layout.size
    import androidx.compose.material3.Button
    import androidx.compose.material3.OutlinedTextField
    import androidx.compose.material3.TextButton
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.text.font.FontWeight
    import androidx.compose.ui.unit.dp
    import androidx.compose.ui.unit.sp
    @Composable
    fun LoginScreen(){
    Column (
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
    ) {
    Image(painter = painterResource(id = R.drawable.bglogin), contentDescription = "login image",
    modifier = Modifier.size(200.dp))
    Text(text = "Welcome Back", fontSize = 28.sp, fontWeight = FontWeight.Bold)
    Spacer(modifier = Modifier.height(16.dp))
    OutlinedTextField(value = "", onValueChange = {}, label = {
    Text(text = "Email Address")
    })
    Spacer(modifier = Modifier.height(16.dp))
    OutlinedTextField(value = "", onValueChange = {}, label = {
    Text(text = "Password")
    })
    Spacer(modifier = Modifier.height(16.dp))
    Button(onClick = {}) {
    Text(text = "Login")
    }
    Spacer(modifier = Modifier.height(32.dp))
    Text(text = "Forgot Password?", modifier = Modifier.clickable {
    })
    Spacer(modifier = Modifier.height(32.dp))
    Text(text = "Or Sign in with")
    Row (
    modifier = Modifier
    .fillMaxWidth()
    .padding(40.dp),
    horizontalArrangement = Arrangement.SpaceEvenly
    ) {
    Image(painter = painterResource(id = R.drawable.facebook),
    contentDescription = "facebook",
    modifier = Modifier
    .size(45.dp)
    .clickable {
    }
    )
    Image(painter = painterResource(id = R.drawable.instagram),
    contentDescription = "instagram",
    modifier = Modifier
    .size(45.dp)
    .clickable {
    }
    )
    Image(painter = painterResource(id = R.drawable.google),
    contentDescription = "google",
    modifier = Modifier
    .size(45.dp)
    .clickable {
    }
    )
    }
    }
    }
    view raw LoginScreen.kt hosted with ❤ by GitHub
  5. Hasil langkah 4 masih belum dapat menerima input dari user, maka pada langkah ini kita akan menambahkannya. Hal ini dapat dilakukan dengan menambahkan variable email dan password dan merubah nilai parameter pada text field yang telah kita buat. Sumber kode LoginScreen.kt menjadi seperti berikut:
    package com.example.mylogin
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.material3.Text
    import androidx.compose.runtime.Composable
    import androidx.compose.ui.Modifier
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.clickable
    import androidx.compose.foundation.layout.Row
    import androidx.compose.foundation.layout.Spacer
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.height
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.layout.size
    import androidx.compose.material3.Button
    import androidx.compose.material3.OutlinedTextField
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.text.font.FontWeight
    import androidx.compose.ui.unit.dp
    import androidx.compose.ui.unit.sp
    import androidx.compose.runtime.*
    import androidx.compose.ui.text.input.PasswordVisualTransformation
    @Composable
    fun LoginScreen(){
    var email by remember {
    mutableStateOf(value = "")
    }
    var password by remember {
    mutableStateOf(value = "")
    }
    Column (
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
    ) {
    Image(painter = painterResource(id = R.drawable.bglogin), contentDescription = "login image",
    modifier = Modifier.size(200.dp))
    Text(text = "Welcome Back", fontSize = 28.sp, fontWeight = FontWeight.Bold)
    Spacer(modifier = Modifier.height(16.dp))
    OutlinedTextField(value = email, onValueChange = {
    email = it
    }, label = {
    Text(text = "Email Address")
    })
    Spacer(modifier = Modifier.height(16.dp))
    OutlinedTextField(value = password, onValueChange = {
    password = it
    }, label = {
    Text(text = "Password")
    }, visualTransformation = PasswordVisualTransformation())
    Spacer(modifier = Modifier.height(16.dp))
    Button(onClick = {}) {
    Text(text = "Login")
    }
    Spacer(modifier = Modifier.height(32.dp))
    Text(text = "Forgot Password?", modifier = Modifier.clickable {
    })
    Spacer(modifier = Modifier.height(32.dp))
    Text(text = "Or Sign in with")
    Row (
    modifier = Modifier
    .fillMaxWidth()
    .padding(40.dp),
    horizontalArrangement = Arrangement.SpaceEvenly
    ) {
    Image(painter = painterResource(id = R.drawable.facebook),
    contentDescription = "facebook",
    modifier = Modifier
    .size(45.dp)
    .clickable {
    }
    )
    Image(painter = painterResource(id = R.drawable.instagram),
    contentDescription = "instagram",
    modifier = Modifier
    .size(45.dp)
    .clickable {
    }
    )
    Image(painter = painterResource(id = R.drawable.google),
    contentDescription = "google",
    modifier = Modifier
    .size(45.dp)
    .clickable {
    }
    )
    }
    }
    }
    view raw LoginScreen.kt hosted with ❤ by GitHub

    Keterangan

    • mutableStateOf memungkinkan nilai variable untuk berubah
    • pengaturan posisi dapat dilakukan berdasarkan horizontal atau vertikal sesuai pada baris kode 39 dan 40
    • Spacer dapat digunakan untuk memberikan jarak antar elemen secara horizontal maupun vertikal
    • OutlinedTextField dapat digunakan sebagai input dengan model yang cukup menarik
    • visualTransformation = PasswordVisualTransformation() dapat digunakan untuk elemen password sehingga apa yang diketik akan disamarkan menjadi tanda bintang

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

Komentar

Posting Komentar

Postingan populer dari blog ini

Kalkulator Sederhana

Kalkulator Sederhana Membuat Projek Projek dibuat dengan memilih New Project dan menggunakan Empty Activities, beri nama projek sesuai selera, saya sendiri menggunakan nama MyCalculator dengan minimum SDK API 26 Oreo. Setelah itu klik Finish.  Menyusun Sumber Kode Aplikasi ini sangat sederhana, hanya cukup mengikuti beberapa langkah berikut: Buat variable num1 dan num2 untuk menyimpan nilai input dari user, jangan lupa untuk menambahkan import runtime.* Membuat TextField untuk menerima input dari user dengan mensingkronisasi variabel num1 dan num2 Membentuk operasi perhitungan dengan button dimana pada button menggunakan aktivitas perhitungan apabila diklik. input yang berupa string akan diubah menjadi integer dan dilakukan perhitungan yang sesuai. Hasil perhitungan akan ditampilkan sebagai pop up, hal ini dilakukan dengan Toast.  Hasil Akhir Referensi:  Referensi YT Sumber kode lengkap sebagai berikut:
Posting Komentar
Baca selengkapnya

Image Scroll

 Membuat Komponen Image Scroll Kita akan membuat aplikasi dengan tampilan komponen image scroll seperti card dengan isi gambar. Yuk kita mulai dengan mengikuti tutorial  referensi  ini. Load projek starter pada github ini download file pada branch starter dalam bentuk ZIP. Setelah terdownload, ekstrak. Pada android studio kita akan membuka projek dengan open dan mengarahkan ke folder hasil ekstraksi tadi. Dalam membuka projek memang memakan waktu yang cukup lama, jadi harap sabar. Ketika selesai load, maka coba run program, maka akan memiliki tampilan sebagai berikut: Membuat class data item daftar 1. Membuat class data untuk affirmation klik kanan pada folder com.example.affirmation pilin new, lalu package dan beri nama model. package ini akan berisi class data. 2. Membuat class affirmation klik kanan pada package model lalu pilih new, lalu Kotlin class/File, lalu pilih Data Class. Beri nama Affirmation. Ubah sumber kode menjadi seperti berikut: 3. Aktifkan sumber ko...
Posting Komentar
Baca selengkapnya

Aplikasi Woof

 Membuat Aplikasi Woof Pada kesempatan kali ini kita akan mencoba untuk membuat aplikasi woof, yakni aplikasi yang dapat menampilkan daftar anjing berisi gambar dan informasi lainnya. Ilustrasi dari hasil aplikasi yang akan dibuat seperti berikut. Yuk kita mulai mengikuti tutorial -nya. Memulai dengan starter project Pada halaman tutorial kita diberikan starter project dimana berisi resource-resource yang diperlukan, seperti gambar dan data informasi. Anda dapat mendownload pada github ini pada branch starter. dan kita akan mulai memodifikasi starter projek. Menambahkan warna Dalam menyusun warna yang baik, kita dapat menggunakan bantuan website ini. Pada starter projek kita sudah tersedia file Color.kt pada folder ui.theme. Ubah sumber kode menjadi berikut:   Perlu diingat, penamaan warna dimulai dengan nilai alpha, dimana 00 mengartikan opasitas minimum, yakni transparan total, sedangkan ff opasitas maksimum, yakni solid penuh. Pada file Color.kt ini lah kita menentukan war...
Posting Komentar
Baca selengkapnya