Android Material Design Forgot Password UI XML

Download UI Design Form Forgot Password ANDROID XML LAYOUT

Halo semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan baik-baik saja. Sebelumnya saya sudah membagikan kepada kalian user interface (ui) form register dan form login. Dan sekarang saya akan membagikan ui untuk form forgot password dengan material design.

Ketika user telah mendaftar dalam suatu aplikasi dan mereka lupa dengan password, maka aplikasi harus memberikan form untuk user agar bisa membuat password baru atau menampilkan password yang telah user buat. Biasanya untuk membuat form forgot password, aplikasi hanya membutuhkan email.

Untuk itu, disini saya akan membagikan desain ui form forgot password untuk aplikasi android menggunakan material design yang keren.

Download Material Design Form Forgot Password Android XML UI

1. Buatlah projek android studio baru.

2. Karena dalam user interface ini saya menggunakan material design, maka dari itu tambahkan module material design kedalam projek android studio kalian dengan cara 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 email material design ke dalam projek android studio kalian. Untuk mendapatkan ikon email, kalian bisa mengikuti tutorial pada link di bawah ini.

CARA MENAMBAHKAN IKON KE DALAM PROJEK ANDROID STUDIO

4. Agar terlihat menarik pada tampilan ui, tambahkan gambar untuk dijadikan logo pada aplikasi kalian. Pada projek ini saya menggunakan logo android rion.

5. Buka file activity_main.xml dan tambahkan kode dibawah ini untuk membuat ui form forgot password material design.

<?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="20dp"
            android:layout_marginBottom="30dp"
            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">

                <TextView
                    style="@style/TextAppearance.AppCompat.Title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Forgot your password?" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:gravity="center"
                    android:text="Enter your e-mail below to receive your password reset instructions" />

                <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_mail_outline"
                        android:drawableLeft="@drawable/ic_mail_outline"
                        android:drawablePadding="8dp"
                        android:hint="E-mail address"
                        android:inputType="textEmailAddress" />
                </com.google.android.material.textfield.TextInputLayout>

                <com.google.android.material.card.MaterialCardView
                    android:id="@+id/btnLogin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    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="Send"
                        android:textAllCaps="true"
                        android:textColor="@android:color/white" />
                </com.google.android.material.card.MaterialCardView>

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


    </LinearLayout>

</ScrollView>

6. Pada user interface ini saya menghilangkan toolbar. Kalian bisa menghilangkan toolbar pada aplikasi dengan cara mengubah file styles.xml menjadi NoActionBar.

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 form forgot password material design xml android. Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

Get real time updates directly on you device, subscribe now.

You might also like

Leave A Reply

Your email address will not be published.