Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula Bagian 2 : Membuat Form Login

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

1. Buat Project Baru

Langsung saja kawan-kawan buka senjata andalan kita yaitu Android Studio lalu pilih Create 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.

Setelah itu klik Next kemudian pilih Empty Activity.

2.Desain Tampilan

Sekarang kita masuk kebagian paling menyenangkannya dulu yaitu desain tampilan.

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.

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.

<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

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

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.

Penutup

Demikian tutorial membuat form Login kali ini. Selanjutnya kita akan belajar Membuat aplikasi lain. Semoga bisa dipahami oleh pembaca sekalian. Jika ada kritik, saran, pertanyaan atau request silahkan melalui kolom komentar saja ya.