The UI of register and login screens

Reading Time: 9 minutes

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.


The UI of register and login
The UI of register and login

Step 1 – Create the RegisterActivity

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.

Step 2 – 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.

drawHighscoreTitle()

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

The guidelines

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.

Download assets

Extract the .ZIP file. There will be some folders. Move them to the “res” folder of your project.

Project folder
    → app
        → src
            → main
                → res

In the extracted folder are some .SVG files also. We will import them later.

Download the assets

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.


Firebase icon
Firebase icon


Firebase Icon

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.


white_border

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.


Firebase logo with white ring
Firebase logo with white ring

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”.


Create new vector asset
Create new 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 TextInputEditTextTextInputLayout 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

Add dependency

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).


Open Modul Build Gradle
Open Modul Build Gradle

In the “dependencies” section add this line.


Add this dependency


Build gradle module app dependencies
Build gradle module app dependencies

Now open the Project build.gradle. We gonna declare there the versions for the dependencies.


Open Project Build Gradle
Open Project Build Gradle


dependencies' versions

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.

The Name text 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 Name text field


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.


Show / hide password icons
Show / hide password icons

If you implemented correctly the fields, the “Create account” text, and the Firebase logo, then the user interface should look like this.


Firebase register screen
Firebase register screen

The register button

After the implementation of the TextInputLayouts we are going talk about the “Register” button.


Register button
Register button

Exercise

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.

Answer

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.

The “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.


The “or register 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.

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

The Progressbar

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.


Progressbar

Step 3 – Build up the LoginActivity’s UI

Exersize

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.


activity_login.xml

GitHub

The source code is available on GitHub, check it out and download it using the below link.

GitHub – create_app_icon branch

Questions

I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

Follow and like us:

Click to rate this post!
[Total: 0 Average: 0]

stay informed!

Subscribe to receive exclusive content and notifications