2.5. Implementasi rancangan halaman login

Langkah pertama, kita tambahkan file resource baru dengan cara klik kanan folder layout > new > Layout resource file. Berikan nama activity_login.xml, dengan Root element berupa LinearLayout.

Setelah berhasil men-generate, kita akan mendapatkan sebuah syntax xml dengan root element LinearLayout. Elemen tersebut dapat menampung child view dengan orientasi vertical saja atau horizontal saja. Karena oada rancangan UI tampilan komponen-komponen halaman loginnya tersusun secara vertical, maka kita gunakan atribut android:orientation="vertical". Agar supaya lebar dan tinggi LinearLayout memenuhi layar, maka kita set atribut android:layout_width dan android:layout_height dengan nilai match_parent.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
</LinearLayout>

Kemudian untuk menampilkan logo, kita tambahkan sebuah ImageView. Ukuran lebar dan tingginya kita tetapkan dengan menggunakan atribut android:width dan android:height. Supaya tinggi logonya tidak terlalu menghabiskan ruang kita berikan nilai 150dp. Dp merupakan singkatan dari Density Independence, untuk menyatakan satuan ukuran pada Android. Lebih jelasnya kita bisa mempelajari blog ini.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:id="@+id/imageView"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/todolist_logo" />

</LinearLayout>

Dibawah ImageView, kita tambahkan dua buah EditText masing-masing untuk menuliskan email dan password. Supaya ukuran lebarnya relatif memenuhi layar, kita berikan nilai match_parent pada atribut android:layout:width.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        .... />

    <EditText
        android:hint="email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/editTextEmail"
        android:layout_gravity="center_horizontal" />

    <EditText
        android:hint="password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/editTextPassword"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

Bagian yang perlu diperhatikan pada EditText adalah atribut android:inputType. Ada beberapa macam variasi nilainya. Untuk menuliskan email, kita beri nilai "textEmailAddress" maka dengan sendirinya soft keyboard muncul sebagai mode email. Kita akan menemukan karakter @ pada salah satu tombol keyboard. Sedangkan dengan memberikan nilai "textPassword", EditText dengan sendirinya akan mengubah semua karakter yang ditulis menjadi simbol * supaya tidak mudah dibaca.

Akhirnya, kode pada halaman activity_login.xml secara lengkap seperti berikut

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/todolist_logo" />

    <EditText
        android:hint="email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/editTextEmail"
        android:layout_gravity="center_horizontal" />

    <EditText
        android:hint="password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/editTextPassword"
        android:layout_gravity="center_horizontal" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="login"
        android:id="@+id/buttonLoagin"
        android:layout_gravity="center_horizontal" />

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="dont have any account?"
            android:padding="8dp"
            android:id="@+id/textView" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="register here"
            android:textStyle="bold"
            android:padding="8dp"
            android:id="@+id/textViewRegister" />
    </LinearLayout>
</LinearLayout>

berikut preview-nya