RelativeLayout – Password checker

In this tutorial, we are going to create a sample application, where we are going to practice a bit the RelativeLayout and we will make a password checker app.

The layout will be very fancy, it will follow the nowdays valid design patterns and it will use dark colors. For this we are going to use very few type of user interface elements, eg TextViews, EditTexts.

The new view will the CardView. Since Android 7.0, we can use CardView, which has many cool features. You can create with it rounded corners and shadows based on its elevation. CardView is part of the AndroidX library.

The registration button

The sample app

Our sample project will be a password checker app, what you can use in you own project as well. Nowdays, it is even more important to have higher security, which begins to use secure passwords for your account. Most of the websites and apps require form you to have a minimum length, to have in there at least one uppercase, number and a symbol as well (_.()). This tutorial will be written in Kotlin. In case, if you are looking for the Java version, then you can find it here: uigitdev.com – Pro elements for Android developers So, let’s start coding! 😎

Step 1 – Create new project

Our first step is to create a whole new project. For this, launch Android Studio and create a new project. If you see the “Welcome page” of Android Studio, then click on the “Start a new Android Studio project”. If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.

Here select the “Empty Activity” option. In the next window, we should provide some information about the newly created app. As always, this tutorial will be written in Kotlin. So, select from the dropdown list the Kotlin language. From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough. If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉 When the build has been finished, then you should see the open MainActivity:class and next to this the activity_main.xml files.

Step 2 – Add the needed dependencies

Next step is to enable for the project the dependencies, what we are going to use.

So, to add them to the project, go to the top left corner of Android Studio. There will be the tab called “Project”. Click on it and change the view to Android. Then open the Gradle Scripts menu and double click on the build.gradle (Module: app) file.
Dependencies

In our app, we are going to use two more dependencies. One will provide us the Material design elements from Google, the second one is the above mentioned CardView. So, copy and paste into the dependencies{} section in the  build.gradle (Module: app) file the below lines.


Needed dependencies
The versions
The last step before we can synchronize the app is to define the versions of the above mentioned dependencies. We are going to do it in one place, which is located in the build.gradle (Project: app) file. You can find this file next the build.gradle (Module: app) file.
At the top of the file, inside of the buildscript{} section you should have the version of Kotlin. After it paste the needed versions. After thet the versions should look like below.


The versions
Sync the project

Finally click on the “Sync Now” text, what you can find at the top right corner of Android Studio. This can take some minutes, so be patient. 😊

Step 3 – The ressources

In our app, we are going to use some shapes and new ressources, which are currently not there. In this tutorial, we won’t go into the detailes of these ressources. What we are going to do is just to download them and paste them into the res folder of our project. This ressources file contains

      • A shape, which will be the background of the email and password fields.
      • A checkmark, which will show for the user if the password is contain the needed charachter
      • Some new strings for the form
      • Colors
      • Dimens, which contain the size of the texts, and space between the views
So, using the below link, extract the file into the res folder of your project. Download ressources

Step 4 – Build up the user interface

Next step is to build up the user interface. We are going to separate the views in three parts.

      • The email
      • The password with the conditions
      • The register button

So, open the activity_main.xml file from the res->layout folders.

Position the views

Currently, you should have there a ConstraintLayout as the root ViewGroup, which contains a TextView. Change the ConstraintLayout to a NestedScrollView and add the below two new attributes.

Then, replace the TextView with RelativeLayout. This RelativeLayout won’t have any special attributes, only the width and the height, which will be equal to the parent view. Inside of the RelativeLayout will be a CardView. This CardView will have 300dp width and the height gonna be equal to the parent again. Here, we are going to have this view in the center of the screen. For this, we can use two attributes of the RelativeLayout ViewGroup, which are the layout_centerHorizontal and the layout_centerVertical. These attributes need a Boolean as a value. One more attribute, which will set the background of the CardView, is the app:cardBackgroundColor. As the value we will use a color: “@color/colorFormBackground”, what you can find in the downloaded ressources, there in the colors.xml file. (It is located in the res->values folders.) Inside of this CardView will be one more RelativeLayout. There we won’t define any special attributes, only the size and the top and the bottom padding.

After these definitions, our activity_main.xml file should look like below and at the picture you can see the result in design mode.

Position the views
The email field
The next step is to create the email field. We are going to use here, of course indise of a RelativeLayout, a TextView for the title, then a CardView for the EditText.
Then, again a TextView, which will be visible, when the user clicks on the register button, but the email field is empty. Copy and paste these lines into the RelativeLayout, which is inside of the first CardView.


AndroidManifest.xml

Note two new attributes.

      • The first one is an attribute of the CardView, which is cardElevation. In our case, it is 0dp, but using this attributes you can set the elevation of the CardView.
      • The second is the ellipsize attribute of the error TextView. It means, when there isn’t enough space for the whole text, then the text will be shorten. Eg. you have the text of “Inspire Coding”, then with the value it will look like: “Insp…”
The password field and the conditions

Here, we will have a more complex task, then in case of the email field, because we will have here 4 more lines, which show for the user the correctness of the password.

The password field

This will be very similar to the email field, so just copy after the RelativeLayout of the email field.


The password field
The conditions
Directly after the password field, we will define the conditions. In our app, we will define four requerements about the format of the password.

    • At least 8 characters
    • Minimum one uppercase
    • Minimum one number
    • Minimum one symbol
In case of the conditions, in the xml layout, we won’t have any new attributes. There, we will define first the title of the conditions, which tells for the user that the password must meet the conditions. Thenafter we will define four RelativeLayout, which will define the four conditions. So, paste the below line after the error TextView of the password.


The four conditions for the password
The registration button
The last part of the layout xml file is the registration button, which will be much easier then the previous fields were. The interesting part of the button is, thet we won’t use any Button view here. Instead, we are going to define a CardView which contains a RelativeLayout and there we will have the “Registration” TextView.

The registration button

Step 5 – Build up the code

We have implemented a realy cool layout, but still it isn’t finished yet, because we need to implement some methods in the MainActivity::class as well to have a fully operable password checker in our app.

So, from open the MainActivity.kt file from the left Project tab.
The member variables

First of all, we are going to define some member variables, what we are going to use in the next methods.


Member variables
Init the views

Next, we will init the above mentioned views using the findViewById method. This will ensure for us that all of the views has the find value from the activity_main.xml layout file. For this, we are goin got define a function, after the onCreate() method. So, copy and paste the below lines there.


Init the views

Call this method inside of the onCreate() method.


onCreate() method
Listener of the input change

When the user clicks on the registration button, then we have to check the correctness of the typed email and password. For this reason, we are going to define, after the setType() method, the inputChange() method. So, paste there the below lines.


inputChange()

Note that, when the user starts typeing in the email and password field, the onTextChanged() method will be executed. This will fire up the registrationDataCheck() method. We will call this method from the onCreate() method, so make a call there after the setType() method.


onCreate() method
Check the typed data

So, we know already what the used has typed in. Now, we have to check its correctness. For this, we are going to define the registrationDataCheck() method.


registrationDataCheck()

In this method first, we will save as a string the value of the email’s and password’s EditText. Then, we will check the content of the email using the checkEmpty() method…. we are going to implement it soon. Thenafter one-by-one we will check, if the password meets the four conditions. Note, the Regex call in the if-else statements. It mean, it is a regular expression.

A regular expression is a sequence of characters that define a search pattern. Usually such patterns are used by string searching algorithms for “find” or “find and replace” operations on strings, or for input validation. Source: Wikipedia
When the field meets the conditions, then the checkmarks will be green and the Boolean variables gonna be true, otherwise they will be grey and Boolean variables false.

Check the empty field

This method will be responsible to show for the user the error message, when the fields are empty. Pate it after the registrationDataCheck() method.


checkEmpty()
Check all the data

When everything is filled out correctly, then the registration button will be green and clickable. To check this, we are going to define the checkAllData() method.


checkAllData()
Handle the click

Finally, the last step, which is to handle the click on the registration button. When all of the fields are formally correct, then finally the registration process can be started. In our sample app, we won’t register nowhere, we will show for the user only a Toast a message, thet the registration can be started.


setOnClickRegistration()

Call this method again from the onCreate() method.


onCreate()

Run the app

After this long tutorial, finally we can test the app. So, run it by clicking on the green triangle, what you can find in Android Studio at the top righ corner.

GitHub

The source code is available on GitHub

GitHub

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]

4 thoughts on “RelativeLayout – Password checker”

  1. Hmm is anyone else having problems with
    the pictures on this blog loading? I’m trying to find out if its a problem on my end or if it’s
    the blog. Any feed-back would be greatly appreciated.

  2. This is a really good tip particularly to those new to the blogosphere. Simple but very precise information… Thanks for sharing this one. A must read post!

Leave a Reply

Your email address will not be published. Required fields are marked *