When we talk about UI in Android, your mind as a developer should directly think of what we call Views, but why?

To answer that question we should Answer another question which is …

What’s a View?

A View is the basic building block for user interface components. It occupies a 2-dimensional area (say: rectangle) on the screen, which is responsible for framing and handling different type of events. They are used to display data, respond to user actions and drawing content onto the screen of an Android device. In one word, every element of the screen is a view.
But the developer’s definition would be much more like, a View (to be precise android.view. View) is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.). It is the superclass for all GUI components in Android.
The Android SDK provides a set of pre-built views that can be used to construct a user interface. Typical examples include standard items such as the Button, CheckBox, ProgressBar and TextView classes. Such views are also referred to as widgets. For requirements that are not met by the widgets supplied with the SDK, new views may be created and customized as you wish them to be either by subclassing and extending an existing class, or creating an entirely new component by building directly on top of the View class, just raise your sleeves and make it happens.
A view can also be comprised of multiple other views, which brings the bell to something called ViewGroups so what are they?

Hierarchy of Views in Android

What’s a ViewGroup ?

A ViewGroup is an invisible object (a special view) used to contain other View and ViewGroup objects (called children.) in order to organize and control the layout of a screen. ViewGroup objects are used for creating a hierarchy of View objects so that you can create more complex layouts. That said, the more simple you can keep a layout, the more performant it is.

Note : Composite views are subclassed from the Android ViewGroup class (to be precise android.view. ViewGroup) which is itself a subclass of View. An example of such a view is the RadioGroup, which is intended to contain multiple RadioButton objects such that only one can be in the “on” position at any one time. In terms of structure, composite views consist of a single parent view (derived from the ViewGroup class and otherwise known as a container view or root element) that is capable of containing other views (known as child views).

Clarification: (Widgets & Layouts)

The View objects are usually called “widgets” and can be one of many subclasses, such as Button or TextView. The ViewGroup objects are usually called “Layouts” can be one of many types that provide a different layout structure, such as LinearLayout or ConstraintLayout.

Views, ViewGroups & XML attributes :

Now and since we now all about Views and ViewGroups and what are they we will try to mention the most common used ones in Android development and explain how to use them in XML :

The most common Widgets:

• TextView : It displays text to the user and optionally allows them to edit it programmatically. TextView is a complete text editor, however basic class is configured to not allow editing but we can edit it. Check This or the official docs for more details.

TextView With different sizes and colors

• EditText : The standard entry widget in android apps. In short where the user can write. There is different types of EditText for passwords, emails, texts, etc…Check This or the official docs for more details.

Different types of EditTexts

• Button : Buttons can be clicked, or pressed by the user to perform an action. There are different types of buttons used in android. Check This or the official docs for more details.

A Button in it’s different states

• ImageView : In Android, ImageView class is used to display an image file in the application. Image file is easy to use but hard to master in Android, because of the various screen sizes in Android devices. Check This or the official docs for more details.

ImageView

• CheckBox : CheckBox is a type of two state button either unchecked or checked in Android. Or you can say it is a type of on/off switch that can be toggled by the users. You should use checkbox when presenting a group of selectable options to users that are not mutually exclusive. Check This or the official docs for more details.

CheckBox in it’s different states

Attributes :

• id : These ids are typically assigned in the layout XML files, and are used to find specific views within the view tree. View IDs need not be unique throughout the tree, but it is good practice to ensure that they are at least unique within the part of the tree you are searching.

Syntax : android:id="@id/my_id"

• height & width : As the name itself suggests, both of these attributes describes the height and width of the given view. These are necessary attributes for every view in a XML file.

Syntax : android:layout_width="match_parent" android:layout_height="match_parent"

FILLPARENT (renamed MATCHPARENT in API Level 8 and higher), which means that the view wants to be as big as its parent (minus padding)WRAP_CONTENT, which means that the view wants to be just big enough to enclose its content (plus padding). Ideally, Value should be in “dp” i.e density independent pixels.

• Padding & margin : Padding is the space inside the border, between the border and the actual view’s content. Note that padding goes completely around the content. While Margins are the spaces outside the border, between the border and the other elements next to this view. In the image, the margin is the grey area outside the entire object.

Syntax : android:padding="10dp" android:layout_margin="10dp"

• Gravity & Layout_gravity : android:gravity sets the gravity of the content of the View its used on. And android:layout_gravity sets the gravity of the View or Layout in its parent.

There are plenty of other Attributes (each Widget have it’s own attributes). feel free to check them either in the official documentations or the tutorials that exists all over the net or even on your own.

The most Common Layouts :

• Constraint Layout: (Constraint means a restriction or a limitation.) ConstraintLayout is a view group that allows adding elements from the palette on the screen and add restrictions to each of its sides. With these constraints, we can specify the distance of each element from the border or from each other.

• Linear Layout: LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

• Relative Layout: RelativeLayout is a view group that displays child views in relative positions.

• Table Layout: TableLayout is a view that groups views into rows and columns.

• Frame Layout: The FrameLayout is a placeholder on screen that you can use to display a single view.

• List View: ListView is a view group that displays a list of scrollable items.

• Grid View: GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.

Additional ressources:

To learn more about Views check this :

• Views on Android’s Official docs
• Android Beginners : Views & Layouts
• Layouts on Android’s Official docs