TechVidvan

Android Layout and Views

I hope you are enjoying the android journey so far and are developing some awesome apps. Today, you will get to know a pretty exciting topic known as Layouts and Views. You are very well aware that an interactive UI attracts more users to your application. To build such an interactive user interface, you should have a crisp knowledge of Layouts, Views, and View Groups.

So, through this article, you will come across the several layouts, view, and view groups present in android.

What is an Android Layout?

A layout defines the structure of your application. In other words, a layout is a container that holds several view elements inside it. The view elements are TextView, ImageView, Button, EditText, etc. Layouts have their params and using them, we can alter the margins, paddings, etc., for a given layout.

Whenever you develop an application, you first need to choose the layout and style it accordingly to make your application look better. Every Layout in android is styled using the XML language, as shown below.

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TechVidvan Android"
        android:textSize="40sp"
        android:textColor="#078A0D"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_margin="20dp"
        />
    

</LinearLayout>

Types of Layouts in Android

Android provides you with several types of layouts depending upon your needs. Let’s see all of them with a brief description of each.

Layout Type Description
Linear Layout Linear Layout is used to align your items in a linear fashion, either vertical or horizontal.
Relative Layout Relative Layout is used when you wish to place views relative to each other’s position.
Table Layout Table Layout is used to display the items(such as text, image, etc) in the form of rows and columns. 
Absolute Layout Absolute Layout is used when you want to fix the position of an element in the screen. 
Frame Layout Frame Layout is used when you deal with fragments. This layout allows you only to have one child view. 
List View List View is used when you wish to display your items in the form of a list.
Grid View Grid View is used when you wish to show your data in the form of a grid of one’s, two’s, three’s, or so on. 
Web View Web View is a layout that is used mainly when dealing with web pages inside the application. 
Scroll View Scroll View allows your content to scroll vertically or horizontally. The point to note is that ScrollView has only one child view.
Constraint Layout Constraint layout is the most adaptive layout among all the above. It allows you to put vertical, horizontal, top, and bottom constraints for any element. 

Android Layout Attributes

Now let’s see the attributes you can apply to layouts to style them and provide more functionalities.

Attribute Name Description
android:id The “id” attribute helps in the unique identification of the layout in your design. 
android:layout_width The “layout_width” attribute sets the width of the layout.
android:layout_height The “layout_height” attribute sets the height of the layout. 
android:layout_marginTop The “layout_marginTop” attribute specifies the margin of the layout from the top.
android:layout_marginBottom The “layout_marginTop” attribute specifies the margin of the layout from the bottom.
android:layout_marginLeft The “layout_marginTop” attribute specifies the margin of the layout from the left side.
android:layout_marginRight The “layout_marginTop” attribute specifies the margin of the layout from the right side.
android:layout_gravity The “layout_gravity” attribute specifies the position of the layout on the screen. The possible positions are center, top, bottom, left, right, etc.
android:layout_weight The “layout_weight” attribute is usually applied to the views inside the layout. It specifies how many portions(or free space) of layout that view should occupy. 
android:layout_x The “layout_x” attribute is used to specify the x coordinates for your layout.
android:layout_y The “layout_y” attribute is used to specify the y coordinates for your layout.
android:paddingLeft The “paddingLeft” attribute is used to provide padding to the layout from the left. 
android:paddingRight The “paddingLeft” attribute is used to provide padding to the layout from the right. 
android:paddingTop The “paddingTop” attribute is used to provide padding to the layout from the top. 
android:paddingBottom The “paddingBottom” attribute is used to provide padding to the layout from the bottom. 

What is an Android View?

A View is a fundamental element for any user interface (or design) in android. View provides you with a rectangular space that can be used to display, interact or handle events. The view is a superclass for any graphical components in android. Usually, each view is rectangular and can hold textual and visual contents. Attached to a view, there are several attributes that define the property and functionality of that view.

Below is a general example of defining a view using XML.

Code:

<YourViewName
    Attribute_1 = value_1
    Attribute_2 = value_2
    Attribute_3 = value_3
    Attribute_4 = value_4
    .
    .
    .
    Attribute_n = value_n
/>

Views, as you know, are the elements that you can add to your user interface. Views are constructive in creating fabulous, incredible, and gorgeous user interfaces. Along with this, the views are used to make your interface interactive and available supporting clicks, gestures, touches, etc.

Types of Android Views

Android provides a bunch of views that can be used depending upon the needs of your application. Some of them are as follows:

  • TextView
  • ImageView
  • EditText
  • Button
  • ImageButton
  • ToggleButton
  • RadioButton
  • RadioGroup
  • CheckBox

What is Android ViewGroup?

Android ViewGroup is a container that holds several views, layouts, or even other view groups inside it. Using the view group, you can give rise to several views and layouts. Android ViewGroup is a superclass for all layouts and acts as a subclass for the View class. ViewGroup can be thought of as an exceptional view known as parent view, and the views inside it are known as child views.

Some of the most commonly used ViewGroups are as follows:

  • FrameLayout
  • WebView
  • LinearLayout
  • RelativeLayout
  • TableLayout
  • Constraint Layout
  • ListView
  • GridView

Difference between Android View and Android ViewGroup.

View ViewGroup
The view is a fundamental UI component that responds to user interactions(touches, clicks, scrolls, etc.). ViewGroup is a container that holds several views, layouts, and view groups inside it. 
The view is a superclass for many view elements like TextView, ImageView, Button, etc.  ViewGroup is a superclass for various layouts like LinearLayout, RelativeLayout, etc. 
The view belongs to the android.view.View class ViewGroup belongs to the android.view.ViewGroup class
A View object is usually a widget, for example, Button, TextView, ImageView, etc.  A ViewGroup object is typically a layout containing several views and layouts inside it. 
View, in general, is known as a child view. ViewGroup is known as parent view holding several child views.

View Identification in Android

View identification is essential in android because you can’t respond to the user without identifying your view elements. You should locate the view to know which view was triggered by the user and what response you should provide.

So, first of all, you need to provide an id to your view element, and then in your Kotlin class, you need to use the findViewByID() method to bind the view element with a Kotlin class variable.

XML Code:

<TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TechVidvan Android"
        android:textSize="40sp"
        android:textColor="#078A0D"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_margin="20dp"
        />

Kotlin Code:

//declaring variable to point to the TextView
lateinit var myTextTitle:TextView

//binding the TextView with our declared variable
myTextTitle = findViewById(R.id.title)

Summary

Through this article, you came across several terms related to the user interface design in android. You saw what layouts are and also came across the way to create them. You saw the various types of layouts and their attributes. Moving on, you come across Views and ViewGroups. You saw what each of them is and also came across the difference between them. Finally, you came across the View identification in Android.