In the very last chapter we were talking about ConstraintLayout a little bit deeper and we have prepared the user interface of the SplashActivity. In this chapter of the Firebase authentication tutorial we are going to build up the UI of the register and the login screens.
To start working on the RegisterActivity, first we have to create it. In the previous lesson, 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.
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
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.
In case of the Firebase’s logo we gonna use an image, what is also located in the “res” folder.
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.
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.)
Now if you go back to the “activity_register.xml”, then there you should see the white ring around the Firebase logo.
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.
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:
Click on the “Next”, then on the “Finish” button!
Do the same with the ic_lock.svg and ic_person.svg files!
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
Before we start to implement the text fields, we have to implement the dependency for it. So open from the left “Project” menu the Gradle Script in Android view, and there open the build.gradle (Module app).
In the “dependencies” section add this line.
Add this dependency
Now open the Project build.gradle. We gonna declare there the versions for the dependencies.
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.
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”).
The TextInputEditText will be implemented inside of the TextInputLayout.
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.
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.
In case of the “password” the characters will be hidden. At the right side of this field, there will be an eye icon. If the user taps on it, then the password will be visible or unvisible again.
If you implemented correctly the fields, the “Create account” text, and the Firebase logo, then the user interface should look like this.
After the implementation of the TextInputLayouts we are going talk about 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.
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 register button
The position is also centerd horizontally and vertically it is located under the password’s TextInputLayout.
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.
The “or register with” text
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 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.
The more important part is the color. For the TextView we will get the string again from the string.xml file, but note that the “Login” word is bold, and the color is orange.
In the string.xml file we can implement HTML tags, directly between the characters. So open thestring.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.
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.
I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂
Subscribe to receive exclusive content and notifications