Android #9 - Relative Layout and Layout Introduction with more | Calendar App ( Part 1 )

Hello friends, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know about the Relative Layout, and some of its common properties. This tutorial is also our first step towards creating a calendar apk, which is an indian calendar app, which is normally like a simple calendar, but it contains a list of all holidays in india. you can customize it according to your own needs. So friends, let's begin...

Introduction

Layout

It defines the structure of UI of the app. All elements in the layout is either a view ( android widgets like textview, button etc. with which a user can interacts ) or view group ( invisible container that defines the layout structure for view and any another child view group objects ). Here, "view" is referred to as widgets like textview, button etc. and view groups are referred to as layouts, which contains all the view inside it.

Declaring Layouts

We can assign a layout either by XML or in Runtime Programatically through code. We will know here only of the XML assigning.

XML Assigning

In XML Assigning, there is already a predefined XML Vocabulary for various widgets and layouts also known as view and view groups respectively, which helps to quickly design UI Layouts or the screen elements they contain, in a same way, as we create web pages in HTML with a series of nested elements.
While Assigning, there is must for a layout to contain one root element which can either be a view or view group. Additional layouts or widgets can then be added to the root element as child elements. for e.g., below the root element is the relative layout, and the child elements are the TextView and a Button.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</RelativeLayout>

In the above code, the "xmlns:android" attribute of relative layout is used to get the android vocabulary for views and view groups, which helps to easily write the code, and also to import the android view/view groups library to be shown to the user.
After designing the UI, save the XML file with ".xml" extension in the "res/layout/" directory, and you had created your first layout resource using XML. Now, we can use it in the code for showing it to the user, so that, user can interacts with it.
When we use XML Assigning of layout, it separates UI designing from the code, which reduces the amount of code and improves performance, and it also provides different layouts for different sizes and orientations, which makes it easier for the android to show UI according to various screen sizes. This also improve the app's performance.

Loading UI ( RUNTIME )

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

When the APK is compiled, the XML Layout resource is converted into single view, which we can add to an activity or any view class and it shows it to the user in the runtime.
Normally, this is done in the onCreate() method, which is an important method of an Activity, which calls its function, when there is need to draw the UI. The setContentView() method is used to draw the UI and add it to the activity. The layout which you want to draw as UI, will be written as its parameter.
e.g. :- If the name of the layout, which you want to draw as UI of the activity is activity_main, then "R.layout.activity_main" is the parameter, which is to be assigned to the above method.

Attributes

Every view or view group has its own different supported attribute i.e. a textview has a "textSize" attribute, which will not be used by an ImageView. But, there are some Common attributes for different view or view groups, which are extended by the same view or view groups.
e.g. In TextView, textSize sets the size of the text, and in button, a text is shown, which means that is is extended by the TextView or it is a clickable TextView, and hence, the button will also support the textSize attribute.

Common Attributes

There are some of the attributes, which are common to all the view or view groups, because, it is taken from the root view class like the "ID" Attribute. It also includes the layout parameters like the width and height. We will now know about these in details..

1. "ID" :-

android:id = "@+id/button"
android:id = "@android:id/button"

It is a unique integer associated with any view or view group, which is used by the android to identify any view or view groups. While Assigning, it takes its value as string, which is unique in that layout, which when compiled, converts into an integer value for the android to interpret. It is recommended to always use a unique id of every components within the app either it is in same layout or different layouts if possible. The android prefix is added with ":" to find the "id" attribute from android view i.e. the attribute which is at android level/designed by android itself is accessed by the "android" prefix whereas the attribute, which is at app level/predefined in the app itself is accessed by the "app" prefix.
The "@+id/unique_id" is used to assign a unique id to any layout. In this, "@" means that the XML Parser should parse it and get the unique id from it as string and identify it as ID.
"+" means that, this is a new resource, and must be added to "R.java" class with the unique name, where all the ID is contained. After this, "id/" is used to tell the parser that the string next to this is the unique name, which can be assigned as ID.
In Android, there are some of the predefined ID for the view and view groups provided by android itself like the button of AlertDialog, TextView of toolbar etc. For accessing these view and view groups, id is initialized with the help of "@android:id/". In this "android:" means that, the id will be taken from the "android.R" class, which contains the ID for all the android's predefined views and view group.

2. "layout_width" :-

android:layout_width="wrap_content"
android:layout_width="match_parent"
android:layout_width="10dp"

It sets the width of the views and the view groups. It takes custom value specified in dp, px, in, cm, mm along with two predefined values namely, "wrap_content" and "match_parent". While adding custom values, it is recommended to use dp (density-independent pixels) instead of px or any another units, as it helps the app to automatically resize its views or viewgroups according to different screen sizes.
In the above predefined values, "wrap_content" means that the view or view group will resize itself to the dimensions required by the consent i.e. the width will be just enough to contains the view or view group. Whereas, the "match_parent" means that the width will be as big as its parent layout will allow i.e. If the width of the parent layout is 200dp, then the width of the view or view group will be just 200dp.

3. "layout_height" :-

android:layout_height="wrap_content"
android:layout_height="match_parent"
android:layout_height="10dp"

It sets the height of the view and view group. The value taken by this is same as of the above described attribute. The properties taken by this is also same as of above but the only difference is that, it will be according to height instead of width.

There are some more attributes related to this. We will know about that in the upcoming tutorials. Now, we will know about the Relative layout, which is one of the layouts in android.

Relative Layout

Relative Layout is a type of Layout which displays child views ( android widgets or any another layout ) in relative positions to any another view specified by a unique ID or the relative layout itself i.e. position for each child views is specified relative to any another child view/ child layout ( such as to the left-of, to the right-of, above another view etc. ) or the parent relative layout itself ( such as aligned to the bottom of the layout or top of the layout and so on. ). By default, child views are aligned to top-left of the layout, which can be customized like, as in center, bottom, bottom-left etc. We will know about this in the upcoming tutorials.
It is the best layout for designing UI, as, it eliminates nested layouts ( one or more layout in any parent layout ), which improves the performance of the APK.
e.g. :- A nested Linear layout V/S Relative Layout.

In the above image, first image is of nested Linear layout, while second is of relative layout. In the nested Linear layout, there is one layout inside another linear layout, which causes the android to draw each view one by one which as a result, takes more resources, space, and time, which decreases the app's performance. Whereas, in the relative layout, there is only a single layout, which contains all the child views, hence increases the performance by taking less resources, space and time.

Relative Layout initialization

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/relative_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

The relative layout can be initialized in any XML UI using the following syntax. The xmlns: android attribute is only used when it is the root element, otherwise it is not used.

 #P.I. FACT :- 

1} Defining IDs for the child view or child view groups is important in relative layout, because it will help to position the views and view groups in the layout by positioning it relative to another view and view groups specified by unique ID.

2} If you find yourself using several nested layouts, you may be able to replace it with a single Relative layout.

So friends, that's all for this tutorial. Hope u enjoyed it. If u have any problem/question, then ask me in comment box.

Thanks - 

Programming Infinity ( Samridh Sharma ).