Android Layouts in Kotlin

What is Android View?

A View serves as the user interface responsible for creating interactive UI elements like TextView, ImageView, EditText, RadioButton, etc. It handles event interactions and drawing tasks, commonly referred to as Widgets.

A ViewGroup functions as a fundamental class for both layouts and layout parameters, containing other Views or ViewGroups and specifying layout properties. These are commonly referred to as layouts.

The Android framework offers two approaches to incorporate UI elements or widgets:

1. Utilize UI elements in the XML file.
2. Dynamically create elements in the Kotlin file.

The fundamental unit for constructing a user interface is the View object, instantiated from the View class. It occupies a rectangular space on the screen, managing drawing and event handling. View serves as the base class for widgets, enabling the creation of interactive UI components like buttons and text fields.

A ViewGroup however is a subclass of View, functions as an invisible container holding other Views or ViewGroups while defining their layout properties.

At the third level, various layouts, subclasses of the ViewGroup class, structure the visual arrangement for an Android user interface. Layouts can be generated either at runtime using View/ViewGroup objects or declared through a simple XML file, such as main_layout.xml, located in the res/layout folder of your project.

Android Layout

An Android Layout is employed to specify the user interface that houses the UI controls or widgets visible on the screen of an Android application or activity. Typically, each application is a blend of View and ViewGroup. Given that an Android application comprises numerous activities, and each activity represents a distinct page within the application, it contains multiple user interface components. These components are instances of the View and ViewGroup. Consequently, the elements in a layout are constructed using a hierarchy of View and ViewGroup objects.

Different Types of Layouts in Android Kotlin

1. Linear Layout

LinearLayout, a subclass of ViewGroup, is employed to arrange child View elements sequentially in a specific direction, either horizontally or vertically, determined by the orientation property.

2. Relative Layout

RelativeLayout, belonging to the ViewGroup subclass, serves to define the positioning of child View elements in relation to each other, such as (A to the right of B) or in relation to the parent (fixed to the top of the parent).

3. Constraint Layout

ConstraintLayout, a subclass of ViewGroup, is utilized to define layout constraints for each child View in relation to other views within the layout. While similar to RelativeLayout, ConstraintLayout offers enhanced capabilities.

4. Table Layout

As a subclass of ViewGroup, TableLayout is employed to present child View elements in organized rows and columns.

5. Frame Layout

A subclass of ViewGroup, FrameLayout is utilized to dictate the arrangement of View elements it encompasses, stacking them on top of each other to exhibit only a single View within the FrameLayout.

6. List View

A ListView serves as a user interface element employed to showcase a vertically scrollable list of items. This adaptable widget provides a means to present data in a flexible format. Within the list, each item represents an individual view, allowing for customization of their appearance and behavior according to the specific needs of your application.

7. Grid View

The GridView serves as a user interface component specifically crafted to exhibit data in a scrollable grid format with a distinctive two-dimensional structure. Functioning as a highly efficient widget, it excels in presenting information in a tabular layout, providing the capability to organize items seamlessly across both rows and columns.

8. Absolute Layout

An Absolute Layout permits the precise definition of the location, specifically the X and Y coordinates, of its children relative to the origin at the top-left corner of the layout. However, the use of absolute layout is discouraged due to its inflexibility and challenges in maintaining consistency across screens with different sizes.

9. Web View

A WebView in Android with Kotlin serves as a visual component designed for showcasing web pages or content within your application. Essentially, it enables the integration of a web browser directly into your Android app. This feature proves beneficial for diverse purposes, including presenting websites, loading HTML content, or even constructing a basic web browser interface within your application.

10. Scroll View

ScrollView is a specialized layout designed to accommodate views larger than its actual size. When the size of views exceeds the ScrollView's dimensions, it automatically adds scroll bars for vertical scrolling.

ScrollView can contain only one direct child. Consequently, for layouts with multiple view controls, they must be enclosed within another standard layout such as LinearLayout, TableLayout, or RelativeLayout.

You can adjust the height and width of the screen by specifying layout_height and layout_width.

While ScrollView is suitable for screens requiring scrolling, it becomes inefficient when used to render extensive lists of data. Android recommends specialized adapter views like ListView, GridView, and Recycler View for managing long lists.

Avoid using ScrollView with ListView or GridView, as both handle their own vertical scrolling.

ScrollView exclusively supports vertical scrolling; for horizontal scrolling, use HorizontalScrollView.

The android property determines whether the ScrollView should stretch its content to fill the viewport, and this can be set using the setFillViewport(boolean) method.

Android Layout Attributes

The following attributes are used to customize a layout while defining it:

1. android:id : Uniquely identifies the Android Layout.
2. android:hint: Displays a hint for what to fill inside the EditText.
3. android:layout_height: Sets the height of the layout.
4. android:layout_width: Sets the width of the layout.
5. android:layout_gravity: Positions the child view.
6. android:layout_marginTop: Sets the margin from the top of the layout.
7. android:layout_marginBottom: Sets the margin from the bottom of the layout.
8. android:layout_marginLeft: Sets the margin from the left of the layout.
9. android:layout_marginRight: Sets the margin from the right of the layout.
10. android:layout_x: Specifies the x coordinates of the layout.
11. android:layout_y: Specifies the y coordinates of the layout.

Android linear layout

Android linear layout is employed for organizing elements in a linear fashion, signifying one element per line. Various types of forms on Android can be crafted using this layout, with elements arranged in a top-to-bottom manner.

There are two possible orientations:

a. Vertical Orientation – Widgets like TextViews are arranged vertically.

b. Horizontal Orientation – TextViews are arranged horizontally.

Android RelativeLayout

Android RelativeLayout is designed to specify the position of elements in relation to other elements within the layout.

In a RelativeLayout, it is possible to align elements with the parent container. To achieve this, the following attributes are used:

By including the above code, the element will align with the top left of the parent container.

If the intention is to align the element with another element in the same container, the following attributes can be utilized:

This will position the element below the specified element to its left.