A Perfect UI Should simply get out the way of users while they successfully perform their Task and UI Design should be Interactive to interact the users.

Today, I want to share my latest design for Login and Sign Up form.

layout

 

CODE :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1c3c4d">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Create Account"
android:textColor="#ffffff"
android:textSize="30dp" />
<LinearLayout
android:id="@+id/linear"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="130dp"
android:background="@drawable/shadow"
android:orientation="vertical"
android:padding="40dp">
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:drawableLeft="@drawable/signup_person"
android:drawablePadding="10dp"
android:gravity="fill"
android:hint="Your Name"
android:paddingLeft="15dp" />
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="15dp"
android:drawableLeft="@drawable/signup_phone"
android:drawablePadding="10dp"
android:gravity="fill"
android:hint="Phone no"
android:inputType="number"
android:paddingLeft="15dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:drawablePadding="10dp"
android:gravity="end"
android:paddingLeft="5dp"
android:paddingRight="10dp"
android:text="Forget password ?"
android:textColor="#f26422" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="15dp"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_marginTop="1dp"
android:background="@drawable/button_bg"
android:text="Sign in"
android:textColor="#ffffff" />
<Button
android:id="@+id/google"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#F44336"
android:text="Google"
android:visibility="gone"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
<Button
android:id="@+id/btnSkip"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="end|bottom"
android:layout_marginBottom="2dp"
android:layout_marginRight="20dp"
android:background="@drawable/skip1"
android:gravity="center"
android:textColor="#000000" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal|top"
android:layout_marginTop="60dp"
android:src="@drawable/user_profile"
android:id="@+id/image" />
</FrameLayout>

 

 

 

Advertisements