How to make a login and sign up screen using android studio

Today every app needs Login and SignUp page. So today we are going to learn how to create awesome Login and SignUp screen. There are certain functionalities that i had included in this app also that are listed below:
NOTE:The script is in eclipse format so import the script as Eclipse project in Android Studio. It will run.

Custom Toast Alert when any error occurred.
Shake Animation when fields are empty. (Login Only)
Show/Hide Password. (Login Only)
Screen Animation.

video tutorial

So let’s start with this tutorial :

1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.
2. Open res ⇒ values ⇒ strings.xml and add below string values. This are the strings that i am going to use in this tutorial.

<?xml version="1.0" encoding="utf-8"?> <resources>      <string name="app_name">Login and SignUp ScreenDesign Demo</string>     <string name="hello_world">Hello world!</string>     <string name="action_settings">Settings</string>     <string name="email">Email Id</string>     <string name="passowrd">Password</string>     <string name="login">LOGIN</string>     <string name="show_pwd">Show Password</string>     <string name="hide_pwd">Hide Password</string>     <string name="forgot">Forgot password?</string>     <string name="closebutton">Close Button for Activity</string>     <string name="newUser">Not a Member yet? Sign Up here.</string>     <string name="fullName">Full Name</string>     <string name="mobileNumber">Mobile Number</string>     <string name="location">Location</string>     <string name="confirmPassword">Confirm Password</string>     <string name="terms_conditions">By clicking SignUp you agree all the Terms and Conditions.</string>     <string name="signUp">SIGN UP</string>     <string name="already_user">Already have Account? Login here.</string>     <string name="registered_emailid">Please enter your Registered Email Id below:</string>     <string name="submit">SUBMIT</string>     <string name="back">BACK</string>  </resources>

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

<string name="app_name">Login and SignUp ScreenDesign Demo</string>

<string name="hello_world">Hello world!</string>

<string name="action_settings">Settings</string>

<string name="email">Email Id</string>

<string name="passowrd">Password</string>

<string name="login">LOGIN</string>

<string name="show_pwd">Show Password</string>

<string name="hide_pwd">Hide Password</string>

<string name="forgot">Forgot password?</string>

<string name="closebutton">Close Button for Activity</string>

<string name="newUser">Not a Member yet? Sign Up here.</string>

<string name="mobileNumber">Mobile Number</string>

<string name="location">Location</string>

<string name="confirmPassword">Confirm Password</string>

<string name="terms_conditions">By clicking SignUp you agree all the Terms and Conditions.</string>

<string name="already_user">Already have Account? Login here.</string>

<string name="registered_emailid">Please enter your Registered Email Id below:</string>

<string name="submit">SUBMIT</string>

</resources>

3. Open res ⇒ values and create new xml file naming colors.xml for placing all the colors at one place to use it anytime.

<?xml version="1.0" encoding="utf-8"?> <resources>      <color name="background_color">#009688</color>     <color name="white">#FFFFFF</color>     <color name="black">#000000</color>     <color name="white_greyish">#EEEEEE</color>     <color name="button_selectorcolor">#9E9E9E</color>  </resources>

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

<color name="white">#FFFFFF</color>

<color name="white_greyish">#EEEEEE</color>

</resources>

4. Now create activity_main.xml file that contains an ImageView that close activity on press and a FrameLayout for placing fragments.

<?xml version="1.0" encoding="utf-8"?> <scrollview xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true"
    android:overScrollMode="never"
    android:scrollbars="none" >      <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/background_color" >          <ImageView
            android:id="@+id/close_activity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_gravity="top|end"
            android:layout_margin="4dp"
            android:contentDescription="@string/closebutton"
            android:padding="5dp"
            android:src="@drawable/close" />          <FrameLayout
            android:id="@+id/frameContainer"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_below="@+id/close_activity" />     </RelativeLayout>  </ScrollView>

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:fillViewport="true"

android:overScrollMode="never"

android:scrollbars="none" >

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@color/background_color" >

<ImageView

android:id="@+id/close_activity"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_gravity="top|end"

android:layout_margin="4dp"

android:contentDescription="@string/closebutton"

android:padding="5dp"

android:src="@drawable/close" />

<FrameLayout

android:id="@+id/frameContainer"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@+id/close_activity" />

</RelativeLayout>

</ScrollView>

We will here work on fragments so if you don’t know how to use fragments then you can check my tutorial about Android Fragments.
5. Now create a new drawable directory under res folder and under this directory create drawable selector.

Button Selector

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">      <!-- When item pressed this item will be triggered -->     <item android:state_pressed="true"><shape android:shape="rectangle">             <corners android:radius="3dp" />              <solid android:color="@color/button_selectorcolor" />         </shape></item>      <!-- By default the background will be this item -->     <item><shape android:shape="rectangle">             <corners android:radius="3dp" />              <solid android:color="@color/white_greyish" />         </shape></item>  </selector>

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

</shape></item>

</shape></item>

</selector>

TextView Selector

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="true" android:color="@color/black"/>     <item android:color="@color/white"></item>  </selector>

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

</selector>

We have to use this selector for Buttons and TextViews. 6. Create new xml file for Login screen naming login_layout.xml and add the following lines.

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="20dp" >      <LinearLayout
        android:id="@+id/login_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >          <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="10dp"
            android:text="@string/login"
            android:textColor="@color/white_greyish"
            android:textSize="25sp"
            android:textStyle="bold" />          <EditText
            android:id="@+id/login_emailid"
             android:singleLine="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@android:color/transparent"
            android:drawableLeft="@drawable/email"
            android:drawablePadding="8dp"
            android:gravity="center_vertical"
            android:hint="@string/email"
            android:inputType="textEmailAddress"
            android:padding="10dp"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textSize="16sp" />          <View
            android:layout_width="fill_parent"
            android:layout_height="1px"
            android:background="@color/white_greyish" />          <EditText
            android:id="@+id/login_password"
             android:singleLine="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:drawableLeft="@drawable/password"
            android:drawablePadding="8dp"
            android:gravity="center_vertical"
            android:hint="@string/passowrd"
            android:inputType="textPassword"
            android:padding="10dp"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textSize="16sp" />          <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="5dp"
            android:paddingTop="8dp" >              <CheckBox
                android:id="@+id/show_hide_password"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/show_pwd"
                android:textColor="@color/white"
                android:textSize="14sp" />              <TextView
                android:id="@+id/forgot_password"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="end"
                android:padding="5dp"
                android:text="@string/forgot"
                android:textColor="@color/white"
                android:textSize="14sp" />         </LinearLayout>          <Button
            android:id="@+id/loginBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:background="@drawable/loginbutton_selector"
            android:padding="3dp"
            android:text="@string/login"
            android:textColor="#009688"
            android:textSize="17sp"
            android:textStyle="bold" />     </LinearLayout>      <TextView
        android:id="@+id/createAccount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/login_layout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:gravity="center"
        android:padding="5dp"
        android:text="@string/newUser"
        android:textColor="@color/white"
        android:textSize="15sp" />  </RelativeLayout>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="20dp" >

<LinearLayout

android:id="@+id/login_layout"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:orientation="vertical" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:padding="10dp"

android:text="@string/login"

android:textColor="@color/white_greyish"

android:textSize="25sp"

android:textStyle="bold" />

<EditText

android:id="@+id/login_emailid"

android:singleLine="true"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/email"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/email"

android:inputType="textEmailAddress"

android:padding="10dp"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<View

android:layout_width="fill_parent"

android:layout_height="1px"

android:background="@color/white_greyish" />

<EditText

android:id="@+id/login_password"

android:singleLine="true"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/password"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/passowrd"

android:inputType="textPassword"

android:padding="10dp"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:paddingBottom="5dp"

android:paddingTop="8dp" >

<CheckBox

android:id="@+id/show_hide_password"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="@string/show_pwd"

android:textColor="@color/white"

android:textSize="14sp" />

<TextView

android:id="@+id/forgot_password"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:gravity="end"

android:padding="5dp"

android:text="@string/forgot"

android:textColor="@color/white"

android:textSize="14sp" />

</LinearLayout>

<Button

android:id="@+id/loginBtn"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="3dp"

android:background="@drawable/loginbutton_selector"

android:padding="3dp"

android:text="@string/login"

android:textColor="#009688"

android:textSize="17sp"

android:textStyle="bold" />

</LinearLayout>

<TextView

android:id="@+id/createAccount"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/login_layout"

android:layout_centerHorizontal="true"

android:layout_marginTop="15dp"

android:gravity="center"

android:padding="5dp"

android:text="@string/newUser"

android:textColor="@color/white"

android:textSize="15sp" />

</RelativeLayout>

7. Create new xml file for SignUp screen naming signup_layout.xml and add the following lines.

<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="20dp" >      <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="@string/signUp"
        android:textColor="@color/white_greyish"
        android:textSize="25sp"
        android:textStyle="bold" />      <EditText
        android:id="@+id/fullName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/user"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:hint="@string/fullName"
        android:inputType="textCapWords"
        android:padding="10dp"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="16sp" />      <View
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="@color/white_greyish" />      <EditText
        android:id="@+id/userEmailId"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/email"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:hint="@string/email"
        android:inputType="textEmailAddress"
        android:padding="10dp"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="16sp" />      <View
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="@color/white_greyish" />      <EditText
        android:id="@+id/mobileNumber"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/phone"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:hint="@string/mobileNumber"
        android:inputType="phone"
        android:padding="10dp"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="16sp" />      <View
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="@color/white_greyish" />      <EditText
        android:id="@+id/location"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/location"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:hint="@string/location"
        android:inputType="textCapWords"
        android:padding="10dp"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="16sp" />      <View
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="@color/white_greyish" />      <EditText
        android:id="@+id/password"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/password"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:hint="@string/passowrd"
        android:inputType="textPassword"
        android:padding="10dp"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="16sp" />      <View
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="@color/white_greyish" />      <EditText
        android:id="@+id/confirmPassword"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/confirm_password"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:hint="@string/confirmPassword"
        android:inputType="textPassword"
        android:padding="10dp"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="16sp" />      <CheckBox
        android:id="@+id/terms_conditions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:text="@string/terms_conditions"
        android:textColor="@color/white"
        android:textSize="14sp" />      <Button
        android:id="@+id/signUpBtn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:background="@drawable/loginbutton_selector"
        android:padding="3dp"
        android:text="@string/signUp"
        android:textColor="@color/background_color"
        android:textSize="17sp"
        android:textStyle="bold" />      <TextView
        android:id="@+id/already_user"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="@string/already_user"
        android:textColor="@color/white_greyish"
        android:textSize="15sp" />  </LinearLayout>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical"

android:padding="20dp" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:padding="10dp"

android:text="@string/signUp"

android:textColor="@color/white_greyish"

android:textSize="25sp"

android:textStyle="bold" />

<EditText

android:id="@+id/fullName"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/user"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/fullName"

android:inputType="textCapWords"

android:padding="10dp"

android:singleLine="true"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<View

android:layout_width="fill_parent"

android:layout_height="1px"

android:background="@color/white_greyish" />

<EditText

android:id="@+id/userEmailId"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/email"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/email"

android:inputType="textEmailAddress"

android:padding="10dp"

android:singleLine="true"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<View

android:layout_width="fill_parent"

android:layout_height="1px"

android:background="@color/white_greyish" />

<EditText

android:id="@+id/mobileNumber"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/phone"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/mobileNumber"

android:inputType="phone"

android:padding="10dp"

android:singleLine="true"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<View

android:layout_width="fill_parent"

android:layout_height="1px"

android:background="@color/white_greyish" />

<EditText

android:id="@+id/location"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/location"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/location"

android:inputType="textCapWords"

android:padding="10dp"

android:singleLine="true"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<View

android:layout_width="fill_parent"

android:layout_height="1px"

android:background="@color/white_greyish" />

<EditText

android:id="@+id/password"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/password"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/passowrd"

android:inputType="textPassword"

android:padding="10dp"

android:singleLine="true"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<View

android:layout_width="fill_parent"

android:layout_height="1px"

android:background="@color/white_greyish" />

<EditText

android:id="@+id/confirmPassword"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/confirm_password"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/confirmPassword"

android:inputType="textPassword"

android:padding="10dp"

android:singleLine="true"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<CheckBox

android:id="@+id/terms_conditions"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="7dp"

android:text="@string/terms_conditions"

android:textColor="@color/white"

android:textSize="14sp" />

<Button

android:id="@+id/signUpBtn"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="15dp"

android:background="@drawable/loginbutton_selector"

android:padding="3dp"

android:text="@string/signUp"

android:textColor="@color/background_color"

android:textSize="17sp"

android:textStyle="bold" />

<TextView

android:id="@+id/already_user"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="5dp"

android:gravity="center"

android:padding="10dp"

android:text="@string/already_user"

android:textColor="@color/white_greyish"

android:textSize="15sp" />

</LinearLayout>

8. Create new xml file for ForgorPassword screen naming forgotpassword_layout.xml and add the following lines.

<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="20dp" >      <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="@string/registered_emailid"
        android:textColor="@color/white_greyish"
        android:textSize="17sp" />      <EditText
        android:id="@+id/registered_emailid"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:singleLine="true"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/email"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:hint="@string/email"
        android:inputType="textEmailAddress"
        android:padding="10dp"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="16sp" />      <View
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="@color/white_greyish" />      <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" >          <TextView
            android:id="@+id/backToLoginBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
          
            android:padding="5dp"
            android:text="@string/back"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:textStyle="bold" />          <TextView
            android:id="@+id/forgot_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
           android:gravity="right"
            android:padding="5dp"
            android:text="@string/submit"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:textStyle="bold" />     </RelativeLayout>  </LinearLayout>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center"

android:orientation="vertical"

android:padding="20dp" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:padding="10dp"

android:text="@string/registered_emailid"

android:textColor="@color/white_greyish"

android:textSize="17sp" />

<EditText

android:id="@+id/registered_emailid"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:singleLine="true"

android:background="@android:color/transparent"

android:drawableLeft="@drawable/email"

android:drawablePadding="8dp"

android:gravity="center_vertical"

android:hint="@string/email"

android:inputType="textEmailAddress"

android:padding="10dp"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textSize="16sp" />

<View

android:layout_width="fill_parent"

android:layout_height="1px"

android:background="@color/white_greyish" />

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp" >

<TextView

android:id="@+id/backToLoginBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:padding="5dp"

android:text="@string/back"

android:textColor="@color/white"

android:textSize="15sp"

android:textStyle="bold" />

<TextView

android:id="@+id/forgot_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:gravity="right"

android:padding="5dp"

android:text="@string/submit"

android:textColor="@color/white"

android:textSize="15sp"

android:textStyle="bold" />

</RelativeLayout>

</LinearLayout>

9. Now create a Utils.java file that contains some global strings for email validation and fragment tags.

package com.login_signup_screendesign_demo;  public class Utils { 	 	//Email Validation pattern 	public static final String regEx = "\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b";  	//Fragments Tags 	public static final String Login_Fragment = "Login_Fragment"; 	public static final String SignUp_Fragment = "SignUp_Fragment"; 	public static final String ForgotPassword_Fragment = "ForgotPassword_Fragment"; 	 }

package com.login_signup_screendesign_demo;

public class Utils {

//Email Validation pattern

public static final String regEx = "\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b";

//Fragments Tags

public static final String Login_Fragment = "Login_Fragment";

public static final String SignUp_Fragment = "SignUp_Fragment";

public static final String ForgotPassword_Fragment = "ForgotPassword_Fragment";

}

10. Since i am using Custom Toast for displaying error so for this we need a custom xml file under layout directory. So create a new xml file naming custom_toast.xml that contains a TextView for displaying error.

<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toast_root"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:padding="5dp" >      <TextView
        android:id="@+id/toast_error"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:drawableLeft="@drawable/error"
        android:drawablePadding="10dp"
        android:gravity="center_vertical"
        android:padding="5dp"
        android:textColor="#c0392b"
        android:textSize="15sp" />  </RelativeLayout>

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/toast_root"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="#ffffff"

android:padding="5dp" >

<TextView

android:id="@+id/toast_error"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:drawableLeft="@drawable/error"

android:drawablePadding="10dp"

android:gravity="center_vertical"

android:padding="5dp"

android:textColor="#c0392b"

android:textSize="15sp" />

</RelativeLayout>

11. Now create java file for Custom Toast naming CustomToast.java and add the following code. If you don’t know how to implement custom toast then you can read me tutorial about Custom Toast.

package com.login_signup_screendesign_demo;  import com.login_signup_screendesign_demo.R;  import android.content.Context; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import android.widget.Toast;  public class CustomToast {  	// Custom Toast Method 	public void Show_Toast(Context context, View view, String error) {  		// Layout Inflater for inflating custom view 		LayoutInflater inflater = (LayoutInflater) context 				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  		// inflate the layout over view 		View layout = inflater.inflate(R.layout.custom_toast, 				(ViewGroup) view.findViewById(R.id.toast_root));  		// Get TextView id and set error 		TextView text = (TextView) layout.findViewById(R.id.toast_error); 		text.setText(error);  		Toast toast = new Toast(context);// Get Toast Context 		toast.setGravity(Gravity.TOP | Gravity.FILL_HORIZONTAL, 0, 0);// Set 																		// Toast 																		// gravity 																		// and 																		// Fill 																		// Horizoontal  		toast.setDuration(Toast.LENGTH_SHORT);// Set Duration 		toast.setView(layout); // Set Custom View over toast  		toast.show();// Finally show toast 	}  }

package com.login_signup_screendesign_demo;

import com.login_signup_screendesign_demo.R;

import android.content.Context;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

import android.widget.Toast;

public class CustomToast {

// Custom Toast Method

public void Show_Toast(Context context, View view, String error) {

// Layout Inflater for inflating custom view

LayoutInflater inflater = (LayoutInflater) context

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

// inflate the layout over view

View layout = inflater.inflate(R.layout.custom_toast,

(ViewGroup) view.findViewById(R.id.toast_root));

// Get TextView id and set error

TextView text = (TextView) layout.findViewById(R.id.toast_error);

text.setText(error);

Toast toast = new Toast(context);// Get Toast Context

toast.setGravity(Gravity.TOP | Gravity.FILL_HORIZONTAL, 0, 0);// Set

// Toast

// gravity

// and

// Fill

// Horizoontal

toast.setDuration(Toast.LENGTH_SHORT);// Set Duration

toast.setView(layout); // Set Custom View over toast

toast.show();// Finally show toast

}

12. And also i am giving shake animation and fragment animation and for that we need to create new directory under res directory naming anim and under this directory create animation files. Below are certain animations that i am going to use in this app:

Left Enter Animation

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >      <translate
        android:duration="300"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />  </set>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:shareInterpolator="false" >

<translate

android:duration="300"

android:fromXDelta="-100%"

android:fromYDelta="0%"

android:toXDelta="0%"

android:toYDelta="0%" />

</set>

Left Exit Animation

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"> <translate
android:fromXDelta="0%" android:toXDelta="-100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="300"/> </set>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:shareInterpolator="false">

<translate

android:fromXDelta="0%" android:toXDelta="-100%"

android:fromYDelta="0%" android:toYDelta="0%"

android:duration="300"/>

</set>

Right Enter Animation

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">   <translate
     android:fromXDelta="100%" android:toXDelta="0%"
     android:fromYDelta="0%" android:toYDelta="0%"
     android:duration="300" /> </set>

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

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:shareInterpolator="false">

<translate

android:fromXDelta="100%" android:toXDelta="0%"

android:fromYDelta="0%" android:toYDelta="0%"

android:duration="300" />

</set>

Right Exit Animation

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" >      <translate
        android:duration="300"
        android:fromXDelta="0"
        android:toXDelta="100%p" />       </set>

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

<translate

android:duration="300"

android:fromXDelta="0"

android:toXDelta="100%p" />

</set>

Cycle Animation

<cycleinterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:cycles="4" />

1 2	<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:cycles="4" />

Shake Animation (x-axis)

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0" android:toXDelta="10" android:duration="1000"
    android:interpolator="@anim/cycle" />

<translate xmlns:android="http://schemas.android.com/apk/res/android"

android:fromXDelta="0" android:toXDelta="10" android:duration="1000"

android:interpolator="@anim/cycle" />

You can learn how to use Animation in android from upcoming Animation Tutorials. We will use all above animations in our app. 13. Now create a java class for Login naming Login_Fragment.java and add the following code.

package com.login_signup_screendesign_demo;  import java.util.regex.Matcher; import java.util.regex.Pattern;  import com.login_signup_screendesign_demo.R;  import android.content.res.ColorStateList; import android.content.res.XmlResourceParser; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.text.InputType; import android.text.method.HideReturnsTransformationMethod; import android.text.method.PasswordTransformationMethod; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.Toast; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.EditText; import android.widget.LinearLayout; import android.widget.TextView;  public class Login_Fragment extends Fragment implements OnClickListener { 	private static View view;  	private static EditText emailid, password; 	private static Button loginButton; 	private static TextView forgotPassword, signUp; 	private static CheckBox show_hide_password; 	private static LinearLayout loginLayout; 	private static Animation shakeAnimation; 	private static FragmentManager fragmentManager;  	public Login_Fragment() {  	}  	@Override 	public View onCreateView(LayoutInflater inflater, ViewGroup container, 			Bundle savedInstanceState) { 		view = inflater.inflate(R.layout.login_layout, container, false); 		initViews(); 		setListeners(); 		return view; 	}  	// Initiate Views 	private void initViews() { 		fragmentManager = getActivity().getSupportFragmentManager();  		emailid = (EditText) view.findViewById(R.id.login_emailid); 		password = (EditText) view.findViewById(R.id.login_password); 		loginButton = (Button) view.findViewById(R.id.loginBtn); 		forgotPassword = (TextView) view.findViewById(R.id.forgot_password); 		signUp = (TextView) view.findViewById(R.id.createAccount); 		show_hide_password = (CheckBox) view 				.findViewById(R.id.show_hide_password); 		loginLayout = (LinearLayout) view.findViewById(R.id.login_layout);  		// Load ShakeAnimation 		shakeAnimation = AnimationUtils.loadAnimation(getActivity(), 				R.anim.shake);  		// Setting text selector over textviews 		XmlResourceParser xrp = getResources().getXml(R.drawable.text_selector); 		try { 			ColorStateList csl = ColorStateList.createFromXml(getResources(), 					xrp);  			forgotPassword.setTextColor(csl); 			show_hide_password.setTextColor(csl); 			signUp.setTextColor(csl); 		} catch (Exception e) { 		} 	}  	// Set Listeners 	private void setListeners() { 		loginButton.setOnClickListener(this); 		forgotPassword.setOnClickListener(this); 		signUp.setOnClickListener(this);  		// Set check listener over checkbox for showing and hiding password 		show_hide_password 				.setOnCheckedChangeListener(new OnCheckedChangeListener() {  					@Override 					public void onCheckedChanged(CompoundButton button, 							boolean isChecked) {  						// If it is checkec then show password else hide 						// password 						if (isChecked) {  							show_hide_password.setText(R.string.hide_pwd);// change 																			// checkbox 																			// text  							password.setInputType(InputType.TYPE_CLASS_TEXT); 							password.setTransformationMethod(HideReturnsTransformationMethod 									.getInstance());// show password 						} else { 							show_hide_password.setText(R.string.show_pwd);// change 																			// checkbox 																			// text  							password.setInputType(InputType.TYPE_CLASS_TEXT 									| InputType.TYPE_TEXT_VARIATION_PASSWORD); 							password.setTransformationMethod(PasswordTransformationMethod 									.getInstance());// hide password  						}  					} 				}); 	}  	@Override 	public void onClick(View v) { 		switch (v.getId()) { 		case R.id.loginBtn: 			checkValidation(); 			break;  		case R.id.forgot_password:  			// Replace forgot password fragment with animation 			fragmentManager 					.beginTransaction() 					.setCustomAnimations(R.anim.right_enter, R.anim.left_out) 					.replace(R.id.frameContainer, 							new ForgotPassword_Fragment(), 							Utils.ForgotPassword_Fragment).commit(); 			break; 		case R.id.createAccount:  			// Replace signup frgament with animation 			fragmentManager 					.beginTransaction() 					.setCustomAnimations(R.anim.right_enter, R.anim.left_out) 					.replace(R.id.frameContainer, new SignUp_Fragment(), 							Utils.SignUp_Fragment).commit(); 			break; 		}  	}  	// Check Validation before login 	private void checkValidation() { 		// Get email id and password 		String getEmailId = emailid.getText().toString(); 		String getPassword = password.getText().toString();  		// Check patter for email id 		Pattern p = Pattern.compile(Utils.regEx);  		Matcher m = p.matcher(getEmailId);  		// Check for both field is empty or not 		if (getEmailId.equals("") || getEmailId.length() == 0 				|| getPassword.equals("") || getPassword.length() == 0) { 			loginLayout.startAnimation(shakeAnimation); 			new CustomToast().Show_Toast(getActivity(), view, 					"Enter both credentials.");  		} 		// Check if email id is valid or not 		else if (!m.find()) 			new CustomToast().Show_Toast(getActivity(), view, 					"Your Email Id is Invalid."); 		// Else do login and do your stuff 		else 			Toast.makeText(getActivity(), "Do Login.", Toast.LENGTH_SHORT) 					.show();  	} }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

package com.login_signup_screendesign_demo;

import java.util.regex.Matcher;

import java.util.regex.Pattern;

import com.login_signup_screendesign_demo.R;

import android.content.res.ColorStateList;

import android.content.res.XmlResourceParser;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.text.InputType;

import android.text.method.HideReturnsTransformationMethod;

import android.text.method.PasswordTransformationMethod;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.CompoundButton;

import android.widget.Toast;

import android.widget.CompoundButton.OnCheckedChangeListener;

import android.widget.EditText;

import android.widget.LinearLayout;

import android.widget.TextView;

public class Login_Fragment extends Fragment implements OnClickListener {

private static View view;

private static EditText emailid, password;

private static Button loginButton;

private static TextView forgotPassword, signUp;

private static CheckBox show_hide_password;

private static LinearLayout loginLayout;

private static Animation shakeAnimation;

private static FragmentManager fragmentManager;

public Login_Fragment() {

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

view = inflater.inflate(R.layout.login_layout, container, false);

initViews();

setListeners();

return view;

}

// Initiate Views

private void initViews() {

fragmentManager = getActivity().getSupportFragmentManager();

emailid = (EditText) view.findViewById(R.id.login_emailid);

password = (EditText) view.findViewById(R.id.login_password);

loginButton = (Button) view.findViewById(R.id.loginBtn);

forgotPassword = (TextView) view.findViewById(R.id.forgot_password);

signUp = (TextView) view.findViewById(R.id.createAccount);

show_hide_password = (CheckBox) view

.findViewById(R.id.show_hide_password);

loginLayout = (LinearLayout) view.findViewById(R.id.login_layout);

// Load ShakeAnimation

shakeAnimation = AnimationUtils.loadAnimation(getActivity(),

R.anim.shake);

// Setting text selector over textviews

XmlResourceParser xrp = getResources().getXml(R.drawable.text_selector);

try {

ColorStateList csl = ColorStateList.createFromXml(getResources(),

xrp);

forgotPassword.setTextColor(csl);

show_hide_password.setTextColor(csl);

signUp.setTextColor(csl);

} catch (Exception e) {

}

// Set Listeners

private void setListeners() {

loginButton.setOnClickListener(this);

forgotPassword.setOnClickListener(this);

signUp.setOnClickListener(this);

// Set check listener over checkbox for showing and hiding password

show_hide_password

.setOnCheckedChangeListener(new OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton button,

boolean isChecked) {

// If it is checkec then show password else hide

// password

if (isChecked) {

show_hide_password.setText(R.string.hide_pwd);// change

// checkbox

// text

password.setInputType(InputType.TYPE_CLASS_TEXT);

password.setTransformationMethod(HideReturnsTransformationMethod

.getInstance());// show password

} else {

show_hide_password.setText(R.string.show_pwd);// change

// checkbox

// text

password.setInputType(InputType.TYPE_CLASS_TEXT

| InputType.TYPE_TEXT_VARIATION_PASSWORD);

password.setTransformationMethod(PasswordTransformationMethod

.getInstance());// hide password

}

});

}

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.loginBtn:

checkValidation();

break;

case R.id.forgot_password:

// Replace forgot password fragment with animation

fragmentManager

.beginTransaction()

.setCustomAnimations(R.anim.right_enter, R.anim.left_out)

.replace(R.id.frameContainer,

new ForgotPassword_Fragment(),

Utils.ForgotPassword_Fragment).commit();

break;

case R.id.createAccount:

// Replace signup frgament with animation

fragmentManager

.beginTransaction()

.setCustomAnimations(R.anim.right_enter, R.anim.left_out)

.replace(R.id.frameContainer, new SignUp_Fragment(),

Utils.SignUp_Fragment).commit();

break;

}

// Check Validation before login

private void checkValidation() {

// Get email id and password

String getEmailId = emailid.getText().toString();

String getPassword = password.getText().toString();

// Check patter for email id

Pattern p = Pattern.compile(Utils.regEx);

Matcher m = p.matcher(getEmailId);

// Check for both field is empty or not

if (getEmailId.equals("") || getEmailId.length() == 0

|| getPassword.equals("") || getPassword.length() == 0) {

loginLayout.startAnimation(shakeAnimation);

new CustomToast().Show_Toast(getActivity(), view,

"Enter both credentials.");

}

// Check if email id is valid or not

else if (!m.find())

new CustomToast().Show_Toast(getActivity(), view,

"Your Email Id is Invalid.");

// Else do login and do your stuff

else

Toast.makeText(getActivity(), "Do Login.", Toast.LENGTH_SHORT)

.show();

}

14. Now create a java class for SignUp naming SignUp_Fragment.java and add the following code.

package com.login_signup_screendesign_demo;  import java.util.regex.Matcher; import java.util.regex.Pattern;  import com.login_signup_screendesign_demo.R;  import android.content.res.ColorStateList; import android.content.res.XmlResourceParser; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; import android.widget.CheckBox; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast;  public class SignUp_Fragment extends Fragment implements OnClickListener { 	private static View view; 	private static EditText fullName, emailId, mobileNumber, location, 			password, confirmPassword; 	private static TextView login; 	private static Button signUpButton; 	private static CheckBox terms_conditions;  	public SignUp_Fragment() {  	}  	@Override 	public View onCreateView(LayoutInflater inflater, ViewGroup container, 			Bundle savedInstanceState) { 		view = inflater.inflate(R.layout.signup_layout, container, false); 		initViews(); 		setListeners(); 		return view; 	}  	// Initialize all views 	private void initViews() { 		fullName = (EditText) view.findViewById(R.id.fullName); 		emailId = (EditText) view.findViewById(R.id.userEmailId); 		mobileNumber = (EditText) view.findViewById(R.id.mobileNumber); 		location = (EditText) view.findViewById(R.id.location); 		password = (EditText) view.findViewById(R.id.password); 		confirmPassword = (EditText) view.findViewById(R.id.confirmPassword); 		signUpButton = (Button) view.findViewById(R.id.signUpBtn); 		login = (TextView) view.findViewById(R.id.already_user); 		terms_conditions = (CheckBox) view.findViewById(R.id.terms_conditions);  		// Setting text selector over textviews 		XmlResourceParser xrp = getResources().getXml(R.drawable.text_selector); 		try { 			ColorStateList csl = ColorStateList.createFromXml(getResources(), 					xrp);  			login.setTextColor(csl); 			terms_conditions.setTextColor(csl); 		} catch (Exception e) { 		} 	}  	// Set Listeners 	private void setListeners() { 		signUpButton.setOnClickListener(this); 		login.setOnClickListener(this); 	}  	@Override 	public void onClick(View v) { 		switch (v.getId()) { 		case R.id.signUpBtn:  			// Call checkValidation method 			checkValidation(); 			break;  		case R.id.already_user:  			// Replace login fragment 			new MainActivity().replaceLoginFragment(); 			break; 		}  	}  	// Check Validation Method 	private void checkValidation() {  		// Get all edittext texts 		String getFullName = fullName.getText().toString(); 		String getEmailId = emailId.getText().toString(); 		String getMobileNumber = mobileNumber.getText().toString(); 		String getLocation = location.getText().toString(); 		String getPassword = password.getText().toString(); 		String getConfirmPassword = confirmPassword.getText().toString();  		// Pattern match for email id 		Pattern p = Pattern.compile(Utils.regEx); 		Matcher m = p.matcher(getEmailId);  		// Check if all strings are null or not 		if (getFullName.equals("") || getFullName.length() == 0 				|| getEmailId.equals("") || getEmailId.length() == 0 				|| getMobileNumber.equals("") || getMobileNumber.length() == 0 				|| getLocation.equals("") || getLocation.length() == 0 				|| getPassword.equals("") || getPassword.length() == 0 				|| getConfirmPassword.equals("") 				|| getConfirmPassword.length() == 0)  			new CustomToast().Show_Toast(getActivity(), view, 					"All fields are required.");  		// Check if email id valid or not 		else if (!m.find()) 			new CustomToast().Show_Toast(getActivity(), view, 					"Your Email Id is Invalid.");  		// Check if both password should be equal 		else if (!getConfirmPassword.equals(getPassword)) 			new CustomToast().Show_Toast(getActivity(), view, 					"Both password doesn't match.");  		// Make sure user should check Terms and Conditions checkbox 		else if (!terms_conditions.isChecked()) 			new CustomToast().Show_Toast(getActivity(), view, 					"Please select Terms and Conditions.");  		// Else do signup or do your stuff 		else 			Toast.makeText(getActivity(), "Do SignUp.", Toast.LENGTH_SHORT) 					.show();  	} }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

package com.login_signup_screendesign_demo;

import java.util.regex.Matcher;

import java.util.regex.Pattern;

import com.login_signup_screendesign_demo.R;

import android.content.res.ColorStateList;

import android.content.res.XmlResourceParser;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;

public class SignUp_Fragment extends Fragment implements OnClickListener {

private static View view;

private static EditText fullName, emailId, mobileNumber, location,

password, confirmPassword;

private static TextView login;

private static Button signUpButton;

private static CheckBox terms_conditions;

public SignUp_Fragment() {

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

view = inflater.inflate(R.layout.signup_layout, container, false);

initViews();

setListeners();

return view;

}

// Initialize all views

private void initViews() {

fullName = (EditText) view.findViewById(R.id.fullName);

emailId = (EditText) view.findViewById(R.id.userEmailId);

mobileNumber = (EditText) view.findViewById(R.id.mobileNumber);

location = (EditText) view.findViewById(R.id.location);

password = (EditText) view.findViewById(R.id.password);

confirmPassword = (EditText) view.findViewById(R.id.confirmPassword);

signUpButton = (Button) view.findViewById(R.id.signUpBtn);

terms_conditions = (CheckBox) view.findViewById(R.id.terms_conditions);

// Setting text selector over textviews

XmlResourceParser xrp = getResources().getXml(R.drawable.text_selector);

try {

ColorStateList csl = ColorStateList.createFromXml(getResources(),

xrp);

terms_conditions.setTextColor(csl);

} catch (Exception e) {

}

// Set Listeners

private void setListeners() {

signUpButton.setOnClickListener(this);

}

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.signUpBtn:

// Call checkValidation method

checkValidation();

break;

case R.id.already_user:

// Replace login fragment

new MainActivity().replaceLoginFragment();

break;

}

// Check Validation Method

private void checkValidation() {

// Get all edittext texts

String getFullName = fullName.getText().toString();

String getEmailId = emailId.getText().toString();

String getMobileNumber = mobileNumber.getText().toString();

String getLocation = location.getText().toString();

String getPassword = password.getText().toString();

String getConfirmPassword = confirmPassword.getText().toString();

// Pattern match for email id

Pattern p = Pattern.compile(Utils.regEx);

Matcher m = p.matcher(getEmailId);

// Check if all strings are null or not

if (getFullName.equals("") || getFullName.length() == 0

|| getEmailId.equals("") || getEmailId.length() == 0

|| getMobileNumber.equals("") || getMobileNumber.length() == 0

|| getLocation.equals("") || getLocation.length() == 0

|| getPassword.equals("") || getPassword.length() == 0

|| getConfirmPassword.equals("")

|| getConfirmPassword.length() == 0)

new CustomToast().Show_Toast(getActivity(), view,

"All fields are required.");

// Check if email id valid or not

else if (!m.find())

new CustomToast().Show_Toast(getActivity(), view,

"Your Email Id is Invalid.");

// Check if both password should be equal

else if (!getConfirmPassword.equals(getPassword))

new CustomToast().Show_Toast(getActivity(), view,

"Both password doesn't match.");

// Make sure user should check Terms and Conditions checkbox

else if (!terms_conditions.isChecked())

new CustomToast().Show_Toast(getActivity(), view,

"Please select Terms and Conditions.");

// Else do signup or do your stuff

else

Toast.makeText(getActivity(), "Do SignUp.", Toast.LENGTH_SHORT)

.show();

}

15. Now create a java class for ForgotPassword naming ForgotPassword_Fragment.java and add the following code.

package com.login_signup_screendesign_demo;  import java.util.regex.Matcher; import java.util.regex.Pattern;  import com.login_signup_screendesign_demo.R;  import android.content.res.ColorStateList; import android.content.res.XmlResourceParser; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast;  public class ForgotPassword_Fragment extends Fragment implements 		OnClickListener { 	private static View view;  	private static EditText emailId; 	private static TextView submit, back;  	public ForgotPassword_Fragment() {  	}  	@Override 	public View onCreateView(LayoutInflater inflater, ViewGroup container, 			Bundle savedInstanceState) { 		view = inflater.inflate(R.layout.forgotpassword_layout, container, 				false); 		initViews(); 		setListeners(); 		return view; 	}  	// Initialize the views 	private void initViews() { 		emailId = (EditText) view.findViewById(R.id.registered_emailid); 		submit = (TextView) view.findViewById(R.id.forgot_button); 		back = (TextView) view.findViewById(R.id.backToLoginBtn);  		// Setting text selector over textviews 		XmlResourceParser xrp = getResources().getXml(R.drawable.text_selector); 		try { 			ColorStateList csl = ColorStateList.createFromXml(getResources(), 					xrp);  			back.setTextColor(csl); 			submit.setTextColor(csl);  		} catch (Exception e) { 		}  	}  	// Set Listeners over buttons 	private void setListeners() { 		back.setOnClickListener(this); 		submit.setOnClickListener(this); 	}  	@Override 	public void onClick(View v) { 		switch (v.getId()) { 		case R.id.backToLoginBtn:  			// Replace Login Fragment on Back Presses 			new MainActivity().replaceLoginFragment(); 			break;  		case R.id.forgot_button:  			// Call Submit button task 			submitButtonTask(); 			break;  		}  	}  	private void submitButtonTask() { 		String getEmailId = emailId.getText().toString();  		// Pattern for email id validation 		Pattern p = Pattern.compile(Utils.regEx);  		// Match the pattern 		Matcher m = p.matcher(getEmailId);  		// First check if email id is not null else show error toast 		if (getEmailId.equals("") || getEmailId.length() == 0)  			new CustomToast().Show_Toast(getActivity(), view, 					"Please enter your Email Id.");  		// Check if email id is valid or not 		else if (!m.find()) 			new CustomToast().Show_Toast(getActivity(), view, 					"Your Email Id is Invalid.");  		// Else submit email id and fetch passwod or do your stuff 		else 			Toast.makeText(getActivity(), "Get Forgot Password.", 					Toast.LENGTH_SHORT).show(); 	} }

100

101

102

103

104

105

106

107

108

109

110

111

112

package com.login_signup_screendesign_demo;

import java.util.regex.Matcher;

import java.util.regex.Pattern;

import com.login_signup_screendesign_demo.R;

import android.content.res.ColorStateList;

import android.content.res.XmlResourceParser;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;

public class ForgotPassword_Fragment extends Fragment implements

OnClickListener {

private static View view;

private static EditText emailId;

private static TextView submit, back;

public ForgotPassword_Fragment() {

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

view = inflater.inflate(R.layout.forgotpassword_layout, container,

false);

initViews();

setListeners();

return view;

}

// Initialize the views

private void initViews() {

emailId = (EditText) view.findViewById(R.id.registered_emailid);

submit = (TextView) view.findViewById(R.id.forgot_button);

back = (TextView) view.findViewById(R.id.backToLoginBtn);

// Setting text selector over textviews

XmlResourceParser xrp = getResources().getXml(R.drawable.text_selector);

try {

ColorStateList csl = ColorStateList.createFromXml(getResources(),

xrp);

back.setTextColor(csl);

submit.setTextColor(csl);

} catch (Exception e) {

}

// Set Listeners over buttons

private void setListeners() {

back.setOnClickListener(this);

submit.setOnClickListener(this);

}

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.backToLoginBtn:

// Replace Login Fragment on Back Presses

new MainActivity().replaceLoginFragment();

break;

case R.id.forgot_button:

// Call Submit button task

submitButtonTask();

break;

}

private void submitButtonTask() {

String getEmailId = emailId.getText().toString();

// Pattern for email id validation

Pattern p = Pattern.compile(Utils.regEx);

// Match the pattern

Matcher m = p.matcher(getEmailId);

// First check if email id is not null else show error toast

if (getEmailId.equals("") || getEmailId.length() == 0)

new CustomToast().Show_Toast(getActivity(), view,

"Please enter your Email Id.");

// Check if email id is valid or not

else if (!m.find())

new CustomToast().Show_Toast(getActivity(), view,

"Your Email Id is Invalid.");

// Else submit email id and fetch passwod or do your stuff

else

Toast.makeText(getActivity(), "Get Forgot Password.",

Toast.LENGTH_SHORT).show();

}

16. Finally, run the app and you will get the output as shown in video. You can use this code for your app by making slightly changes or as it is.
Thanks.

Program Nerve

Search This Blog