A view group is a special kind of view that is capable of containing views. A view group that contains one or more views is commonly referred to as a parent view and the views contained as its children views. A view group is the parent class of several other view containers. Some examples of view groups are LinearLayout, CoordinatorLayout, ConstriantLayout, RelativeLayout, AbsoluteLayout, GridLayout, and FrameLayout.

View groups can be created within an XML layout in a source file:

<LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="16dp"
 android:layout_marginBottom="16dp"/>

Similar to views, view groups can be created programmatically within component classes. In the following code snippet, a linear layout is made by creating an instance of the LinearLayout class and passing the context of MainActivity to its constructor:

class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val linearLayout: LinearLayout = LinearLayout(this)
  }
}

Having understood the concepts of views and view groups, we can add a few more views to our layout. Text views are added to a layout with the <TextView> element and buttons are added with the <Button> element:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mydomain.tetris.MainActivity">
  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="@dimen/layout_margin_top"
        android:layout_marginBottom="@dimen/layout_margin_bottom"
        android:orientation="vertical">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TETRIS"
            android:textSize="80sp"/>
    <TextView
            android:id="@+id/tv_high_score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="High score: 0"
            android:textSize="20sp"
            android:layout_marginTop="@dimen/layout_margin_top"/>
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical">
      <Button
           android:id="@+id/btn_new_game"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="New game"/>
      <Button
           android:id="@+id/btn_reset_score"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Reset score"/>
      <Button
           android:id="@+id/btn_exit"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="exit"/>
    </LinearLayout>
  </LinearLayout>
</android.support.constraint.ConstraintLayout>

As our sketch outlines, we have added two text views to hold the application title and the high score, as well as three buttons to execute the required actions. We have made use of two new attributes. These attributes are android:id and android:layout_weight. The android:id attribute is used to set a unique identifier for an element in a layout. No two elements in the same layout can have the same ID. The android:layout_weight attribute is used to specify a precedence value for how much space a view should take in its parent container:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
  <Button
       android:layout_width="70dp"
       android:layout_height="40dp"
       android:text="Click me"/>
  <View
       android:layout_width="70dp"
       android:layout_height="0dp"
       android:layout_weight="1"/>
</LinearLayout>

In the preceding code snippet, two child views are contained by a linear layout. The button explicitly sets both its dimensional constraints to 70dp and 40dp. The view, on the other hand, has its width explicitly set to 70dp and has its height set to 0dp. As a result of the presence of an android:layout_weight attribute set to 1,  the view's height is set to cover all remaining space in the parent view.

Now that we understand fully what is going on in our layout, we can take a look at the layout design preview:

We can see that something seems off. Unlike our sketch, our layout items are not centered but aligned to the right. We can solve this by using the android:gravity attribute in our linear layout view groups. In the following code snippet, we make use of the android:gravity attribute to center layout widgets within both linear layouts:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mydomain.tetris.MainActivity">
  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="@dimen/layout_margin_top"
        android:layout_marginBottom="@dimen/layout_margin_bottom"
        android:orientation="vertical"
        android:gravity="center"> 
    <!-- Aligns child elements to the centre of view group  -->
    <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="TETRIS"
         android:textSize="80sp"/>
    <TextView
         android:id="@+id/tv_high_score"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="High score: 0"
         android:textSize="20sp"
         android:layout_marginTop="@dimen/layout_margin_top"/>
    <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_weight="1"
           android:orientation="vertical"
           android:gravity="center"> 
      <!-- Aligns child elements to the centre of view group  -->
      <Button
           android:id="@+id/btn_new_game"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="New game"/>
      <Button
           android:id="@+id/btn_reset_score"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Reset score"/>
      <Button
           android:id="@+id/btn_exit"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="exit"/>
    </LinearLayout>
  </LinearLayout>
</android.support.constraint.ConstraintLayout>

As a result of android:gravity being set to center, widgets are properly aligned as we would like. The effects of applying the android:gravity view groups to our layout view groups can be seen in the following screenshot: