Android Material Design Login Form XML UI

Android Material Design Login Form XML UI Design

Halo semuanya. Bagaimana kabar kalian hari ini? Saya harap kalian baik-baik saja. Pada kesempatan kali ini, saya akan membagikan UI Login atau sign in form yang keren untuk aplikasi android.

Kita biasanya melihat halaman login yang keren di website, seperti pada website sosial media. Mereka menampilkan halaman login dengan semenarik mungkin agar user nyaman menggunakannya. Login tidak hanya pada halaman website saja, pada suatu aplikasi pun bisa.

Untuk itu, di sini saya akan membagikan desain user interface login atau sign in form untuk aplikasi android dengan menggunakan Material Design yang keren.

Download Material Design Login/Sign In Form UI XML Android

1. Buatlah projek android studio baru.

2. Buka file build.gradle (Module: app) lalu tambahkan kode di bawah ini pada bagian dependencies.

implementation 'com.google.android.material:material:1.0.0'

3. Tambahkan ikon di bawah ini ke dalam projek android studio 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"
                    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">

                    <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>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <CheckBox
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentLeft="true"
                        android:text="Remember Password" />

                    <TextView
                        android:id="@+id/forgotPassword"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentRight="true"
                        android:layout_centerInParent="true"
                        android:onClick="onClick"
                        android:text="Forgot Password?"
                        android:textColor="#073042" />

                </RelativeLayout>

                <com.google.android.material.card.MaterialCardView
                    android:id="@+id/btnLogin"
                    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="Login"
                        android:textAllCaps="true"
                        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="Don't have an account? "
                        android:textColor="#073042" />

                    <TextView
                        android:id="@+id/txtSignUp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:onClick="onClick"
                        android:text="Sign Up"
                        android:textColor="#073042"
                        android:textStyle="bold" />

                </LinearLayout>
            </LinearLayout>
        </com.google.android.material.card.MaterialCardView>


    </LinearLayout>

</ScrollView>

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 desain user interface untuk login activity pada aplikasi android. Silahkan komentar dibawah artikel ini jika kalian mengalami kendala saat melakukan desain ui ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. terima kasih.

Exit mobile version