Create the RegisterActivity
To start working on the RegisterActivity, first we have to create it. In the Chapter 1, we have created a package, called “ui”.
Click on this package with right mouse button then
New –> Activity –> Empty Activity
Name the new activity as RegisterActivity. The rest can stay the default. Click “Finish” and Android Studio will generate for us the new activity. When it is finished, then the IDE will open it for us the .kt file. Now we need the .xml file, so in the top tab navigation bar open the activity_register.xml file.
Build up the RegisterActivity’s UI
The default layout after the creation will be again ConstraintLayout. For this UI we will use this ViewGroup again.
The background will be the same, what we have used for the SplashActivity. So if you are a little bit lazy, then you can just copy the ImageView of the background and past it to the register_activity.xml. We will only change the id to “iv_register_background”.
The background of the activity_register.xml
In this layout we will use also 2 GuideLines to align some views. One will be vertical, the other horizontal. Both of them will be positioned using percentage.
The background of the activity_register.xml
Download the assets
For the registration and login activities we gonna use again some special assets, what you can download using this link.
Extract the .ZIP file. There will be some folders. Move them to the “res” folder of your project.
In the extracted folder are some .SVG files also. We will import them later.
The Firebase logo
It’s position on the screen will be centered vertically to the horizontal guideline, and horizontally to the parent view.
We have already talked about all of the attributes in the previous chapter, except the background, what we are going to create now.
Create our own shape
For this attribute we are going to use a shape. Basically our image doesn’t have the white circle under the Firebase’s logo. We will create it manually.
So click with the right mouse button on the “drawable” folder, which is in the “res” folder. Select “New”, then “Drawable ressource file” and name the file as “white_border”. In the generated .xml file copy these few lines.
Note that the file starts with the “<shape/>” tag. This tag allows us to call some other tags. In our case we will use “<stroke/>” and “<size/>” tags. To have this circle shape, we will add the attribute “shape” with the value of “oval”. Then inside of the “size” attribute we gonna define the width and the height of the shape.
The last thing to achive the white ring is the “<stroke/>” attribute. The width will be 18dp, and the color white. The color is defined in the colors.xml. So as a home work, try to create it there. (If you couldn’t make it, then go back to the previous chapter.)
The “Create account” text
The Create account text
Here we don’t have any new things, what about we haven’t talked. The text is stored in the string.xml, the value of size is from the dimen.xml, the color is from the colors.xml.
The text is positioned under the Firebase logo, and centered horizontally.
Add vector assets
We have talked about earlier, that the .svg files will be inserted differently. We will add them as a vector assets. For this click again with the right mouse button on the “drawable” folder, then “New” and from the menu select “Vector asset”.
In the popup window:
- Asset type: Select “Local file (SVG, PSD)
- Name: We gonna name it as “ic_vector_email”
- Path: Choose from the extracted folder the ic_email.svg file
- Size: 20dp X 15.2dp
- Opacity: Leave it on 100%
Click on the “Next”, then on the “Finish” button!
Do the same with the ic_lock.svg and ic_person.svg files!
The TextInputLayout and TextInputEditText
If you are working with EditTexts, then you can use TextInputEditText together with TextInputLayout.
TextInputLayout provides an implementation for Material text fields. Used in conjunction with a TextInputEditText, TextInputLayout makes it easy to include Material text fields in our layouts.
TextInputEditText allows us to use floating labels, custom sized icons, error messages to control the format of the text, character counter, and so on. For more information check out the official page: Text Fields
In the “dependencies” section add this line.
Copy and past this “ext” section at the end of the build.gradle.
After the implementation, click in the top right corner on the “Sync now”. Wait until Android Studio finishes the syncing.
Add the text field to the xml
The Name field
For the registration form we need a name, an email and a password. First we gonna talk about the TextInputLayout of the name.
TextInputLayout of the name
The TextInputLayout of the name will be positioned under the “Create account” text and centered of the parent horizontally with the margin of 16dp (“@dimen/margin_large”).
- errorEnabled: If the value of this attribute is true, then you can show for the user a message if something is wrong with the typed text. We will specify the text later in the RegisterActivity::class.
- hintEnabled: In the xml file we will set it to false and we will add it only in the RegisterActivity::class file. In this case we can avoid the floating label. Because we use an icon at the left side of the field, and it looks a little bit ugly, if the label goes up, when the user starts typing. 🙂
The TextInputEditText will be implemented inside of the TextInputLayout.
- drawableStart: To show an icon in the TextInputEditText, we can use this attribute.
- drawablePadding: This is also an important attribute, if we use an icon. This will set a padding arround an icon. Without the padding, the text of the field will be directly after the icon.
- inputType: The value of this attribute is “text”. It means that the user can type everything.
They were the special properties. About the rest properties we have talked about in the previous lecture. If you don’t remember them, then go back and check them.
The Email and password fields
Email and password fields
Note the inputType‘s of the TextInputEditTexts. For the email we will use “textEmailAddress”. In this case, when the user starts typeing, then the keyboard of the phone will help them to type emails. It means, that it will show you the “@”, the “.com” and so on.
The register button
As you can see our button has rounded corners, a blue color as background and a white text. First try to implement this button by your own, because we have learned already how to implement it.
And the solution…
We gonna define the rounded corners and the blue background as a shape. So click again with the right mouse button on the “drawable” folder, select “New”, then “Drawable ressource file”. Name our new shape as “shape_rounded_lightblue_filled_noborder”. Yes, I know, it is a bit longer name, but it describes what it does.
The color of the text you can set using the “textColor “ attribute and the value gonna be “@color/white”.
The xml code
The register button
The position is also centerd horizontally and vertically it is located under the password’s TextInputLayout.
… “or register with” text
Our app will have a Facebook and a Google registration also. To inform the user about this possiblities, we gonna have a simple TextView under the “Register” button with the text of “or register with”.
Try to implement it agian by your own, and if you are done or you just want to see the solution, then check out the code below.
or login with text
The Facebook and the Google buttons
The next 2 views in the activity_register.xml are the Facebook and the Google buttons. They will be under the “or register with” TextView.
To position them horizontally we are going to use a new way. We can use the attribute of “layout_constraintHorizontal_bias”. To use it, we have to align the view between to objects. In our case we will use the parent view and the vertical guideline, what we have added already.
The Facebook and Google button
Note that the attribute of “layout_constraintHorizontal_bias” has the value of 0.7 and 0.3. These are ratios. The 0 is always the left side, the 1 is the right side of the distance between the 2 views. In case of vertical position, the 0 gonna be the top, the 1 value the bottom of the view.
The “Already have an account” text
The last object of our registration form gonna be the “Already have an account? Login” TextView. This will be under the Facebook and Google buttons. It doesn’t matter to which view we position the TextView, the result will be the same.
In the string.xml file we can implement HTML tags, directly between the characters. So open the string.xml file and paste there this line.
HTML code in string.xml
When the user taps on the “Register” button, then a Progressbar will be visible, and this will be shown when the UI is blocked because of a long running task on the main thread.
The Progressbar won’t be constraint to the other views, only to the parent.
Build up the LoginActivity’s UI
I would like to give you again an excersize.
Try to build up the LoginActivity by your own.
First, if you couldn’t build it up, then check back this tutorial.
Second, if you still couldn’t finish it, check out the source code below.
The source code available on GitHub
I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂