Android Programming: The Relative Layout

android relativelayoutA layout is the first and most important part of an android application. It is mandatory for every developer to understand the basic fundamentals of the layouts specified in android development, because it makes the application more user-friendly and easy to use. Before learning more advanced Android programming, you need to have a good knowledge of layouts. A layout in an application is the visual part i.e. it defines how different types of views are aligned on the screen. It’s generally the first part of design phase. Any design phase begins with the layout entry and all the views are placed inside it. Developers can code user interfaces in XML. Different layouts are used efficiently to organize user interface controls and widgets. A relative layout is a basic layout, which is used for designing the user interface. The developer can use a relative layout to his advantage to make sleek mobile designs.

Learn more about Android programming and design at Udemy.com

What is a Relative Layout?

A layout where the child elements are defined in relation to the parent layout or to each other is known as a relative layout. These layouts are used mostly by Android developers to make a smooth and intuitive interface. It’s used mostly in combination with other layouts to get the best design result. These layouts give the best result in applications which have intense use of view objects on the screen. In addition, it’s an extremely flexible layout. The flexibility is associated with the way the views get adjusted on screen. As we know, the Android platform is used on devices with different screen sizes, and at times, it becomes difficult to set the exact position of the views on the basis of screen size. Thus, a relative layout can be used to overcome the problem of variable screen sizes. The values specified at the time of the declaration of the views relative with the screen size resolution prevents overlapping and distortion. One thing to note about this layout is that we cannot have circular dependencies between children and the relative layout’s size. For example, attributes like wrap-content and align_parent_bottom for child cannot be used at the same time.

Syntax:

<RelativeLayout      >

<RelativeLayout/>

What is RelativeLayoutParams?

Layout Params mainly tell the application’s parent view about how it will be adjusted on the screen. The basic LayoutParams class defines the view’s height and width i.e. the size of the layout covered on the screen. These dimensions are separated every time we use the layout.

There are two LayoutParams used in linear layout:

Margin layout params perform spacing with respect to the view from the layout boundaries. It generally separates the views from getting overlapped. A simple approach is to keep the views within the layout more presentable. Some fields are:

Leftmargin

BottomMargin

RightMargin

TopMargin

 

Base LayoutParams mainly deals with the size or the part of the screen covered in height and width by the layout. The parameters are:

Fill_parent :The view will be of the size of the parent

Wrap_content: The view will be big enough to include the content plus the padding.

Some Important Attributes of Relative Layout

Layout_above: This places the bottom edge of the view above the mentioned view ID.

Layout_below: This places the top edge of the view below a mentioned view ID.

Layout_alignbelow: This places the top edge of the view below the mentioned view id.

Layout_alignleft:  This places the left edge of a view in a manner where it matches the mentioned ID’s left edge.

Layout_alignRight:  This places the right edge of a view in a manner where it matches the mentioned ID’s right edge.

Layout_alignTop:  This places the top edge of a view in a manner where it matches the mentioned ID’s top edge.

Layout_centerInParent: It holds the Boolean value i.e. “True” or “False”. If true centers the child both vertically and horizontally, within the parent.

Advantages of Relative Layout

Relative layouts are mostly used to group child views relative to each other. For example, “left of” a control or “right of” of a control.  This is unique from other layouts such as the linear layout, which groups the child in horizontal and vertical manner only.

Understand Android programming from the experts at Udemy.com

Relative layout maintains a flat hierarchy while a Linear Layout is used in case of nesting a view.

The relative layout is used for much complex user interfaces and provides better control in comparison to a linear layout.

Relative layouts are used efficiently in the slide drawers allowing drawers to slide out on any four sides of the screen of a smartphone.

Relative layouts are used with combinations of different layouts to make the space efficient and user friendly.

Relative layout proves to be best when an application is to run both on a tab and mobile phone.

Relative Layout Vertical Example:

<?xml version="1.0" encoding="utf-8"?>

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

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

 

<Button

android:id="@+id/bttn3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Press To Enter"

android:layout_below="@+id/btnButton1"/>

 

<TextView

android:id="@+id/tView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/bttn3"

android:layout_marginTop="94dp"

android:text="User :"

android:textAppearance="?android:attr/textAppearanceLarge" />

 

<EditText

android:id="@+id/eText1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_alignTop="@+id/tView1"

android:layout_toRightOf="@+id/bttn3" />

 

<Button

android:id="@+id/bttnEnter"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_below="@+id/eText1"

android:text="Enter" />

</RelativeLayout>

As mentioned above, the child is relatively adjusted on the screen with the other child elements or parent element in a relative layout. In the example above, the text view field is placed relative to the button. It is assigned with the ‘below align attribute’ of the relative layout with respect to the button. Therefore the edit text is placed just below the button.

The edit text view in this example is relatively aligned to two of the views present on the screen. Top align with respect to the text view present and right align with respect to the button present on the screen. Similarly, last submit button is aligned below the edit text view using the attribute ‘layout_below’.

Relative layouts are best used when used as a single child element or as a combination of child relative positions, as you can see in the example. It is a smarter and better way to align views and it also prevents too much empty space. Efficient use of the screen is possible with this layout. Using relative layout with a linear layout combination is generally the practice of android developers.

Learn more about Android development at Udemy.com