In Mobile App Development
0
11 views

Hola Readers, I think you are a bit confused about developing UI for Android apps by using different layouts…Is it a Yes? Well, a few months back, you could have counted me in the same clan, but now the things are pretty much different.

When now I am learning about the same, I think I can make you get rid of your confusion. With the help of this blog post, I will try to solve almost each and every query of yours related to the development of UI for Android apps. So, let’s dive into this blog to come out of the confusing scenario.

But just wait for a moment…Before going to layouts, you need to have a brief knowledge about View and ViewGroup!

What Is View?

In Android View is a super class that represents the basic building block for UI components. It occupies a rectangular area on the screen which responds to the user actions and handling events in that area. View refers to the android.view.View class, which is the base class for all UI components in android (TextView, EditText, Button, CheckBox, etc.)

What Is ViewGroup?

It is the base class for layouts and other containers. In simple words ViewGroup is an object that surrounds the view and is invisible and is responsible for holding views in a certain fashion.

Let’s Know About Layouts

In Android, the term ‘layout’ refers to describe the visual structure for a user interface. You can specify a layout either programmatically or via an XML layout file. In most cases, it is easy to use an XML layout file, but in some cases, it can be necessary to define the User interface programmatically.

In this post, we are going to discuss the most used layouts in android while creating the user interface of the application.

1. Linear Layout

2. Relative Layout

Linear Layout

In Linear Layout, all the elements are aligned in a single row or a single column based on layout direction with the android:orientation which is an attribute of LinearLayout

Example:

android:orientation=”vertical”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
   <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="TextView"
       android:background="@color/colorAccent"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@color/colorPrimary"
        android:text="button"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Text view"
        android:background="@color/colorPrimaryDark"/>
</LinearLayout>

android:orientation=”horizontal”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="TextView"
       android:background="@color/colorAccent"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text view"
        />
</LinearLayout>

wrap_content: Means take only as much space as needed for content. 

match_parent: It means to take all the available space.

Layout Weight

In android layout weight attribute android:layout_weight assigns the importance value to a view in terms of how much space it should occupy on the screen.

For example, we have two text fields and two buttons in that two of buttons declare a weight of 1 and 2, one text is given a weight of 1, while the other is given no weight (0) (default weight), the remaining space is assigned as follows:

Example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="TextView1"
       android:background="@color/colorAccent"
       android:layout_weight="1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="button1"
        />
 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="button2"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text2"
        />
</LinearLayout>

Text1 gets 1/4 of total available width Android 1st calculates total weight=1+1+2+0=4

Button1 gets 1/4

Button2 gets 2/4 and

Text2 gets 0/4 of remaining width

Layout Gravity

The android:gravity attribute specifies where a view should lie inside its parent,

on both x and y axis

android:orientation=”horizontal”

For a horizontal LinearLayout, layout_gravity values do not change columns

1. android:layout_gravity=”top”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_gravity="top"
        />
</LinearLayout>

2. android:layout_gravity=”center”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_gravity="center"
        />
</LinearLayout>


3. android:layout_gravity=”bottom”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button"
    android:layout_gravity="bottom"
    />
</LinearLayout>

 

4. android:layout_gravity=”center_vertical”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button"
    android:layout_gravity="center_vertical"
    />
</LinearLayout>


android:orientation=”vertical”

For a vertical LinearLayout, layout_gravity values do not change rows.

1. android:layout_gravity=”left

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button"
    android:layout_gravity="left"
    />
</LinearLayout>

2. android:layout_gravity=”right

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button"
    android:layout_gravity="right"
    />
</LinearLayout>

3. android:layout_gravity=”center

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button"
    android:layout_gravity="center"
    />
</LinearLayout>

4. android:layout_gravity=”center_horizontal

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button"
    android:layout_gravity="center_horizontal"
    />
</LinearLayout>

Relative Layout

Relative Layout is very flexible layout used in android for custom layout designing. It displays the child views in relative positions. The position of each view can be specified as relative to sibling elements. Relative Layout is most used layout after Linear Layout in Android. Layout weight and layout gravity do not exist in relative layout.

Relative Layout Positions

1. android:layout_centerInParent:

To place the view in horizontally and vertically center

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_centerInParent="true"/>
</RelativeLayout>
 


2
. android:layout_centerHorizontal:

It centers the child horizontally within its parent.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>
 


3. android:layout_centerVertical:

To place the child vertically center within its parent

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_centerVertical="true"/>
</RelativeLayout>
 

4. android:layout_alignParentTop:

It makes the top edge of this view match the top edge of the parent

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_alignParentTop="true"/>
</RelativeLayout>

5. android:layout_alignParentBottom:

Here the bottom edge of the child view match the bottom edge of the parent.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

6. android:layout_alignParentLeft:

The left edge of the child view matches the left edge of the parent

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_alignParentLeft="true"/>
</RelativeLayout>
 

7. android:layout_alignParentRight:

The child view right edge matches the right edge of the parent

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:layout_alignParentRight="true"/>
</RelativeLayout>
 

Relation Between Two Views

The position of one view is depend on another view by using it’s id we can specify

1. android:layout_below:

Here the position of Button2 depends on the Button1 below by specifying the android:layout_below=”@+id\button1″ in Button2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        android:layout_below="@+id/button1"/>
</RelativeLayout>
 

2. android:layout_above:

The Button2 position is above the position of Button1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        android:layout_centerInParent="true"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        android:layout_above="@+id/button1"
        />
</RelativeLayout>
 

Like wise we have android:layout_alignTop, android:layout_alignBottom, android:layout_alignLeft and android:layout_alignRight.

I hope I am able to filter the clutter of confusion that was building up in your head earlier. For more such updates, stay connected!

Recent Posts
We Are Here to Help!
Name:
Phone:
Email:
Country:
Message:
Captcha:
 

Start typing and press Enter to search