Breaking News
Loading...
Tuesday, 6 February 2018

Info Post
Pada aplikasi yang mensyaratkan user untuk login sebelum memasuki dalamnya aplikasi, adalah penting untuk membuat user terkesan pada pandangan pertama saat aplikasi masih meminta user untuk login. Maka desain layout haruslah kita buat semenarik mungkin, karena halaman login ibarat wajah, kalau di awal sudah menunjukkan wajah kurang enak, user akan mungkin menyimpulkan  juga bahwa akan sama tidak menariknya dengan isi aplikasinya. 
Nah pada artikel ini, saya akan membahas hal itu. Pastikan teman-teman semua tidak hanya membaca, tetapi sebisa mungkin juga langsung mempraktekkannya. Tentunya juga teman-teman harus sudah mempunyai tools-nya, baik Android Studio maupun yang lainnya. Ok langsung saja, simak baik-baik perlangkah.

Pertama kita buat resource untuk warna-warna yang akan kita gunakan, copy paste kode dibawah pada file color.xml teman-teman.


<resources>

    <color name="white">#ffffff</color>
    <color name="guillotine_background">#444153</color>
    <color name="colorBluePark">#0288D1</color>
    <color name="green_invoice">#39BA45</color>

</resources>

Kemudian buatlah file drawable resource dengan kode sebagai berikut, beri nama border_edittext.xml.


<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <solid android:color="@color/white" />
    <stroke android:width="1dip"
        android:color="@color/white"/>
    <padding android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp"/>
    <corners android:bottomRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:topLeftRadius="5dp"/>
</shape>

Terakhir teman-teman buat file xml di folder layout, dengan nama login.xml. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/guillotine_background">

    <LinearLayout
        android:layout_width="match_parent"
        android:gravity="center"
        android:id="@+id/lyt_log"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:layout_marginBottom="@dimen/activity_horizontal_margin"
        android:layout_height="wrap_content">

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


            <LinearLayout
                android:layout_width="270dp"
                android:layout_height="120dp"
                android:orientation="vertical"
                android:gravity="center"
                >

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_horizontal"
                    android:textSize="20dp"
                    android:textColor="@color/white"
                    android:text="LOGO HERE"/>

            </LinearLayout>

        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/lyt_medsos"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:layout_below="@+id/lyt_log">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"

            android:layout_height="match_parent">

            <Button
                android:id="@+id/login_facebook"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/activity_horizontal_margin"
                android:layout_marginRight="5dp"
                android:textColor="@color/white"
                android:textAllCaps="false"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:drawableRight="@drawable/facebook64"
                android:background="@color/colorBluePark"
                android:text="Sign In With"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/login_google"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textColor="@color/white"
                android:textAllCaps="false"
                android:drawableRight="@drawable/google2"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:background="@color/red_dark"
                android:text="Sign In With"/>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:orientation="vertical"
        android:layout_marginTop="17dp"
        android:layout_below="@+id/lyt_medsos"
        android:layout_centerHorizontal="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <View
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_weight="0.5"
                android:layout_gravity="center"
                android:background="@color/white"/>

            <TextView
                android:layout_width="0dp"
                android:layout_weight="0.2"
                android:gravity="center"
                android:textColor="@color/white"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:textSize="16dp"
                android:text="atau"/>

            <View
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_weight="0.5"
                android:layout_gravity="center"
                android:background="@color/white"/>
        </LinearLayout>


        <EditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/user_ikon"
            android:hint="Username"
            android:paddingTop="12dp"
            android:paddingBottom="12dp"
            android:textSize="16sp"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:background="@drawable/border_edittext"/>

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/email_ikon"
            android:drawableEnd="@drawable/email_ikon"
            android:hint="Password"
            android:textSize="16sp"
            android:inputType="textPassword"
            android:paddingTop="12dp"
            android:paddingBottom="12dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/border_edittext"/>


        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:paddingBottom="12dp"
            android:paddingTop="12dp"
            android:id="@+id/login"
            android:layout_marginTop="12dp"
            android:background="@color/green_invoice"
            android:text="Login"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_marginBottom="5dp"
        android:layout_alignParentBottom="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@color/white"
            android:textSize="14sp"
            android:text="Belum Punya Akun?"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textStyle="bold"
            android:id="@+id/daftar"
            android:textColor="@color/white"
            android:textSize="19sp"
            android:text="DAFTAR"/>
    </LinearLayout>
</RelativeLayout>

Sampai tahap ini teman-teman sudah bisa meng-compile aplikasinya. Kalau berhasil, maka tampilan loginnya akan seperti gambar di bawah ini.


Selamat mencoba, dan tunggu artikel lanjutan berikutnya tentang Android. Terima kasih, Jangan lupa komentar.

0 comments:

Post a Comment