30 Menit Membuat Login UI Design Menarik Android

Pada tutorial kali ini kita akan belajar selama 30 Menit Membuat Login UI Design Menarik Android menggunakan Android Studio.

Sebelumnya kita sudah belajar membuat ui dashboard menu menarik yang bisa kamu pelajari pada tautan berikut ini.

Sesuai judul tutorial ini kita hanya akan fokus pada pembuatan UI designnya saja dan tidak ada database ataupun coding java.  Baiklah tanpa panjang lebar kita langsung praktekan membuat UI design login android.

30 Menit Membuat Login UI Design Menarik Android

Inilah tutorial membuat desain login yang menarik pada android studio.

1. Buat Project Baru

Buka android studio kemudian buat sebuah project baru dengan nama project ” Uilogin ” .  Jika belum bisa silahkan pelajari tautan dibawah ini.

2. Library Material Design

Kita akan membuat design UI login dengan tambahan material design agar tampilan lebih kekinian. Tambahkan kode berikut pada build.gradle(module.app).

compile 'com.android.support:design:24.2.0'

Ket : Sesuaikan dengan API Android Studio yang kamu gunakan digunakan : misal 26, 27, dan 28. 

Setelah ditambahkan jangan lupa klik sync now. Pastikan laptop terhubung ke internet.

3. Tambahkan Icon

Tambahkan 3 icon dari android studio pada drawable dengan cara :

• klik kanan pada drawable
• pilih new > pilih image asset
• icon type > pilih Action bar dan Tab icon
• Name : user_icon
• Clip art : ic_circle_black (seperti tampilan pada gambar )

 

 Icon User

Ulangi langkah diatas dengan menambahkan 2 icon lagi. Dengan nama icon user_icon dan password (icon user dan lock) seperti pada gambar diatas.

4. Background Lingkaran

Buat background lingkaran dengan cara :

• klik kanan pada drawable
• pilih New > Drawable Resource File
• pada file name isikan background_profile
• klik ok

Masukan kode-kode berikut pada file background_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1000dp" />
    <solid android:color="#5EAE9E" />
    <stroke
        android:width="5dip"
        android:color="#5EAE9E" />
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
</shape>

5. Buat Layout

Buka activity_main.xml. Disini kita akan membuat layout UI login menggunakan kode-kode xml. Layout yang akan digunakan yaitu : Relative layout dan Linear Layout.
Kita akan membuat layout seperti gambar berikut :

Penjelasan :

• Layout utama ditandai dengan box no. 1 adalah Relative Layout. Kode xml yang digunakan :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#4A9586"
    android:orientation="vertical"
    android:scrollbarAlwaysDrawVerticalTrack="true">

</RelativeLayout>

• Background putih ditandai dengan box no. 2 adalah Relative Layout. Kode xml yang digunakan :

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/login_title"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="70dp"
    android:background="#fff"
    android:elevation="4dp"
    android:orientation="vertical"
    android:padding="20dp"
    android:id="@+id/relativeLayout">

</RelativeLayout>

• Untuk menempatkan button, textview dan edit text ditandai dengan box no. 3 adalah Linear Layout :

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingTop="30dp">

</Linear Layout>

6. Tambahkan Widget

Setelah kita mengetahui layout apa saja yang dibutuhkan.

Perhatikan gambar diatas, kita perlu menambahkan beberapa komponen widget :

• TextView : untuk membuat login & forgot password. 
• EditText : untuk membuat username & password
• TextInputLayout : widget dari material design yang diletakan sebelum EditText
• Button : untuk membuat tombol sign in
• ImageButton : untuk membuat lingkaran icon user profile 

Langsung saja kode lengkapnya digabungkan dengan layout yaitu :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#4A9586"
    android:orientation="vertical"
    android:scrollbarAlwaysDrawVerticalTrack="true">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/login_title"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="70dp"
        android:background="#fff"
        android:elevation="4dp"
        android:orientation="vertical"
        android:padding="20dp"
        android:id="@+id/relativeLayout">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="30dp">

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:drawableLeft="@drawable/username"
                    android:hint="User Name"
                    android:inputType="textEmailAddress" />
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:drawableLeft="@drawable/password"
                    android:hint="Password"
                    android:inputType="numberPassword" />
            </android.support.design.widget.TextInputLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:paddingTop="5dp"
                android:text="Forgot Password?" />


            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="22dp"
                android:background="#d67601"
                android:text="Sign in"
                android:textAllCaps="false"
                android:textColor="#fff"
                android:textSize="18sp" />
        </LinearLayout>
    </RelativeLayout>

    <ImageButton
        android:id="@+id/user_profile_photo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@+id/login_title"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:background="@drawable/background_profile"
        android:elevation="4dp"
        android:src="@drawable/user_icon" />

    <TextView
        android:id="@+id/login_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="26dp"
        android:gravity="center_horizontal"
        android:text="Login "
        android:textColor="#fff"
        android:textSize="26sp"
        android:textStyle="bold"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

7. Running Aplikasi

Jika sudah tidak ada error silahkan running melalui android virtual device (AVD), emulator genymotion, atau langsung ke smartphone android yang kamu punya.

Mudah bukan untuk membuat Login UI Design Menggunakan Material Design?.
Silahkan dicoba dan dimodifikasi sesuai kebutuhan, semoga bermanfaat dan jangan lupa tekan tombol share