Create Signup Screen UI

[safaorhan]

Background

You need to create the UI of a signup screen in order for the users to create accounts before using the app.

The user input needs to be validated on the client-side and also will be validated on the server-side.

The errors yielded from the client-side should be shown by TextInputLayout's built-in error mechanism.

The errors coming from the server-side will be dealt with in a different task.

This task is only for creating Signup Screen UI and adding client-side validations for it.

Todo

• Design the screen using TextInputLayouts and MaterialButtons as shown in the image.
• Add client-side validation to the fields and show related errors on the fields when user clicks SIGN UP button. (See validation table)
• Clicking ALREADY HAVE AN ACCOUNT? button should navigate user to Login Screen.
• Clicking CREATE AN ACCOUNT button on Login Screen should navigate user to Signup Screen.

Validation Table

Field	Rule	Error message
email	must not be empty	Email is required.
	must contain @ and .	Email is invalid.
	must be longer than 5 characters	Email is invalid.
	must be shorter than 50 characters	Email is invalid.
username	must not be empty	Username is required.
	must not consist characters except: a-z, 0-9 and _	Username can only include a-z, 0-9 and _ characters.
	must be longer than 2 characters	Username is too short.
	must be shorter than 20 characters	Username is too long.
password	must not be empty	Password is required.
	must be longer than 7 characters	Password is too short.
	must be shorter than 40 characters	Password is too long.
	must contain at least one digit	Password must contain one digit, one uppercase letter, one lowercase letter and one special character.
	must contain at least one lowercase letter	Password must contain one digit, one uppercase letter, one lowercase letter and one special character.
	must contain at least one uppercase letter	Password must contain one digit, one uppercase letter, one lowercase letter and one special character.
	must contain at least on special character	Password must contain one digit, one uppercase letter, one lowercase letter and one special character.

Resources

• Material Design | Text Fields

• Material Design | Buttons

Acceptance Criteria

• No fragments are allowed, yet.
• The screen consists of 3 TextInputLayouts and 2 Buttons with correct colors and stylings.
• Clicking on SIGN UP button shows correct error messages for all of the fields.
• Password field shows the eye icon to show / hide the password.

Bonus Points

• Validation is done in separate Validator classes and outside the Activity class.
• Code is split into well-readable functions. (DRY principle)