Membuat Menu Login Aplikasi Sederhana Menggunakan Android Studio

Sebelum kita memulai Tutorial Membuat Menu Login Aplikasi Sederhana Menggunakan C++ Menggunakan Android Studio.

Android Studio adalah Integrated Development Enviroment untuk sistem operasi Android, yang dibangung diatas perangkat lunak JetBrains IntelliJ IDEA dan didesain khusus untuk pengembangan Android.

Aplikasi yang digunakan adalah Android Studio

Untuk membuat codingan pertama download terlebih dahulu aplikasi Android Studio yang tertera pada link tersebut

Android Studio

Lalu anda install aplikasi Android Studio tersebut seperti biasa hingga selesai

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 ” .n 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).

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 )

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 :

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

Sangat mudah sekalikan belajar codingan salah satu belajar Menu Login Android Studio, jadi silahkan pelajari dengan benar dan baik, jika ada kesalahan atau error silahkan kirim komentar anda pada halaman ini

Sekian materi pembelajaran teknik informatika yang bisa saying berikan pada artikel ini. Untuk melihat contoh-contoh pemrograman lainnya anda bisa melihat di artikel lainnya. Semoga bermanfaat untuk mempelajari tentang Menu Login Aplikasi dengan baik. Selamat Mencoba Salam Codingers