Introduction to Android Views and ViewGroups

All the interaction of a user with the Android application is through the user interface(UI), hence it is very important to understand the basics about the User Interface of an android application. Here in this tutorial, we are going to cover about various Views and ViewGroups and will try to explain how they can be used to design the User Interface of an android application.

Views

View is the basic building block of UI(User Interface) in android. View refers to the android.view.View class, which is the super class for all the GUI components like TextView, ImageView, Button etc.

View class extends Object class and implements Drawable.Callback, KeyEvent.Callback and AccessibilityEventSource.

View can be considered as a rectangle on the screen that shows some type of content. It can be an image, a piece of text, a button or anything that an android application can display. The rectangle here is actually invisible, but every view occupies a rectangle shape.

The question that might be bothering you would be , what can be the size of this rectangle?

The answer is either we can set it manually, by specifying the exact size(with proper units) or by using some predefined values. These predefined values are match_parent and wrap_content.

match_parent means it will occupy the complete space available on the display of the device. Whereas, wrap_content means it will occupy only that much space as required for its content to display.

A View is also known as Widget in Android. Any visual(that we can see on screen) and interactive(with which user can interact with) is called a Widget.

XML syntax for creating a View

Now, as we have explained earlier as well, to draw anything in your android application, you will have to sepcify it in the design XML files. And to add functionality we will create Java files.

Every view in XML has the following format:

<ViewName
    Attribute1=Value1
    Attribute2=Value2
    Attribute3=Value3
    .
    .
    AttributeN=ValueN
/>

• It always start with an angle bracket, followed by the View name. We will introduce you to various types of Views very soon.
• Then we write attributes that will define how that view will look on the screen of the application along with a value for the attribute. Each view has its own attributes which we will discuss in the next few tutorials which will cover various typs of views.
• In the end, it is closed by />

So, every View subclass needs to follow this format so that it can appear on the screen of the app. And this format is nothing but default XML style. Right!

There are two attributes that are necessary for every View. These are: android:layout_height and android:layout_width.

These attributes define the size of the invisible rectangle that a view makes. Using these attributes we can easily control the size for every view in our android application.

Apart from the above mentioned attributes, attributes like gravity, layout_gravity, padding and margin are some other commonly used attributes.

Most commonly used Android View classes

Here we have some of the most commonly used android View classes:

• TextView
• EditText
• Button
• ImageView
• ImageButton
• CheckBox
• RadioButton
• ListView
• GridView
• DatePicker
• Spinner, etc.

Programmatic and Declarative Approach

To create/define a View or a ViewGroup in your android application, there are two possible ways:

1. The Programmatic Approach: In this we define/create our Views in the Java source file. We will learn about this approach in details later, as of now here is a sample code to add a Button to our view.

   Button myButton = new Button(this);
   myButton.setLayoutParams(new LinearLayout.LayoutParams(
                                           LinearLayout.LayoutParams.MATCH_PARENT,
                                           LinearLayout.LayoutParams.MATCH_PARENT));
   
   myLayout.addView(myButton);

   So addView() is the function used to add any View to the UI and setLayoutParams() function is used to set the various attributes.

2. The Declarative Approach: In this we define the View and ViewGroups directly in the design XML files, like we will be doing in the next couple of tutorials where we will study about various commonly used views.