Let me share with you one more Layout (UI) design for Login Screen in android.
In this Design, we create two Layouts for Portrait screen and Landscape screen.
1) Create new project name is “LayoutDesign”.
2) Create new file in layout folder name is “login_design_4.xml”

</pre>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/login_design4_img"
android:padding="8dp"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="320dp"
android:layout_height="230dp"
android:layout_gravity="center"
android:background="@android:drawable/dialog_holo_light_frame">
<LinearLayout
android:layout_width="300dp"
android:layout_height="170dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:orientation="vertical"
android:padding="10dp">
<EditText
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="@drawable/card_background"
android:drawableLeft="@drawable/user"
android:drawablePadding="10dp"
android:elevation="5dp"
android:hint="Enter your Email-id" />
<EditText
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="10dp"
android:background="@drawable/card_background"
android:drawableLeft="@drawable/key"
android:drawablePadding="10dp"
android:elevation="5dp"
android:hint="Enter your Password" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Remember me"
android:textColor="#0099CC" />
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginLeft="30dp"
android:background="@drawable/login_design4_button"
android:text="Login" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center_horizontal|top"
android:layout_marginTop="100dp"
android:background="@drawable/login_design4_card_background"
android:elevation="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:src="@drawable/image" />
</RelativeLayout>
</FrameLayout>
</RelativeLayout>

login_design_4

3) Layout for landscape screen·

* Right click on layout and select layout resource file·
* Go available qualifier and select orientation ·
* Select orientation for landscape mode. ·
* Layout name define same as above layout “login_design_4.xml(land)”
* Then copy the above code in this file and arrange the xml code for land screen mode.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<pre> xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/login_design4_img"
android:padding="8dp"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="350dp"
android:layout_height="230dp"
android:layout_marginTop="100dp"
android:layout_gravity="center_horizontal"
android:background="@android:drawable/dialog_holo_light_frame">
<LinearLayout
android:layout_width="300dp"
android:layout_height="170dp"
android:padding="10dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<EditText
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@drawable/card_background"
android:drawableLeft="@drawable/user"
android:drawablePadding="10dp"
android:elevation="5dp"
android:hint="Enter your Email-id" />
<EditText
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="@drawable/card_background"
android:drawableLeft="@drawable/key"
android:drawablePadding="10dp"
android:hint="Enter your Password"
android:elevation="5dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Remember me"
android:textColor="#0099CC"/>
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="10dp"
android:background="@drawable/login_design4_button"
android:text="Login" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="125dp"
android:layout_height="125dp"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal|top"
android:elevation="5dp"
android:background="@drawable/login_design4_card_background">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/image"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</FrameLayout>
</RelativeLayout>

login_desgn_4(landscape mode)

Result:-

This slideshow requires JavaScript.

 

Advertisements