Membuat UI Login Menarik di Android – Ide #2

thumbnail

Pada tutorial kali ini saya akan membagikan ide untuk desain UI login di android. Sebelumnya saya juga pernah membagikan tampilan User Interface (UI) Login di Android. Ide menarik memang bisa datang dari mana saja, disini saya mencoba mengimplementasikan desain login yang menurut saya menarik dan mungkin bisa teman-teman coba langsung karena tidak membutuhkan waktu lama untuk membuatnya.

1. Buat project baru

Seperti biasa kita mulai dari awal yaitu membuat project baru. Disini saya menggunakan kotlin.

2. Tambahkan material design

Karena disini kita akan membuat user interface login dengan tambahan material design agar tampilan lebih modern maka perlu anda tambahkan kode berikut pada build.gradle(module.app).

implementation 'com.android.support:design:28.0.0'

Setelah menambahkan kode diatas, kalian harus melakukan ‘Sync now’ terlebih dahulu.

3. Menambahkan icon yang diperlukan

Tambahkan satu ikon yaitu ‘person’ dari File > new > vector assets kemudian beri nama ic_person_white_24dp.xml (Jangan lupa untuk merubah warna icon menjadi warna putih pada tutorial ini).

4. Membuat bentuk lingkaran dengan icon

Selanjutnya buat bentuk lingkaran dengan icon person ditengahnya. Lingkaran dibuat dengan warna biru dan tepi berwarna putih. Kode background_profile.xml yang digunakan adalah seperti dibawah.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="@color/colorPrimary" />
            <stroke
                    android:width="5dip"
                    android:color="@android:color/white" />
            <padding
                    android:bottom="4dp"
                    android:left="4dp"
                    android:right="4dp"
                    android:top="4dp" />
        </shape>
    </item>
    <item
            android:drawable="@drawable/ic_person_white_24dp"
            android:gravity="center"
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp"/>
</layer-list>

Perlu diingat kalian harus menambahkan style dan color pada folder values. Untuk kode styles.xml adalah seperti dibawah.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="android:statusBarColor">@color/colorPrimary</item>
    </style>

</resources>

Untuk kode colors.xml seperti dibawah.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#0159ab</color>
    <color name="colorPrimaryDark">#0159ab</color>
    <color name="colorAccent">#0159ab</color>
    <color name="colorLoginBtn">#d67601</color>
</resources>

5. Buat layout tampilan login

buka activity_main.xml, pada layout ini kalian akan membuat UI login menggunakan kode-kode xml seperti Relative layout dan Linear layout. Kode activity_main.xml adalah seperti dibawah.

<?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="@color/colorPrimary"
                android:orientation="vertical"
                android:scrollbarAlwaysDrawVerticalTrack="true">

    <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/apps_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: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: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="@color/colorLoginBtn"
                    android:text="Log 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/apps_title"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="26dp"
            android:background="@drawable/background_profile"
            android:elevation="4dp" />

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

6. Running aplikasi yang dibuat

Setelah selesai coba kalian jalankan aplikasi yang sudah dibuat. Kalian akan mendapatkan hasil seperti gambar dibawah.


UI Login Android – Ide #2

Semoga bermanfaat tutorialnya. Jika membutuhkan kode lengkapnya, kalian bisa menemukannya di Github.

Back To Top