Halo semuanya. bagaimana kabar kalian hari ini? saya harap kalian baik-baik saja. Pada kesempatan kali ini, saya ingin membagikan user interface atau yang biasa di singkat UI untuk aplikasi android pada bagian Register atau Sign Up Form.
Tidak hanya suksesnya suatu program bisa berjalan, namun untuk tampilan dari suatu aplikasi harus di pertimbangkan. Sebaik-baik aplikasi yang kita buat, maka itu akan terlihat biasa saja jika tampilan dari aplikasi yang kita buat tidak menarik untuk di lihat. Jadi, selain kita membuat aplikasi yang di butuhkan orang, Kita juga harus mempertimbangkan tampilan (interface) dari aplikasi yang telah kita buat.
Banyak aplikasi android memiliki sistem sign up/register. Seperti pada aplikasi sosial media yang kalian gunakan. Ketika kalian ingin mendaftar pada aplikasi sosial media, maka kalian akan diperlihatkan sebuah tampilan register yang keren dari masing-masing aplikasi.
Jadi, pada artikel ini saya akan membagikan kepada kalian semua kode layout XML untuk membuat tampilan sign up/register seperti pada aplikasi sosial media dengan User Interface Android Material Design.
Download User Interface Register Form Android Material Design
1. Buatlah projek android studio baru.
2. Karena saya menggunakan Material Design, maka tambahkan kode di bawah ini pada file build.gradle di dalam projek kalian.
Gradle Scripts/build.gradle (Module: app)
implementation 'com.google.android.material:material:1.0.0'Setelah kalian menambahkan kode dependensi dalam projek kalian, lakukan sinkronisasi dengan cara klik sync yang muncul pada aplikasi android studio.
3. Tambahkan ikon di bawah ini ke dalam projek kalian.
Untuk mendapatkan ikon di atas, kalian bisa mengikuti tutorial pada link di bawah ini.
CARA MENAMBAHKAN IKON KE DALAM PROJEK ANDROID STUDIO
4. Tambahkan gambar logo di aplikasi android. Pada tutorial ini, saya menggunakan gambar di bawah ini sebagai logo yang ditampilkan pada aplikasi.
Download gambar di atas, lalu simpan dengan nama icon_white.png. Setelah itu copy gambar tersebut lalu paste dalam folder drawable pada android studio.
5. Buka file activity_main.xml, lalu masukkan kode di bawah ini.
app/res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#073042"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:layout_marginBottom="40dp"
android:src="@drawable/icon_white" />
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical"
android:padding="10dp">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableStart="@drawable/ic_person"
android:drawableLeft="@drawable/ic_person"
android:drawablePadding="8dp"
android:hint="Fullname"
android:inputType="textPersonName" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableStart="@drawable/ic_person_outline"
android:drawableLeft="@drawable/ic_person_outline"
android:drawablePadding="8dp"
android:hint="Username" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableStart="@drawable/ic_mail_outline"
android:drawableLeft="@drawable/ic_mail_outline"
android:drawablePadding="8dp"
android:hint="Email"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableStart="@drawable/ic_lock_outline"
android:drawableLeft="@drawable/ic_lock_outline"
android:drawablePadding="8dp"
android:hint="Password"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.card.MaterialCardView
android:id="@+id/btnCreateAccount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:onClick="onClick"
app:cardBackgroundColor="#073042"
app:cardCornerRadius="3dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="12dp"
android:text="Create An Account"
android:textAllCaps="false"
android:textColor="@android:color/white" />
</com.google.android.material.card.MaterialCardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already have account? "
android:textColor="#073042" />
<TextView
android:id="@+id/txtSignin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="Sign In"
android:textColor="#073042"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</ScrollView>OPTIONAL STEP
6. Untuk membuat toolbar menghilang, maka ubah file styles.xml menjadi NoActionBar.
7. Pada tutorial ini saya mengubah warna colorAccent menjadi biru gelap dengan kode warna #073042.
Run ‘app’
Sekarang jalankan projek android studio kalian, maka aplikasi akan terlihat seperti pada gambar di bawah ini.
AKHIR KATA
Itulah tadi UI (User Interface) Design untuk Register atau Sign Up Form dengan menggunakan Material Design. Karena ini hanya tutorial UI Design, maka kita tidak memerlukan kode pada file java activity. Tetapi jika kalian ingin mengaktifkan tombol yang telah di desain, maka kalian harus menambahkan kode pada file java activity.
Silahkan berkomentar di bawah postingan ini jika kalian mengalami kendala saat melakukan tutorial diatas. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Terima Kasih
