Android - Desain Halaman Login Material Design

Desain halaman login yang menarik dan keren tentu saja menjadi sebuah daya tarik sendiri untuk pemakai aplikasi sahabat. Membuat aplikasi tak luput dari desain dan konsep awal aplikasi. Konsep awal dalam pembuatan aplikasi merupakan hal penting yang bisa menentukan seberapa menarik sebuah aplikasi. Kali ini sahabat akan membahas sedikit tentang desain halam awal login -- Menggunakan Android --.

1. Setelah Android Studio sahabat sudah terbuka, arakan pointer ke color.xml untuk menambah warna yang diinginkan.

2. Klik Color.xml 2 kali dan tambahkan warna seperti ini

	<?xml version="1.0" encoding="utf-8"?>
	<resources>
	<color name="colorPrimary">#3F51B5</color>
	<color name="colorPrimaryDark">#303F9F</color>
	<color name="colorAccent">#FF4081</color>
	<color name="bg_login">#26ae90</color>
	<color name="bg_register">#2e3237</color>
	<color name="bg_main">#428bca</color>
	<color name="white">#ffffff</color>
	<color name="input_login">#222222</color>
	<color name="input_login_hint">#999999</color>
	<color name="input_register">#888888</color>
	<color name="input_register_bg">#3b4148</color>
	<color name="input_register_hint">#5e6266</color>
	<color name="btn_login">#26ae90</color>
	<color name="btn_login_bg">#eceef1</color>
	<color name="lbl_name">#333333</color>
	<color name="btn_logut_bg">#ff6861</color>
	</resources>

view raw gistfile1.txt hosted with ❤ by GitHub

3. Berikut Tampilan color.xml yang sudah diedit

4. Kemudian Klik 2 kali pada String.xml untuk menambahkan kalimat atau kata dalam halaman login, berikut kode yang ditambahkan

	<resources>
	<string name="app_name">Login</string>
	<string name="hint_email">Username</string>
	<string name="hint_password">Password</string>
	<string name="hint_name">Fullname</string>
	<string name="btn_login">LOGIN</string>
	<string name="btn_register">REGISTER</string>
	<string name="btn_link_to_register">Bukan Anggota? Daftar Sekarang.</string>
	<string name="btn_link_to_login">Sudah Daftar! Login Sekarang.</string>
	<string name="welcome">Welcome</string>
	<string name="btn_logout">LOGOUT</string>
	<string name="name">Fullname</string>
	</resources>

view raw string.xml hosted with ❤ by GitHub

5. Berikut tampilan string.xml yang telah diedit

6. Yang terakhir edit file activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@color/bg_login"
	android:gravity="center"
	android:orientation="vertical"
	android:padding="10dp"
	tools:context="com.subayu.studio.login.MainActivity">
	<LinearLayout
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center"
	android:orientation="vertical"
	android:paddingLeft="20dp"
	android:paddingRight="20dp" >
	<EditText
	android:id="@+id/username"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginBottom="10dp"
	android:background="@color/white"
	android:hint="@string/hint_email"
	android:padding="10dp"
	android:inputType="textPersonName"
	android:textColor="@color/input_login"
	android:textColorHint="@color/input_login_hint"
	android:maxLines="1" />
	<EditText
	android:id="@+id/password"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginBottom="10dp"
	android:background="@color/white"
	android:hint="@string/hint_password"
	android:inputType="textPassword"
	android:padding="10dp"
	android:textColor="@color/input_login"
	android:textColorHint="@color/input_login_hint"
	android:maxLines="1" />
	<!-- Login Button -->
	<Button
	android:id="@+id/btnLogin"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="20dip"
	android:background="@color/btn_login_bg"
	android:text="@string/btn_login"
	android:textColor="@color/btn_login" />
	<!-- Link to Login Screen -->
	<Button
	android:id="@+id/btnLinkToRegisterScreen"
	android:layout_width="fill_parent"
	android:visibility="gone"
	android:layout_height="wrap_content"
	android:layout_marginTop="40dip"
	android:background="@null"
	android:text="@string/btn_link_to_register"
	android:textAllCaps="false"
	android:textColor="@color/white"
	android:textSize="15sp" />
	</LinearLayout>
	</LinearLayout>

view raw activityMain.xml hosted with ❤ by GitHub

7. Hasil akhir 

8. Jalankan di Emulator (genymotion) atau Smartphone android sahabat.

9. Slesai

 Semoga Bermanfaat 

Sumber : androidhive.info