In this chapter of the Firebase authentication tutorial we will build up the user interface of the SpalshActivity using ConstraintLayout.
For all UIs we gonna use ConstraintLayout. It is an android.view.ViewGroup which allows us to position and size widgets in a flexible way.
ConstraintLayout allows us to create large and complex layouts with a flat view hierarchy (no nested view groups). It is similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it’s more flexible than RelativeLayout and easier to use with Android Studio’s Layout Editor.
ConstraintLayout, which is now the default layout in Android Studio, gives us many ways to place objects. We can constrain them to their container, to each other or to guidelines. This allows us to create large, complex, dynamic and responsive views in a flat hierarchy. It even supports animations!
Step 1 – Create new project
Before we start building up the user interfaces, we have to create a 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”. If you were good, then 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.
The minimum of the API level can be lower as well, because we won’t use any speciel library here. Under the dropdown list you can see on how many device can run your app with this API level.
There is a link, called “Help me choose”. If you click on it, then in a colorful figure will show you the different Android versions and there imported innovations.
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. For now you can close both of them.
Step 2 – SplashActivity
Create the “ui” package
The next is to create a new empty activity. To do this click on the package name, where the MainActivity.kt file is located.
First we will create a new package for the user interfaces. So click on the package with the right button of your mouse, select “New”, then “Package”. Name it as “ui”.
Now click on the MainActivity.kt file, what is located under the fresh created “ui” package, hold the mouse button on it, and drag it into this folder.
As you could figure out, all of the UI related content will be created in this folder.
Create the SplashActivity::class
What could be the next step? Yes, of course, we are going to create the SplashActivity::class. So click on the “ui” package with the right button of your mouse, select “New”, then “Activity”, then “Empty Activity”.
In the popup window name the activity as SplashActivity. This activity will be the laucher activity. So just check in the “Launcher Activity” checkbox.
If you’re done, click an the “Finish” button.
Before we start, download this .ZIP file. This file contains all of the images, what we will use for this layout.
Extract it to the project files. Open the project in the file explorer. Navigate to the “res” folder.
Build up the UI
After the creation of the new activity, Android Studio will open it for us. For now we need only the XML file, so you can close the Kotlin file for now.
If the design view is open as the editor surface of the XML, then open the text editor. They are available at the top right corner from Android Studio v3.6.
The XML contains only an empty ConstraintLayout with “match_parent” width and hight. We will leave them as they are.
First we are going to add the background. For this we will use a simple ImageView, and the width and the height will be again match_parent, because we want to fill out the whole screen.
To add image to the ImageView we can use the “src” attribute, meaning source. Previously we have added the assets to the project, so we can refer to the background image with this expression:
Currently we are in the text view in Android Studio. Here we have also the possibility to see the result of the XML code. So just click on the middle button from the 3 buttons, which are in the top right corner.
In the next step we are going to define 2 guidelines and we will align the logo of this website using this guidelines.
Personally, I define the guidelines at the beginning of the xml code, because they are used by other views also.
Define them before the ImageView of the background.
The two guidelines
Check out the “layout_constraintGuide_percent” attribute. It means, that it’s value will be defined using percentage and from the left side of the screen in case of a horizontal guideline. If it were a vertical line, then from the top of the screen. This attribute will give the value of the distance also.
There you should see at the top of the preview 2 percentage icons. They shows that we have there 2 guidelines, which are defined using percentage.
To position the logo, we gonna use one more guideline, but in this case it will be horizontally defined. This goes after the previous 2 guidelines.
The horizontal guideline
The logo of the website
After the definition of the guidelines we can add easily the logo of the website. For this we will use again an ImageView.
The ImageView of the website logo
Look at these properties:
- layout_width=“0dp”: The width in our case will be 0dp. Because we align the image using the 2 vertical guidelines. We don’t need to specify this value.
- scaleType=“fitCenter”: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside the given space for the ImageView. At least one axis (X or Y) will fit exactly. The result is centered inside the ImageView.
- layout_constraintLeft_toLeftOf=“@+id/guideline_vertical_left”: This attribute will align the left of the ImageView to the left vertical guideline.
- app:layout_constraintRight_toRightOf=“@+id/guideline_vertical_right”: This attribute will align the right of the ImageView to the right vertical guideline.
- app:layout_constraintTop_toTopOf=“@+id/guideline_horizontal” and app:layout_constraintBottom_toBottomOf=“@+id/guideline_horizontal”: Using these 2 attributes ensure for us to have a vertically centered ImageView, where in the center is the horizontal guideline.
Before the implementation of the next views, we gonna create a new xml file. In this file we will store the dimens of the views.
Click in the “res” folder with the right mouse button on the “values” folder. There select “New” and “Values ressource file”.
In the popup window give for it the name “dimen”. The rest can be the default values. Click on the “OK” button.
Andriod Studio will open again for us the fresh created file. So just past this lines into it.
During the creation of the XML layout files, we gonna use these dimens to align or to set the sizes of the views.
The text of the website
Under the logo will be the title of this website.
The text of the website
Again check out these attributes
- android:layout_width=“wrap_content” and android:layout_height=“wrap_content”: Will be the size of the TextView and it won’t fit to the parent view.
- android:layout_marginTop=“@dimen/margin_medium”: It sets a distance between the TextView and the view, which is aligned above of it.
- android:gravity=“center”: Sets the text alignment to the center of the TextView.
- android:text=“@string/site_title”: The practice is to store all of the texts inside of the string.xml file. In case, if you have more supported languages inside your app, then at the creation of the application it will check what is the language of your phone. If you hard code the texts, and the language will be changed, then this text will remain still the same. So open the string.xml file from the res/values folder. Create a new line with the name of “site_title” and the text for it will be “Inspire Coding”.
- android:textColor=“@color/white”: The logic here will be the same. Open again from the res/values folder the colors.xml file. Create a new line with the name “white”, and with the value “#F5F8FA”
- android:textSize=“@dimen/textsize_4xlarge”: This attribute will set the size of the text. Inside of the dimen.xml file, we have a value for text sizes as well. These attributes has the “sp” unit instead of “dp”. “sp” is used always for scaling the texts and it means scale independent pixel.
- app:layout_constraintLeft_toLeftOf=“parent” and app:layout_constraintRight_toRightOf=“parent”: To position a view in the center of the parent view, you can do it by setting the left and right or the top and the bottom constraint to the parent.
- app:layout_constraintTop_toBottomOf=“@+id/iv_splashScreen_inspirecoding_logo”: as we have talked about already, this view goes under the ImageView of the logo.
The logo of Android and Koltin
Under the title of the website will be two more ImageViews for the Android and Kotlin logos.
- app:layout_constraintTop_toBottomOf=”@+id/iv_splashScreen_inspirecoding_text”: The top of these views gonna be aligned to the “Inspire Coding” text.
- app:layout_constraintLeft_toLeftOf=“@+id/guideline_vertical_left” and app:layout_constraintRight_toRightOf=“@+id/guideline_vertical_right”: The left side of the Android logo will be aligned to the left guideline. Similary, the right guideline will be at the right side of the Kotlin logo.
The title of the tutorial
Our layout is almost finished. The last thing what we will implement, is the title of this tutorial. This text goes under the previous views and will be aligned to the Kotlin logo.
You can align it to the Android logo as well. The result will be the same. 🙂
The title of the tutorial
As a home work, try to create a new string for this text and also a new color with the value of “#FFBD2A”.
Note that the title of the tutorial has a line break. In Android you can implement it directly in the string.xml file.
To add the line break to our strings, we have to add this line at the top of the string.xml file, before the <resources> tag.
<?xml version=“1.0” encoding=“utf-8”?>
Next define the text.
Between the “Firebase” and the “authentication” word there is an escape sequence. The “\n” will break the line.
I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂