Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 2 : Membuat Form Login - CodePolitan.com

Beberapa waktu yang lalu di Codepolitan, ada sebuah artikel yang membahas Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 1: Activity dan Layout. Nah setelah mengetahui tentang activity dan Layout sekarang kita akan membuat sebuah form login. Form login yang akan kita buat sekarang seperti ini

FormLogin


1. Buat Project Baru

Langsung saja kawan-kawan buka senjata andalan kita yaitu Android Studio lalu pilih Create New Project

new project

Beri nama aplikasi kalian sesuai keinginan dan jangan lupa untuk mencentang Include Kotlin support lalu klik Next, Kemudian pilih minimum os yang bisa menjalankan aplikasi kamu.

APITarget

Setelah itu klik Next kemudian pilih Empty Activity.

Empty Activity


2.Desain Tampilan

Sekarang kita masuk kebagian paling menyenangkannya dulu yaitu desain tampilan.

FormLogin

Okee langsung saja kita lanjutkan proses desain tampilan di atas:

1. Membuat Gradient Background

Cara nya yaitu dengan klik kanan pada bagian drawables kemudian pilih New lalu pilih Drawable resource file kemudian beri nama bggradient. Lalu kita akan membuat sebuah gradient caranya yaitu seperti ini.
<item>
<shape>
<gradient
android:startColor="#1e88e5"
android:centerColor="#673ab7"
android:endColor="#4527a0"
android:angle="45"
></gradient>
</shape>
</item>

Kode di atas akan menghasilkan gradient seperti ini.

gradientbg

Jika kalian ingin menggunakan warna yang berbeda kalian tinggal ganti saja warnya dengan warna yang kalian mau. Nah setelah itu kita akan mendesain layout XML nya. Langsung saja kalian klik activity_main.xml pada panel utama.

Kali ini kita menggunakan constraint layout, setelah tadi kita membuat gradient sekarang kalian tambahkan gradient nya ke layout activity_main.xml kalian caranya ketikan kode ini di dalam bagian android.support.constraint.ConstraintLayout
android:background="@drawable/bggradient"
Untuk membuat tampilan seperti ini kita menggunakan sebuah komponen yang bernama Card View.

FormLogin

<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:cardCornerRadius="15dp"
app:cardElevation="20dp"
android:id="@+id/btnLogin"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/colorAccent"
android:layout_marginBottom="50dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:text="Login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
android:id="@+id/textView"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:fontFamily="sans-serif"
android:textColor="@android:color/background_light"
android:textSize="24sp"
app:layout_constraintVertical_bias="1.0"/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="320dp"
android:layout_height="400dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/btnLogin"
app:cardCornerRadius="15dp"
app:cardElevation="20dp"
app:layout_constraintVertical_bias="0.781"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:id="@+id/cardView2">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
app:srcCompat="@drawable/logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:id="@+id/imageView"
android:layout_marginTop="36dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.0"/>
<android.support.design.widget.TextInputLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:id="@+id/textInputLayout2"
app:layout_constraintTop_toBottomOf="@+id/imageView"
android:layout_marginTop="50dp" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:passwordToggleTint="@color/colorAccent">

<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress" android:id="@+id/inputEmail"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" android:id="@+id/textInputLayout3"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@+id/textInputLayout2"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:passwordToggleTint="@color/colorAccent">

<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" android:id="@+id/inputPassword"/>
</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Tambahkan kode diatas kedalam constraint layout cara nya seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bggradient"
tools:context=".MainActivity">

<!--ISI DI DALAM SINI-->

</android.support.constraint.ConstraintLayout>
Maka hasilnya akan seperti ini

FormLogin


3. Kotlin Time

Kalau tampilan sudah jadi sekarang kita akan masuk kebagian paling gampang yaitu coding.kalian tinggal klik MainActivity di dalam folder java pada menu.lalu kalian tinggal ikuti kode ini dan ketikan di dalam method onCreate.
btnLogin.setOnClickListener {
val email = inputEmail.text.toString()
val password = inputPassword.text.toString()
if (email.isEmpty()|| password.isEmpty()) {
Toast.makeText(this, "Please Insert Email and Password", Toast.LENGTH_SHORT).show()
return@setOnClickListener
}
if(email == "admin01@gmail.com" || password == "admin01"){
val progressDialog = ProgressDialog(this,
R.style.Theme_MaterialComponents_Light_Dialog)
progressDialog.isIndeterminate = true
progressDialog.setMessage("Loading...")
progressDialog.show()
val intent = Intent (this,Dashboard::class.java)
startActivity(intent)
finish()
}
}
Pada bagian kata Dashboard akan merah / error tapi jangan panik karenakan kita mengarahkan activity login ke activity Dashboard tetapi kita belum membuat activity Dashboard tersebut, jadi yang perlu kita lakukan sekarang adalah membuat activity Dashboard. Caranya mudah yaitu klik File > Activity > Empty Activity lalu beri nama activity tersebut Dashboard

new activity

Setelah membuat activity Dahsboard, maka pesan Error nya akan hilang.

Jalankan!

Kalau belum dijalankan bagaimana kita bisa tahu hasilnya? Untuk menjalankan program dari Android Studio kita perlu memiliki sebuah emulator atau menggunakan perangkat Android asli. Silahkan ikuti tutorial berikut ini untuk menjalankan aplikasi di emulator atau perangkat Android asli.

SUMBER