Tutorial Membuat User Interface (UI) Login Android

thumbnail

Kali ini saya akan sharing mengenai Tutorial membuat User Interface (UI) Login Android. Login merupakan fitur paling mendasar dari suatu aplikasi baik itu di Android, iOs, web site, dll. Berbagai macam desain yang unik dibuat oleh ux designer.

Komponen yang biasanya terdapat pada halaman login adalah nama suatu aplikasi atau halaman tersebut, input text email/username, input text password/pin, button login, button lupa password, button daftar/register (Saya tidak buat pada tutorial kali ini).

Tahap awal anda harus membuat project baru, masukkan nama Application name, company name, project location, dan centang kotlin support jika anda ingin membuatnya pada kotlin. Kemudian pada activity_login.xml buat code seperti dibawah.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".LoginActivity"
        android:orientation="vertical">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/login_background_gradient">

            <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="30dp">

                <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/inpows"
                        android:textColor="@android:color/white"
                        android:gravity="center"
                        android:textSize="40dp"
                        android:layout_centerInParent="true"
                />

            </RelativeLayout>

        </LinearLayout>

        <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/white">

        </View>

    </LinearLayout>


    <android.support.design.widget.CoordinatorLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/mobileNoCoordinator"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_marginBottom="30dp"
            android:layout_marginTop="90dp">

        <LinearLayout
                android:id="@+id/loginPanel"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:background="@drawable/rounded_border"
                android:elevation="2dp"
                android:orientation="vertical"
                android:padding="15dp">

            <android.support.v7.widget.AppCompatTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="@string/login"
                    android:textColor="#333333"
                    android:textSize="17sp"/>

            <android.support.v7.widget.AppCompatTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:gravity="center"
                    android:text="@string/email"
                    android:textColor="@color/colorPrimaryDark"
                    android:textSize="8sp"/>

            <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/mobileNo"
                    fontPath="fonts/GothamRoundedBold.ttf"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:imeActionId="@+id/otp"
                    android:imeOptions="actionNext"
                    android:inputType="number"
                    android:maxLength="10"
                    android:textColor="#6E6E6E"
                    android:textSize="21sp"
                    android:theme="@style/MyEditTextTheme"
                    tools:ignore="InvalidImeActionId"/>

            <android.support.v7.widget.AppCompatTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="@string/password"
                    android:textColor="@color/colorPrimaryDark"
                    android:textSize="8sp"/>

            <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/password"
                    fontPath="fonts/GothamRoundedBold.ttf"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="30dp"
                    android:imeActionId="@+id/otp"
                    android:imeOptions="actionDone"
                    android:inputType="textPassword"
                    android:textColor="#6E6E6E"
                    android:textSize="21sp"
                    android:theme="@style/MyEditTextTheme"
                    tools:ignore="InvalidImeActionId"/>

        </LinearLayout>

        <android.support.v7.widget.AppCompatButton
                android:id="@+id/login"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="50dp"
                android:layout_marginRight="50dp"
                android:background="@drawable/rounded_button_border"
                android:elevation="10dp"
                android:text="@string/login"
                android:textAllCaps="false"
                android:textSize="12dp"
                android:textColor="@color/black"
                app:layout_anchor="@id/loginPanel"
                app:layout_anchorGravity="bottom|center"/>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.v7.widget.AppCompatTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="30dp"
            android:gravity="center"
            android:text="@string/forgot_password"
            android:textColor="#6E6E6E"
            android:textSize="12sp"/>

</FrameLayout>

Buat 3 drawable yaitu login_background_gradient.xml, rounded_border.xml, rounded_button_border.xml.

1. rounded_button_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:padding="10dp"
       android:shape="rectangle">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="@color/white"/>
    <corners android:radius="10dp"/>
</shape>

2. rounded_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:padding="10dp"
       android:shape="rectangle">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="@color/white"/>
    <corners android:radius="10dp"/>
</shape>

3. login_background_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient
            android:angle="270"
            android:endColor="#5a4cc3"
            android:startColor="#3182e5"
            android:type="linear" />
</shape>

Selain itu saya menggunakan setting default yang sudah dibuild oleh android studio.

Klik Run ‘app’ (Shift+F10) dan kamu akan mendapat hasil seperti screenshot dibawah.

Login UI by Inpows
Login UI by Inpows

Bagi teman-teman yang ingin melihat full source untuk Login UI Android ini, bisa membuka link github.

Back To Top