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:
The icons that i have used in this app you can find them on icons8.com. Here you can find icon for ios, android and windows.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?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> |
3. Open res ⇒ values and create new xml file naming colors.xml for placing all the colors at one place to use it anytime.
1 2 3 4 5 6 7 8 9 10 |
<?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> |
4. Now create activity_main.xml file that contains an ImageView that close activity on press and a FrameLayout for placing fragments.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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> |
1 2 3 4 5 6 7 |
<?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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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:
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
1 2 3 4 5 6 7 |
<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> |
1 2 3 4 5 6 7 8 |
<?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> |
1 2 3 4 5 6 7 8 9 10 11 |
<?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> |
1 2 |
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:cycles="4" /> |
1 2 3 |
<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 this Animation Tutorial. 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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); 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(); } } |
15. Now create a java class for ForgotPassword naming ForgotPassword_Fragment.java and add the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
Subscribe to us and get the latest news.
81 Comments
Ghaliah
Friday, February 12th, 2016i have a problem with the text_selector.xml
it says an expected resource of type xml, i dont know whats the problem.
so, help ASAP
Droid
Monday, February 22nd, 2016Hi Ghaliah,
Sorry for late reply. The above method i used is giving exceptions. So please visit this solution http://stackoverflow.com/questions/1219312/android-selector-text-color. Try this.
Thanks
Yogeshwar
Monday, May 21st, 2018where is that “@drawable/error.xml” file in your project its not there
ishal
Friday, September 30th, 2016it also says do login for that valid email id and pass which i haven’t registered in this signup.. why? and also where we ‘ll get forgot password?
Dr. Droid
Friday, September 30th, 2016Hi Ishal,
This article is about only UI of Login, Signup Screens. Here no coding for registering user or forgot password. The error or message that you are getting to valid email id and password is because i put validation that email id and password should be entered and email should be in proper format.
For proper functionality you have to do server side coding in php, .net or any other then that API you have to integrate with it.
Thanks
ansar abbas
Thursday, April 13th, 2017how i can login and signup activities with MSSQL server and go to user profile after successful login?
Dr. Droid
Friday, April 14th, 2017Hi Ansar Abbas,
I had not done any article on Server Signup and Login for reference you can check this link : https://www.learn2crack.com/2016/04/android-login-registration-php-mysql-server.html
Here you will get what you want.
Thanks
reja
Wednesday, May 10th, 2017Hello Sir,
I added imageview inside login_layout with png image(56,4 kB) then I got some lag with the animation.
How can to solve this ?
This is my imageview content :
Best Regards
Reja
Dr. Droid
Wednesday, May 10th, 2017Hi Reja,
You are putting Image directly to your root layout which is not correct way. Use below method to compress and scale the bitmap:
public static Bitmap convertDrawableIntoBitmap(Context context, int resID, int width, int height) {
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resID);
return Bitmap.createScaledBitmap(bitmap, width, height, true);
}
The above method will return you Bitmap which you have to set to an ImageView.
So if you had taken your root Layout as Linear or Relative inside that use ImageView with full height and pass the Width and Height of you current screen size.
In this way you can avoid animation lag.
Thanks
reja
Wednesday, May 10th, 2017Hello Sir,
Thank you for your help,
Your solution decrease the animation lag, but I feel some animation delay for that animation.
When I’m go to signup_layout more fastest to load than login_layout. Also forgotpassword_layout more fastest to load than login_layout.
How can to solve this ?
Sorry for my bad english before.
Best Regards,
Reja
Dr. Droid
Wednesday, May 10th, 2017Hi Reja,
If you want to delay or make fast your animations then you have to change the duration of the animation which is given in animation xml files with attribute duration. Right now its 300ms duration which you can modify according to your need.
Thanks
reja
Thursday, May 11th, 2017Hello Sir,
Thank you for your solution.
You saved my day..
Best Regards
Reja
adel
Monday, May 22nd, 2017how can i connect this app to my data base ?
Dr. Droid
Tuesday, May 23rd, 2017Hi Adel,
I haven’t done any article on connecting with database. So i am sharing you some another link :
http://www.androidhive.info/2012/01/android-login-and-registration-with-php-mysql-and-sqlite/
The above link will help you fully.
Thanks
Shifath
Saturday, September 7th, 2019Can you say anything about connecting this code with firebase.
Alok Kumar
Tuesday, May 23rd, 2017This is with reference to your url for Login UI, Signup and forgot password UI https://www.androhub.com/login-signup-and-forgot-password-screen-design-android/
Since I’ve been following your tutorial my work is going pretty well, but I’m facing a little bit problem in ForgotPassword.xml as the page is done but whenever I click on the edit text to type the keypad appears resulting in to hiding of my edittexthint due to which I’m unable to see what I’m typing. I’ve followed the same for the xml code but don’t know why it is happening.
This is problem I’m facing, link is given below :
https://drive.google.com/open?id=0B8fdRh5_PUJCYmRERDI0M2ZtN0E
Thank you so much!
Dr. Droid
Wednesday, May 24th, 2017Hi Alok,
You are using custom background to your EditText which causes hiding Hint Text. So remove your custom background and try it will work.
Thanks
Siddhant Raj
Wednesday, May 24th, 2017android:drawableStart=”@drawable/password”
Error showing in drawable paasword in login_layout.xml
Dr. Droid
Thursday, May 25th, 2017Hi Siddhant Raj,
Please check do you have any drawable with name password in drawable folder or not. The error is due to non availability of requested drawable.
Thanks
Shubham Malik
Thursday, June 22nd, 2017My application is showing two errors and I am unable to resolve them.
Application is showing blank screen with the cross mark on top right side
and replaceLoginFragment(); in showing error.
Dr. Droid
Thursday, June 22nd, 2017Hi Shubham,
Can you please share more details :
1. Share your xml file which is showing blank screen with cross mark.
2. Share your Logs to know the actual error coming while replaceLoginFragment().
Thanks
Adeel
Monday, June 26th, 2017Getting an error:
Cannot resolve symbol ‘@anim/cycle’
Cannot resolve symbol ‘R’
Please help!
Dr. Droid
Tuesday, June 27th, 2017Hi Adeel,
You have not created cycle xml under anim directory. So please create an cycle xml which you can get from this article if you will find Cycle Animation. Add the cycle animation and rebuild your project your problem will get resolved.
Thanks
dewi157
Sunday, July 30th, 2017dear Dr.Ddroid..
can u give me a new link to download the souce code? ican’t download the source code. thx
Dr. Droid
Friday, August 11th, 2017Hi Dewi157,
I tried downloading with same link and able to do so. Can you please try again and if still it is not downloading then share your email id so that i will send you code via email.
Thanks
Aakash
Friday, September 1st, 2017Hi Dr.Droid ..
I have tried this example of login . I am finding two errors i.e
1.I am getting a error in java class of Signup_Fragment.java and ForgotPassword_Fragment.java the error is
XmlResourceParser xrp = getResources().getXml(R.drawable.text_selector);– I am getting error for R.drawable.text_selector
2.I cannot find the file name replaceLoginFragment. // Replace Login Fragment on Back Presses
new MainActivity().replaceLoginFragment();
Dr. Droid
Friday, September 1st, 2017Hi Aakash,
Below are the solution for your questions:
1.I am getting a error in java class of Signup_Fragment.java and ForgotPassword_Fragment.java : Remove the line which is creating error because that code is deprecated.
2.I cannot find the file name replaceLoginFragment. // Replace Login Fragment on Back Presses : You need to create the replaceLoginFragment method in your MainActivity. Please check your code again.
Thanks
Aakash
Saturday, September 2nd, 2017Hi Dr.Droid thank you for your support , I have got the output but can you help me out with the email validation which you have provided in Utils.java I was getting error so I have modified it in order to get the output . And also can you help me out connecting with sql server database .
Dr. Droid
Saturday, September 2nd, 2017Hi Aakash,
Can you please tell me what issue or error you are getting for Email validation. Make sure you are importing same Utils.java file.
For connecting with SQL Database i haven’t done any article but there are so many articles over google that you can search. One of the link is below:
https://www.codeproject.com/Articles/800703/Connecting-your-Android-app-to-your-WAMP-server
Thanks
Aakash
Saturday, September 2nd, 2017Dr.Droid,
I am getting in this regular expression “\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b”; , It is giving illegal escape character in string literal near (+\.) and thanks for the database example.
Dr. Droid
Sunday, September 3rd, 2017Hi Aakash,
I don’t know why email regular expression is creating issue in your project. Can you try below provided regular expression and check whether its working or not:
String emailPattern = “[a-zA-Z0-9._-]+@[a-z]+\\.+[a-z]+”;
Thanks
Aakash
Sunday, September 3rd, 2017Dr.Droid ,
It is giving more errors in the expression .No problem I will try it out .but , thanks for your support..
ABDUL BASITH A P
Wednesday, November 1st, 2017sir….you are great…. thanx a lot…
fawad azam
Sunday, December 24th, 2017Error:(140, 38) error: cannot find symbol variable frameContainer ………sir how to fix this.
Dr. Droid
Sunday, December 24th, 2017Hi Fawad,
Please check your code again and see if you have added FrameLayout in your activity_main.xml and give id as frameContainer to it.
You can check point number 4. above.
Thanks
jimmy
Thursday, January 11th, 2018Hi, Great Work, But it is connecting with database or not?
Dr. Droid
Thursday, January 11th, 2018Hi Jimmy,
Unfortunately no. Actually this is just design screens.
Thanks
Shreenag
Tuesday, January 30th, 2018“resource color/colorPrimary (aka com.devilco.myapplication:color/colorPrimary) not found.”
Dr. Droid i’m getting the above error repeatedly please give me a solution
Dr. Droid
Tuesday, January 30th, 2018Hi Shreenag,
Download my source code and go to colors.xml there you will find one colorPrimary copy that color code and paste it into yours then try. It will work.
Thanks
arjun
Friday, February 23rd, 2018the app runs with no error but it doesnt pass the activity_main.xml just shows the green screen
Dr. Droid
Friday, February 23rd, 2018Hi Arjun,
Can you show me your code that you had done so that i can help you better.
Thanks
arjun
Friday, February 23rd, 2018give your mail id please
Dr. Droid
Friday, February 23rd, 2018Hi Arjun,
You can mail me at [email protected].
Thanks
Savio Burrows
Wednesday, July 4th, 2018Hi Sir,
I did all the coding accordingly , but the problem is aftr running the app its just shuts down the app does not open. No error nothing. Why is this happening
Dr. Droid
Wednesday, July 4th, 2018Hi Savio,
That means your app is crashing. Try to check the logs and share with me.
Thanks
Rajat
Thursday, August 9th, 2018Hi Droid,
Can you please share the code of MainActivity.java file please?
Thanks,
Rajat
Dr. Droid
Thursday, August 9th, 2018Hi Rajat,
Download the source code. Everything is inside in that download code.
Thanks
Rajat
Friday, August 10th, 2018Hi Drio,
Initially, it worked to show just green screen with a cross icon on the top right corner but now the application is getting crashed. In the main activity.java, we have the following imports written:
import com.login_signup_screendesign_demo.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.View.OnClickListener;
Is this happening due to the different versions used here v4 and v7? If yes, what change is required to be done to get the app working?
Thank you,
Rajat
Dr. Droid
Friday, August 10th, 2018Hi Rajat,
It seems that your imports are correct. Can you share your logcat so that we can know exact issue.
Thanks
Rajat
Friday, August 10th, 201808-10 10:18:55.416 2652-2652/? I/art: Not late-enabling -Xcheck:jni (already on)
08-10 10:18:55.433 2652-2658/? E/art: Failed sending reply to debugger: Broken pipe
08-10 10:18:55.433 2652-2658/? I/art: Debugger is no longer active
08-10 10:18:55.550 2652-2652/? I/InstantRun: starting instant run server: is main process
08-10 10:18:55.663 2652-2652/? W/art: Before Android 4.1, method android.graphics.PorterDuffColorFilter android.support.graphics.drawable.VectorDrawableCompat.updateTintFilter(android.graphics.PorterDuffColorFilter, android.content.res.ColorStateList, android.graphics.PorterDuff$Mode) would have incorrectly overridden the package-private method in android.graphics.drawable.Drawable
08-10 10:18:55.729 2652-2652/? I/art: Rejecting re-init on previously-failed class java.lang.Class
Rejecting re-init on previously-failed class java.lang.Class
08-10 10:18:55.826 2652-2667/? I/art: Background sticky concurrent mark sweep GC freed 2130(436KB) AllocSpace objects, 0(0B) LOS objects, 26% free, 1439KB/1968KB, paused 7.098ms total 24.455ms
08-10 10:18:55.929 2652-2652/? D/AndroidRuntime: Shutting down VM
——— beginning of crash
08-10 10:18:55.930 2652-2652/? E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.gps.prabodh.gpsdriver, PID: 2652
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.gps.prabodh.gpsdriver/com.gps.prabodh.gpsdriver.MainActivity}: java.lang.RuntimeException: Unknown interpolator name: set
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2298)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360)
at android.app.ActivityThread.access$800(ActivityThread.java:144)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:135)
at android.app.ActivityThread.main(ActivityThread.java:5221)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
Caused by: java.lang.RuntimeException: Unknown interpolator name: set
at android.view.animation.AnimationUtils.createInterpolatorFromXml(AnimationUtils.java:362)
at android.view.animation.AnimationUtils.loadInterpolator(AnimationUtils.java:273)
at android.view.animation.Animation.setInterpolator(Animation.java:391)
at android.view.animation.Animation.(Animation.java:255)
at android.view.animation.TranslateAnimation.(TranslateAnimation.java:54)
at android.view.animation.AnimationUtils.createAnimationFromXml(AnimationUtils.java:124)
at android.view.animation.AnimationUtils.createAnimationFromXml(AnimationUtils.java:116)
at android.view.animation.AnimationUtils.createAnimationFromXml(AnimationUtils.java:93)
at android.view.animation.AnimationUtils.loadAnimation(AnimationUtils.java:74)
at com.gps.prabodh.gpsdriver.Login_Fragment.initViews(Login_Fragment.java:70)
at com.gps.prabodh.gpsdriver.Login_Fragment.onCreateView(Login_Fragment.java:51)
at android.support.v4.app.Fragment.performCreateView(Fragment.java:2435)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460)
at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)
at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:802)
at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625)
at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411)
at android.support.v4.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366)
at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2273)
at android.support.v4.app.FragmentManagerImpl.dispatchStateChange(FragmentManager.java:3273)
at android.support.v4.app.FragmentManagerImpl.dispatchActivityCreated(FragmentManager.java:3229)
at android.support.v4.app.FragmentController.dispatchActivityCreated(FragmentController.java:201)
at android.support.v4.app.FragmentActivity.onStart(FragmentActivity.java:610)
at android.support.v7.app.AppCompatActivity.onStart(AppCompatActivity.java:178)
at android.app.Instrumentation.callActivityOnStart(Instrumentation.java:1220)
at android.app.Activity.performStart(Activity.java:5953)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2261)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360)
at android.app.ActivityThread.access$800(ActivityThread.java:144)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:135)
at android.app.ActivityThread.main(ActivityThread.java:5221)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
08-10 10:19:04.571 2652-2652/? I/Process: Sending signal. PID: 2652 SIG: 9
Dr. Droid
Friday, August 10th, 2018Hi Rajat,
The issue is in your animation you are using some unknown interpolator. Try removing animation or use correct interpolator.
Thanks
Rajat
Friday, August 10th, 2018Below are the comments in ‘Event log’ section?
8/10/2018
5:39 PM Gradle sync started
5:39 PM Project setup started
5:39 PM Gradle sync finished in 2s 459ms (from cached state)
5:41 PM Executing tasks: [clean, :app:assembleDebug]
5:41 PM Gradle build finished in 44s 161ms
5:42 PM * daemon not running; starting now at tcp:5037
5:42 PM * daemon started successfully
5:42 PM Executing tasks: [:app:assembleDebug]
5:42 PM Emulator: audio: Failed to create voice
goldfish_audio_in'
5:42 PM Emulator: qemu-system-x86_64.exe: warning: opening audio input failed
5:42 PM Emulator: audio: Failed to create voice adc’
5:42 PM Gradle build finished in 17s 193ms
5:43 PM Emulator: Process finished with exit code 0
5:43 PM Executing tasks: [clean, :app:generateDebugSources]
5:44 PM Gradle build finished in 12s 242ms
5:44 PM Executing tasks: [clean, :app:assembleDebug]
5:44 PM Gradle build finished in 16s 645ms
5:45 PM Executing tasks: [:app:assembleDebug]
5:45 PM Gradle build finished in 1s 594ms
5:45 PM Build APK(s)
APK(s) generated successfully:
Module ‘app’: locate or analyze the APK.
5:45 PM Executing tasks: [:app:assembleDebug]
5:45 PM Emulator: audio: Failed to create voice
goldfish_audio_in'
5:45 PM Emulator: qemu-system-x86_64.exe: warning: opening audio input failed
5:45 PM Emulator: audio: Failed to create voice adc’
5:45 PM Gradle build finished in 13s 661ms
5:46 PM Emulator: Process finished with exit code 0
5:47 PM Executing tasks: [clean, :app:assembleDebug]
5:47 PM Gradle build finished in 21s 786ms
5:47 PM Executing tasks: [:app:assembleDebug]
5:47 PM Gradle build finished in 1s 976ms
5:48 PM Executing tasks: [:app:assembleDebug]
5:48 PM Emulator: audio: Failed to create voice
goldfish_audio_in'
5:48 PM Emulator: qemu-system-x86_64.exe: warning: opening audio input failed
5:48 PM Emulator: audio: Failed to create voice adc’
5:48 PM Gradle build finished in 13s 506ms
5:49 PM Emulator: Process finished with exit code 0
Thanks,
Rajat
Ishraj khan
Saturday, September 22nd, 2018Hi can you please share this full code in my gmail .
[email protected]
Please
Thanks in advanced
Dr. Droid
Sunday, September 23rd, 2018Hi Ishraj,
You can find source code at the end of the Post.
Thanks
sai
Friday, September 28th, 2018sir this code is stoping the progect
Dr. Droid
Monday, October 8th, 2018Hi Sai,
Can you share the logs so that we get to know what is causing the issue?
Thanks
Yadnika Bhat
Tuesday, October 9th, 2018Hello,
Am getting error in java file regarding package (the very first line )and import.R due to which its showing error in all java files.
Kindly help me .
Thank you
Dr. Droid
Tuesday, October 9th, 2018Hi Yadnika,
Please clean and rebuild your project and replace package name with your one.
Thanks
Yadnika Bhat
Tuesday, October 9th, 2018Hello,
am facing problem with java files the package name error .
Kindly help me.
Suraj Mudgal
Friday, October 26th, 2018error: cannot find symbol variable toast_root
error: cannot find symbol variable toast_error
I am getting above two error so please help me out
Dr. Droid
Friday, October 26th, 2018Hi Suraj,
Please add custom_toast.xml(Step-10) into your layout.
Thanks
Suraj Mudgal
Friday, October 26th, 2018error: cannot find symbol variable toast_root
error: cannot find symbol variable toast_error
I am getting these above two error in CustomToast.java file please help me
Suraj Mudgal
Friday, October 26th, 2018thanks for your reply man
Suraj Mudgal
Saturday, October 27th, 2018I want to go to another navigation drawer activity after login but when i m putting intent where you display toast “do login” it is showing application unfortunately stopped. so please help me Dr. Droid
Dr. Droid
Saturday, October 27th, 2018Hi Suraj,
Can you send me Logcat so that i can check what is causing exception?
Thanks
shashank
Wednesday, November 21st, 2018Great Post Droid, keep Sharing.. 🙂
Sachi
Friday, December 7th, 2018I am getting error of lot of time missing in drawable like below, please help.
Output: D:\My_Projects\Andriod\mobile\src\main\res\layout\activity_main.xml:14: error: resource drawable/close (aka com.example.sachi.helloworld:drawable/close) not found.
D:\My_Projects\Andriod\mobile\src\main\res\layout\signup_layout.xml:18: error: resource drawable/user (aka com.example.sachi.helloworld:drawable/user) not found.
D:\My_Projects\Andriod\mobile\src\main\res\layout\signup_layout.xml:40: error: resource drawable/email (aka com.example.sachi.helloworld:drawable/email) not found.
D:\My_Projects\Andriod\mobile\src\main\res\layout\signup_layout.xml:62: error: resource drawable/phone (aka com.example.sachi.helloworld:drawable/phone) not found.
D:\My_Projects\Andriod\mobile\src\main\res\layout\signup_layout.xml:84: error: resource drawable/location (aka com.example.sachi.helloworld:drawable/location) not found.
D:\My_Projects\Andriod\mobile\src\main\res\layout\signup_layout.xml:106: error: resource drawable/password (aka com.example.sachi.helloworld:drawable/password) not found.
D:\My_Projects\Andriod\mobile\src\main\res\layout\signup_layout.xml:128: error: resource drawable/confirm_password (aka com.example.sachi.helloworld:drawable/confirm_password) not found.
error: failed linking file resources.
Dr. Droid
Friday, December 7th, 2018Hi Sachi,
Please download the source code and inside the source code you will find all drawables. Copy and paste that drawables into your project.
Thanks
Android
Wednesday, March 27th, 2019email
password
“writings”
which is black to make it white ?
Dr. Droid
Friday, March 29th, 2019Hi,
Can you explain in better way as I could not understand what you are trying to say.
Thanks
Ridam Jain
Tuesday, June 25th, 2019Hi Aakash,
I was facing the same email validation issue, I got a solution for you.
public static final String regEx = “\b[A-Za-z0-9._-]+@[a-z]+\\.[A-Za-z]{2,4}\b”;
Try this.
Thanks.
Dr. Droid
Wednesday, June 26th, 2019Hi Ridam,
Check this link : https://stackoverflow.com/questions/12947620/email-address-validation-in-android-on-edittext
Let me know if this helps.
Thanks
Dharma
Saturday, August 24th, 2019Great tutorial …thanks a lot …very useful and easy to follow the step
Shifath
Saturday, September 7th, 2019Hi Dr. Droid
Can you help me integrating firebase with this code.
I’m having so much trouble to integrate firebase.
I’ll be so much grateful if you can.
Shifath
Saturday, September 7th, 2019Can You help me integrating firebase with these code?
Dr. Droid
Monday, September 16th, 2019Hi Shifath,
Please follow this link: https://firebase.google.com/docs/auth.
And let me know if you face any issues.
Thanks
M4xim
Wednesday, February 5th, 2020Hi Dr. Droid
I have been figuring out how to solve these two problems for weeks now….
1) When my login fragment is loaded in my MainActivity and I want to replace it with the register fragment via the replaceLoginFragment() method then it works correctly but when I want to navigate back to the login fragment my app stops working.
2) When I try to tap on one of my EditTexts, it doesn’t focus so that I’m able to write something in the EditText and my keyboard also doesn’t show up. It just looks like it’s just present for nothing and I don’t have interaction with it.
I’m looking forward to hearing from you.
Thanks in advance!
Dr. Droid
Wednesday, February 5th, 2020Hi M4xim,
Can you share your code with me? So that I can check what is the issue.
Thanks
Maxim
Wednesday, February 5th, 2020MainActivity
=============================================
package com.example.fitflex;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity {
private FragmentTransaction ft;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// If savedinstnacestate is null then replace login fragment
if (savedInstanceState == null) {
ft = getSupportFragmentManager().beginTransaction();
ft.add(R.id.frameContainer, new Login_Fragment());
ft.commit();
}
//Onclick sluiticoon om af te sluiten
findViewById(R.id.close_activity).setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View arg0) {
finish();
}
});
}
// Replace Login Fragment with animation
protected void replaceLoginFragment() {
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.setCustomAnimations(R.anim.left_enter, R.anim.right_out);
ft.replace(R.id.frameContainer, new Login_Fragment(), Utils.Login_Fragment);
ft.commit();
}
@Override
public void onBackPressed() {
// Find the tag of signup and forgot password fragment
Fragment Registreer_Fragment = getSupportFragmentManager()
.findFragmentByTag(Utils.Registreer_Fragment);
Fragment WachtwoordVergeten_Fragment = getSupportFragmentManager()
.findFragmentByTag(Utils.WachtwoordVergeten_Fragment);
// Check if both are null or not
// If both are not null then replace login fragment else do backpressed
// task
if (Registreer_Fragment != null)
replaceLoginFragment();
else if (WachtwoordVergeten_Fragment != null)
replaceLoginFragment();
else
super.onBackPressed();
}
}
Login_Fragment
===========================================
package com.example.fitflex;
import android.os.Bundle;
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.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.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class Login_Fragment extends Fragment implements View.OnClickListener {
private View view;
private EditText email, wachtwoord;
private Button loginknop;
private TextView vergetenWachtwoord, maakAccount;
private CheckBox toon_verberg_wachtwoord;
private LinearLayout loginLayout;
private Animation shakeAnimation;
private 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;
}
private void initViews() {
fragmentManager = getActivity().getSupportFragmentManager();
email = view.findViewById(R.id.login_email);
wachtwoord = view.findViewById(R.id.login_wachtwoord);
loginknop = view.findViewById(R.id.loginknop);
vergetenWachtwoord = view.findViewById(R.id.vergetenWachtwoord);
maakAccount = view.findViewById(R.id.maakAccount);
toon_verberg_wachtwoord = view.findViewById(R.id.toon_verberg_wachtwoord);
loginLayout = view.findViewById(R.id.login_layout);
shakeAnimation = AnimationUtils.loadAnimation(getActivity(),
R.anim.shake);
}
private void setListeners() {
loginknop.setOnClickListener(this);
vergetenWachtwoord.setOnClickListener(this);
maakAccount.setOnClickListener(this);
toon_verberg_wachtwoord
.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton button,
boolean isChecked) {
if (isChecked) {
toon_verberg_wachtwoord.setText(R.string.verberg_pwd);
wachtwoord.setInputType(InputType.TYPE_CLASS_TEXT);
wachtwoord.setTransformationMethod(HideReturnsTransformationMethod
.getInstance());
} else {
toon_verberg_wachtwoord.setText(R.string.toon_pwd);
wachtwoord.setInputType(InputType.TYPE_CLASS_TEXT
| InputType.TYPE_TEXT_VARIATION_PASSWORD);
wachtwoord.setTransformationMethod(PasswordTransformationMethod
.getInstance());
}
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.loginknop:
checkValidation();
break;
case R.id.vergetenWachtwoord:
fragmentManager
.beginTransaction()
.setCustomAnimations(R.anim.right_enter, R.anim.left_out)
.replace(R.id.frameContainer,
new WachtwoordVergeten_Fragment()).commit();
break;
case R.id.maakAccount:
fragmentManager
.beginTransaction()
.setCustomAnimations(R.anim.right_enter, R.anim.left_out)
.replace(R.id.frameContainer, new Registreer_Fragment()).commit();
break;
}
}
private void checkValidation() {
String getEmailId = email.getText().toString();
String getPassword = wachtwoord.getText().toString();
Pattern p = Pattern.compile(Utils.regEx);
Matcher m = p.matcher(getEmailId);
if (getEmailId.equals(“”) || getEmailId.length() == 0
|| getPassword.equals(“”) || getPassword.length() == 0) {
loginLayout.startAnimation(shakeAnimation);
new CustomToast().Show_Toast(getActivity(), view,
“Vul beide velden in!”);
}
else if (!m.find())
new CustomToast().Show_Toast(getActivity(), view,
“Dit is geen geldig e-mailadres!”);
else
Toast.makeText(getActivity(), “Do Login.”, Toast.LENGTH_SHORT)
.show();
}
}
Register_Fragment
===============================================
package com.example.fitflex;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
import androidx.fragment.app.Fragment;
import java.lang.reflect.Field;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class Registreer_Fragment extends Fragment implements View.OnClickListener {
private View view;
private EditText naam, email, telefoonnummer, locatie,
wachtwoord, bevestigWachtwoord;
private TextView alGebruiker;
private Button registerknop;
private CheckBox voorwaarden;
public Registreer_Fragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.registreer_layout, container, false);
initViews();
setListeners();
return view;
}
// Initialize all views
private void initViews() {
naam = view.findViewById(R.id.naam);
email = view.findViewById(R.id.email);
telefoonnummer = view.findViewById(R.id.telefoonnummer);
locatie = view.findViewById(R.id.locatie);
wachtwoord = view.findViewById(R.id.wachtwoord);
bevestigWachtwoord = view.findViewById(R.id.bevestigWachtwoord);
registerknop = view.findViewById(R.id.registerknop);
alGebruiker = view.findViewById(R.id.alGebruiker);
voorwaarden = view.findViewById(R.id.voorwaarden);
}
// Set Listeners
private void setListeners() {
registerknop.setOnClickListener(this);
alGebruiker.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.registerknop:
// Call checkValidation method
checkValidation();
break;
case R.id.alGebruiker:
// Replace login fragment
new MainActivity().replaceLoginFragment();
break;
}
}
// Check Validation Method
private void checkValidation() {
// Get all edittext texts
String getFullName = naam.getText().toString();
String getEmailId = email.getText().toString();
String getMobileNumber = telefoonnummer.getText().toString();
String getLocation = locatie.getText().toString();
String getPassword = wachtwoord.getText().toString();
String getConfirmPassword = bevestigWachtwoord.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,
“Vul alle velden in.”);
// Check if email id valid or not
else if (!m.find())
new CustomToast().Show_Toast(getActivity(), view,
“Het e-mailadres is ongeldig.”);
// Check if both password should be equal
else if (!getConfirmPassword.equals(getPassword))
new CustomToast().Show_Toast(getActivity(), view,
“Beide wachtwoorden moeten gelijk zijn.”);
// Make sure user should check Terms and Conditions checkbox
else if (!voorwaarden.isChecked())
new CustomToast().Show_Toast(getActivity(), view,
“Accepteer de algemene voorwaarden.”);
// Else do signup or do your stuff
else
Toast.makeText(getActivity(), “Do SignUp.”, Toast.LENGTH_SHORT)
.show();
}
}
Dr. Droid
Thursday, February 6th, 2020Hi M4xim,
Can you share this code to my Email Id? As it is difficult to go through here.
Thanks
M4xim
Wednesday, February 5th, 2020Hi Dr.Droid
I’m getting the error that my activity has been destroyed when I’m trying to navigate back to the login fragment.
Help me please….