Android ViewGroup With Examples

Android ViewGroup class is used to create the screen views. In this tutorial, we will learn about the ViewGroup and look at some simple examples.

What is an Android ViewGroup?

A ViewGroup is a container to hold views. All the android activities, fragment layouts, etc. are ViewGroups.

The ViewGroup classes are extended from Views. They are used as containers on the android app screen.

Types of Android ViewGroup

Some of the important ViewGroups in Android are:

  • LinearLayout
  • RelativeLayout
  • FrameLayout
  • TableLayout
  • CoordinatorLayout
  • ConstraintLayout

The name of these classes ends with “Layout” because they are used to create different types of layouts.

Let’s look into some examples of ViewGroups in the Android app.

1. LinearLayout

LinearLayout is a ViewGroup that aligns all of its child views in one direction: vertically or horizontally.

The android:orientation attribute is used to set the direction in XML layout.

1.1) Horizontal LinearLayout XML Code

By default the orientation is horizontal and the gravity is left aligned.

1.2) Vertical LinearLayout XML Code

The gravity value end represents right alignment. We can use both the values “right” or “end” interchangeably.

Similarly, for left alignment we can use start too.

The “start” and “end” are the preferred values to ensure that the layout behavior is correct in the right to left locales.

The android:gravity can have either of the following values: left, start, right, end, top, bottom, center, center_horizontal, center_vertical.

The following image shows how right-aligned Vertical LinearLayout looks in the android app screen.

1.3) LinearLayout Weights

LinearLayout allows us to set weights on the child views. This will signify the share of width or height that particular view uses from its parent view.

We have to specify android:weightSum to the LinearLayout and android:layout_weight attribute in the child view.

The following XML layout creates the child’s views with equal width.

  • The layout_weight is set on the child views. We have to assign the width as 0dp so that the widths would be automatically calculated using the Layout Weights in LinearLayout.
  • Similarly, if the orientation is vertical and Layout weights are specified, we have to specify the layout_height as 0dp. It will be calculated automatically from the layout_weight attribute.

1.4) Nested LinearLayout

The following XML layout shows Nested Layouts, horizontal, and vertical layouts with the layout weights.

We’ve set layout weights on each of the child LinearLayouts. The gravity attribute is used to set the gravity of all the child’s views. The layout_gravity is used to set the gravity of a ChildView relative to the layout.


1.5) Creating LinearLayout Programmatically

We can create the LinearLayout in our Kotlin Activity class.

We can add the buttons in the LinearLayout using addView() function on the instance. It’ll attach the view passed to the end of the layout.

We can pass the index as the second argument in the addView() function to add the child view in a particular position.

Let’s look at the activity_main.xml code in our Android Studio Project.

The following code adds child views in the LinearLayout programmatically in the MainActivity.kt class.

The weightSum property requires a floating value.

For each of the Buttons, we’ve created a LayoutParams instance in which we’ve set the layout_weight using the property weight.

The childCount property gives us the current number of child views present in the LinearLayout.

We’ve set the second button on the top, and the third button at the index one less than child count(3-1=2). Hence it comes up in the middle and the first button is at the bottom.

2. RelativeLayout

RelativeLayout is used to align the views relative to each other as well as relative to its parent view.

The following XML layout creates the RelativeLayout view.

The default position of a RelativeLayout view is top-left.

  • layout_centerVertical = true sets the view in the vertical center. By default, it’ll be left aligned.
  • layout_centerHorizontal = true sets the view in the horizontal center. By default, it’ll be top aligned.
  • layout_centerInParent = true sets the view in the horizontal and vertical center of the parent.
  • layout_alignParentEnd/Right = true aligns the view to the right end of the view.
  • android-kotlin-horizontal-linearlayout

2.1) Relative to siblings

  • layout_above = “@+id/sibling_id” is used to set the current child above the sibling.
  • layout_below sets it below.
  • layout_alignLeft/layout_alignStart = "@+id/sibling_id" aligns the left margins of the current child with the sibling
  • layout_alignRight/layout_alignEnd = "@+id/sibling_id" aligns the right margins of the current child with the sibling.
  • Similarly alignBottom and alignTop align for the bottom and top respectively.
  • android:layout_toEndOf/android:layout_toRightOf = "@+id/sibling_id" puts the child to the right of the sibling.
  • android:layout_alignBaseline="@+id/sibling_id" aligns the bottom baseline.

2.2) Creating RelativeLayout Programmatically

We can set the child views using rules in our Kotlin Activity class.

Following is our activity_main.xml XML layout.

The MainActivity.kt class is setting the relative layout views.

We have to use addRule() method to set the child layout relative to parents and each other.


Android ViewGroup classes are used to create different types of layouts on the screen. We also looked at the most important layout classes and how to create them in XML as well as in the activity code.

By admin

Leave a Reply

%d bloggers like this: