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 ProjectBeri 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 ini3. 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 DashboardSetelah 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
0 Komentar