Tutorial Android Rion - Cara Membuat Aplikasi Android Dengan Mudah
  • Pemrograman
    • Java untuk Androidprogress
    • Kotlin untuk Androidsoon
    • Dart untuk Androidsoon
  • Tutorial
    • Tutorial Dasar
    • Tutorial Lanjutan
  • TopikNew
  • UI Design
  • Tools
No Result
View All Result
Tutorial Android Rion
  • Pemrograman
    • Java untuk Androidprogress
    • Kotlin untuk Androidsoon
    • Dart untuk Androidsoon
  • Tutorial
    • Tutorial Dasar
    • Tutorial Lanjutan
  • TopikNew
  • UI Design
  • Tools
No Result
View All Result
Tutorial Android Rion
Home User Interface Register

Android Material Design Register Form XML UI Design

Rion by Rion
August 23, 2021
in Register, User Interface
Reading Time: 6 mins read
813
A A
0
Android Material Design Register Form XML UI Design
383
SHARES
5.5k
VIEWS
Share on FacebookShare on Linkedin
ADVERTISEMENT

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

ADVERTISEMENT
Download UI Design Register/Sign Up Form

Tags: ButtonDownloadMaterial DesignRegisterSign Up
Share153Share27Send
ADVERTISEMENT
Rion

Rion

“First, solve the problem. Then, write the code.” – John Johnson

Tutorial Terkait

Tutorial Cara Membuka Activity Baru pada ExpandableListView di Android Studio
Tutorial

[Tutorial Lanjutan] Cara Membuka Activity Baru Pada Child Element ExpandableListView di Android Studio

September 9, 2021
5.1k
Tutorial Cara Membuat setOnClickListener Pada ExpandableListView Di Android Studio
Tutorial

[Tutorial Lanjutan] Cara Membuat setOnClickListener Pada ExpandableListView di Android Studio

September 4, 2021
5.1k
Tutorial Cara Membuat ExpandableListView di Android Studio
Tutorial

Tutorial Dasar Cara Membuat ExpandableListView Menggunakan ArrayList di Android Studio

September 4, 2021
5.2k
Leave Comment

Tags

ActionBar Activity Adapter Admob Alert Dialog Android Studio Anim API Key BaseAdapter Bottom Sheet Button CardView Custom Download Drawable EditText ExpandableListView Facebook Firebase Floating Action Button Fragment Galeri Google Maps GridView ImageView Intent Library ListView Login Material Design Menu RecyclerView SearchView TabLayout TextView Toast Toolbar Tutorial Dasar Tutorial Lanjutan Tutorial Mudah Tutorial Video Video ViewPager WebView WhatsApp
ADVERTISEMENT
Tutorial Android Rion

Android Rion - Tutorial adalah website yang sangat populer untuk para Android Developer. Tutorial di website ini akan terus diperbarui secara berkala mengikuti perkembangan. Setiap bulannya ribuan developer seperti kalian mengunjungi website ini.

Cari Berdasarkan Kategori

  • Admob
  • Android Studio
  • Google Cloud Platform
  • JavaScript
  • Login
  • Material Design
  • Register
  • Tools
  • Tutorial
  • UI Kit
  • User Interface
  • Vysor

Newsletter

Subscribe to our mailing list to receives daily updates direct to your inbox!

*we hate spam as much as you do

  • Tentang
  • Kontak
  • Kebijakan Privasi

© 2022. Bagian dari Android Rion. Situs ini dibuat dengan ❤ dan ☕

No Result
View All Result
  • Pemrograman
    • Java untuk Android
    • Kotlin untuk Android
    • Dart untuk Android
  • Tutorial
    • Tutorial Dasar
    • Tutorial Lanjutan
  • Topik
  • UI Design
  • Tools

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Go to mobile version