Let me share with you a 3rd UI Design of Login Form.
Make sure Your UI (User interface)Design will be Attractive in Portrait Screen and as well as Landscape Screen.

  1.  Create a new project or new layout “login_design3.xml” in layout folder
    code:-

    <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"
    tools:context=".MainActivity"
    android:padding="8dp"
    android:background="@drawable/login_design_grident">
    
    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/login_design_circle"
    android:alpha="0.3"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    ></LinearLayout>
    
    <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="280dp"
    android:orientation="vertical"
    android:layout_gravity="center">
    
    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:gravity="center"
    android:textSize="35sp"
    android:text="Login Here"
    android:textColor="#ffffff"
    />
    
    <EditText
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_gravity="center"
    android:background="@drawable/login_design3_round_corner"
    android:drawableLeft="@drawable/user"
    android:hint="Enter your Email-id"
    android:textColorHint="#bababa"
    android:typeface="monospace"
    android:textSize="17sp"
    android:inputType="textEmailAddress"
    android:drawablePadding="5dp"
    android:padding="10dp"
    />
    <EditText
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:background="@drawable/login_design3_round_corner"
    android:layout_marginTop="10dp"
    android:layout_gravity="center"
    android:padding="10dp"
    android:drawableLeft="@drawable/password"
    android:drawablePadding="5dp"
    android:textSize="17sp"
    android:hint="Enter your Password"
    android:inputType="textPassword"
    android:textColorHint="#bababa"
    />
    
    <TextView
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Forget Password ?"
    android:textColor="@android:color/holo_red_dark"
    android:padding="10dp"
    android:layout_marginLeft="5dp"
    />
    
    <Button
    android:layout_width="250dp"
    android:layout_height="35dp"
    android:background="@drawable/login_design3_button"
    android:text="Sign in"
    android:layout_gravity="center"
    android:textColor="#ffffff"
    android:clickable="true"
    />
    
    </LinearLayout>
    
    </FrameLayout>
    
    </RelativeLayout>
    

 

2.   Create a new file in Drawable folder  name is”login_design_circle.xml”

<pre><?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="340dp"
        android:width="340dp"/>
    <solid android:color="#414F12"/>
</shape></pre>

 

 

3. Create a new file name is “login_design3_round_corner.xml” for edit text background.

<pre><?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="200dp"></corners>
    <solid android:color="#698B22"
        />
</shape></pre>

4. Create a new file in  drawable folder name is “login_design_gradient.xml”

<pre><?xml version="1.0" encoding="utf-8"?>

<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#414F12"
        android:endColor="#98B82A"
        android:angle="90"></gradient>

</shape></pre>

gradient

Final Result :-

Portrait:-

Login form example

Landscape:-login form landscape

Advertisements