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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/holo_green_light" android:text="Button 1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/holo_purple" android:text="Button 1" /> </LinearLayout> |
By default the orientation is horizontal and the gravity is left aligned.
1.2) Vertical LinearLayout XML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:orientation="vertical" android:gravity="end" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/holo_green_light" android:text="Button 1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/holo_purple" android:text="Button 1" /> </LinearLayout> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:orientation="horizontal" android:weightSum="3" android:layout_height="match_parent"> <Button android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:background="@android:color/holo_green_light" android:text="Button 1" /> <Button android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button 3" /> </LinearLayout> |
- The
layout_weightis set on the child views. We have to assign the width as0dpso 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_heightas0dp. It will be calculated automatically from thelayout_weightattribute.
1.4) Nested LinearLayout
The following XML layout shows Nested Layouts, horizontal, and vertical layouts with the layout weights.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:weightSum="3"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="vertical" android:weightSum="0.8"> <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.4" android:src="https://www.journaldev.com/114/@mipmap/ic_launcher" /> <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.2" android:src="https://www.journaldev.com/114/@mipmap/ic_launcher" /> <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.2" android:src="https://www.journaldev.com/114/@mipmap/ic_launcher" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.2" android:gravity="center" android:weightSum="1.5"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="top" android:layout_weight="0.5" android:background="@android:color/holo_green_light" android:text="Button 1" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.6" android:text="Button 2" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_weight="0.4" android:text="Button 3" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="center" android:weightSum="1.5"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.4" android:background="@android:color/holo_green_light" android:text="Androidly 1" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.7" android:background="@android:color/black" android:gravity="center" android:text="Androidly 2" android:textColor="@android:color/white" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.4" android:background="@android:color/holo_purple" android:text="Androidly 3" android:textColor="@android:color/white" /> </LinearLayout> </LinearLayout> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linearLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="horizontal" android:weightSum="3"> </LinearLayout> |
The following code adds child views in the LinearLayout programmatically in the MainActivity.kt class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
package net.androidly.androidlylayouts import android.graphics.drawable.GradientDrawable import android.support.v7.app.AppCompatActivity import android.os.Bundle import android.support.v4.content.ContextCompat import android.support.v7.widget.LinearLayoutCompat import android.widget.Button import kotlinx.android.synthetic.main.activity_main.* import android.widget.LinearLayout class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) linearLayout.weightSum = 3f linearLayout.orientation = LinearLayout.VERTICAL val params = LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, 0) params.weight = 1f var button = Button(this) button.text = "Androidly Button 1" button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_purple)) button.layoutParams = params linearLayout.addView(button) button = Button(this) button.text = "Androidly Button 2" button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_green_dark)) button.layoutParams = params linearLayout.addView(button, 0) button = Button(this) button.text = "Androidly Button 3" button.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_red_dark)) button.layoutParams = params linearLayout.addView(button, linearLayout.childCount - 1) } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/relativeLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:text="Center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> <Button android:text="Center-H" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" /> <Button android:text="Center-V" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" /> <Button android:text="Center-VR" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_alignParentEnd="true" /> <Button android:text="Parent-BL" android:layout_alignParentBottom="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:text="Parent-RT" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" /> <Button android:text="Parent-LT" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> |
The default position of a RelativeLayout view is top-left.
layout_centerVertical = truesets the view in the vertical center. By default, it’ll be left aligned.layout_centerHorizontal = truesets the view in the horizontal center. By default, it’ll be top aligned.layout_centerInParent = truesets the view in the horizontal and vertical center of the parent.layout_alignParentEnd/Right = truealigns the view to the right end of the view.
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 siblinglayout_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.
|
1 2 |
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.
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/relativeLayout" android:layout_width="match_parent" android:layout_height="match_parent"> </RelativeLayout> |
The MainActivity.kt class is setting the relative layout views.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
package net.androidly.androidlylayouts import android.support.v7.app.AppCompatActivity import android.os.Bundle import android.widget.Button import android.widget.RelativeLayout import kotlinx.android.synthetic.main.activity_main.* import android.view.ViewGroup class MainActivity : AppCompatActivity() { val ID_1 = 1 val ID_2 = 2 val ID_3 = 3 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) var button = Button(this) button.text = "1" button.id = ID_1 val lp = RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT) lp.addRule(RelativeLayout.CENTER_IN_PARENT) button.layoutParams = lp relativeLayout.addView(button) button = Button(this) button.text = "2" button.id = ID_2 val params = RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT) params.addRule(RelativeLayout.BELOW, ID_1) button.layoutParams = params relativeLayout.addView(button) button = Button(this) button.text = "3" button.id = ID_3 val lp2 = RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT) params.addRule(RelativeLayout.LEFT_OF, ID_2) button.layoutParams = lp2 relativeLayout.addView(button) } } |
We have to use addRule() method to set the child layout relative to parents and each other.
Conclusion
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.