Android Codingprogrammingtechnology

Android Coding: UI Layouts

The basic building block in the User Interface (UI) of an application is a View. A view occupies a rectangular area on a mobile screen. 

A ViewGroup is a special view that holds other views. Sub-classes or children of a ViewGroup are layouts.

These layouts design and guide the positioning of various view groups in an application.

A layout defines the structure for a user interface in an app, such as in an activity. We build all elements in the layout using a hierarchy of View and ViewGroup objects. A View usually draws something the user can see and interact with. Whereas a ViewGroup is an invisible container that defines the layout structure for View and other ViewGroup objects,

The View objects are “widgets” and are of many subclasses, such as Button or TextView. The ViewGroup objects are “layouts”. They are of many types that provide a different layout structure, such as Linear Layout,  Constraint Layout, etc.

Declaring a layout

We can declare a layout in two ways:

  1. Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts. Android Studio’s Layout Editor can be used to build your XML layout using a drag-and-drop interface.
  2. Instantiate layout elements at runtime. Your app can create View and ViewGroup objects (and manipulate their properties) programmatically.

Android UI Layout Types

We have a different type of layouts available in android to implement a user interface for our android applications with different designs based on our requirements:

  • Linear Layout is a ViewGroup subclass that renders all child View instances one by one either in a horizontal direction or vertical direction based on the orientation property.
  • Relative Layout is a ViewGroup that specifies the position of child View instances relative to each other (Child A to the left of Child B) or relative to the parent (Aligned to the top of a parent).
  • Frame Layout is a ViewGroup subclass which is used to specify the position of View instances it contains on the top of each other to display only a single View inside the Frame Layout.
  • Table Layout is a ViewGroup subclass which is used to display the child View elements in rows and columns.
  • Web View is a browser that is used to display the web pages as a part of our activity layout.
  • List View is a ViewGroup which is used to display a scrollable single column list of items.
  • Grid View is a ViewGroup that is used to display items in a scrollable grid of columns and rows.

Android UI Layout Attributes

The following are some common layout attributes in android applications:

android:id

This attribute helps to uniquely identify the view and ViewGroups.

android:layout_width

This defines the width for View and ViewGroup elements in a layout

android:layout_height

It defines the height for View and ViewGroup elements in a layout.

android:layout_marginLeft

This attribute defines the extra space in the left side for View and ViewGroup elements in a layout.

android:layout_marginRight

This works to define the extra space on the right side for View and ViewGroup elements in layout.

android:layout_marginTop

With this, we can define the extra space on top for View and ViewGroup elements in layout.

android:layout_marginBottom

Here, this attribute defines extra space in the bottom side for View and ViewGroup elements in a layout.

android:paddingLeft

It works to define the left side padding for View and ViewGroup elements in layout files.

android:paddingRight

This helps to define the right side padding for View and ViewGroup elements in layout files

android:paddingTop

It defines padding for View and ViewGroup elements in layout files on the top side.

android:paddingBottom

With this, we can define the bottom side padding for View and ViewGroup elements in layout files.

Android:layout_gravity

It defines the positions of child Views.

What's your reaction?

Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0

Leave a reply

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

Next Article:

0 %