In this tutorial, we will explain you about creating GUI-based layouts. A Layout is nothing but the alignment of widgets such as buttons, images, etc. in the Android application. Every Android Layout is created in XML file, which is located in App>res> Layout in New Android Studio. As we see the Layouts in every application, here we are going to explain you in detail about the android layouts, its types and attributes.
View class represents the basic building block for user interface components. A View is basically a screen and is responsible for drawing and event handling.
The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties. The layout xml file is located in res/layout directory. All of the views in a window are arranged in a single tree. You can add views either from the code or by specifying a tree of views in one or more XML layout files.
A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways:
You can specify the width and height with exact measurements, but more often, you will use one of the below constants to set the width or height −
• Instantiate layout elements at runtime: Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.
• Declare UI elements in XML: Android provides an XML file that corresponds to the View classes and sub-classes, such as those for widgets and layouts.
Each layout file must contain exactly one root element, which must be a View or ViewGroup object. Once you've defined the root element, you can add additional layout objects or widgets as child elements to gradually build a View hierarchy that defines your layout. For example, below is an XML layout that uses a vertical LinearLayout to hold a TextView and a Button:
activity_main.xml:
[code lang="xml"]
<?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" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
[/code]
After you have declared your layout in XML, save the file with the .xml extension, in your Android project's res/layout/ directory, so it can be compiled in the right way.
When you compile your application, each XML layout file is compiled into a View resource. You should load the layout resource from your application code, in your Activity.onCreate() method, by calling setContentView()
Ex:
[java]
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
[/java]
Layout Types:
The following are a different types of Layouts:
• Linear layout: LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You need to mention its direction in the orientation attribute.
Ex:
[code lang="xml"]
<?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:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="25sp"
android:text="Android" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_marginTop="20dp"
android:textSize="25sp"
android:text="Application" />
</LinearLayout>
[/code]
• Relative Layout: RelativeLayout allows child views to specify their position relative to the parent view or to each other (specified by ID). So, you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout.
Ex:
[code lang="xml"]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/textView1"
android:text="Application"
android:textColor="#000000"
android:textSize="25sp" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Android"
android:textColor="#000000"
android:textSize="25sp" />
</RelativeLayout>
[/code]
• Tablelayout: TableLayout positions its children into rows and columns. TableLayout containers do not display border lines for their rows, columns, or cells. The table will have as many columns as the rows with the most cells.
Ex:
[code lang="xml"]
Ex:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="row1"
android:padding="3dip" />
<TextView
android:text="row1"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:text="row2"
android:padding="3dip" />
<TextView
android:text="row2"
android:gravity="right"
android:padding="3dip" />
</TableRow>
</TableLayout>
[/code]
• AbsoluteLayout: AbsoluteLayout lets you to specify the exact locations (x/y coordinates) of its children. Absolute layouts are less flexible and harder to maintain than other types of layouts without absolute positioning. It is added in API Level 1 & is deprecated in API Level 3.
• FrameLayout: FrameLayout is designed to block an area on the screen to display a single item. It should be used to hold a single child view, because it can be difficult to organize child views in a way that is scalable to different screen sizes without the children overlapping with each other. You can add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child.
Ex:
[code lang="xml"]
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:textColor="#000000"
android:textSize="20sp"
android:text="Android" />
</FrameLayout>
[/code]
• ListView: The ListView is a view group that displays a list of scroll-able items. The list items are automatically inserted into the list using an Adapter that pulls content from a source such as an array or a database query and converts each item result into a view that is placed into the list.
Ex:
[code lang="xml"]
<?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:background="#ffffff" >
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
[/code]
Click here for an example of ListView using Adapters.
• GridView: GridView is a ViewGroup that displays items in a two-dimensional, scroll-able format. The grid items are automatically inserted into the layout using a ListAdapter.
Ex:
[code lang="xml"]
<?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:background="#ffffff" >
<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3" >
</GridView>
</LinearLayout>
[/code]
Click here for an example of GridView using Adapters.
Layout attributes:
This is the ID which uniquely identifies the view.
This is the width of the layout.
This is the height of the layout
This is the extra space on the top side of the layout.
This is the extra space on the bottom side of the layout.
This is the extra space on the left side of the layout.
This is the extra space on the right side of the layout.
This specifies how child Views are positioned.
This specifies how much of the extra space in the layout should be allocated to the View.
This specifies the x-coordinate of the layout.
This specifies the y-coordinate of the layout.
This is the left padding filled for the layout.
This is the right padding filled for the layout.
This is the top padding filled for the layout.
This is the bottom padding filled for the layout.
• android:layout_width=wrap_content tells your view to size itself to the dimensions required by its content.
• android:layout_width=fill_parent tells your view to become as big as its parent view.
android:layout_width & android:layout_width are mandatory attributes, while id is optional and you can use the id attribute in the following way
android:id="@+id/ button"• The at-symbol
(@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource.
• The plus-symbol (+) indicates that this is a new resource name that must be created and added to our resources.
To create an instance of the view object and capture it from the layout, use the following code−
Button myButton = (Button) findViewById(R.id.button);