Grid Layout:
Grid Layout let us arranges elements in Rows and Columns just like the standard table Layout in HTML using <tr> for tables rows and <td> for Tables columns. In Android, We Use Grid Layout to arrange button, textview, and other views in rows and column format.
Grid Layout is just like the Table Layout but the Grid layout is more Flexible than the Table layout control. For instance, cells can span rows, unlike With Table Layout. This grid provides the flexibility to line up elements along the virtual grid lines created while bilding a view with grid layout.
Declaration:
We use following syntax to declare Grid Layout in Android Using XML.
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="2"
android:columnCount="2">
<!--Add views-->
</GridLayout>
We declare the Number of rows and columns within the grid using the row and column properties and the grid layout will place each element in order as shown in the given example.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#184757"
android:rowCount="2"
android:columnCount="4">
<Button
android:text="Cell 0"
android:textSize="14dip" />
<Button
android:text="Cell 1"
android:textSize="14dip" />
<Button
android:text="Cell 2"
android:textSize="14dip" />
<Button
android:text="Cell 3"
android:textSize="14dip" />
<Button
android:text="Cell 4"
android:textSize="14dip" />
<Button
android:text="Cell 5"
android:textSize="14dip" />
<Button
android:text="Cell 6"
android:textSize="14dip" />
</GridLayout>
In above Example, we declare two rows and four columns, therefore Grid layout will arrange all elements in two rows and four columns in respective order. If we Declare three rows and three column, the layout will arrange elements in three rows and three columns.
If we Define Number of columns only within grid layout. the grid layout can define rows it self.
Specifying Position:
In Grid layout, we add views and the layout arrange the views in order (Left to Right). However if we want to Explicitly control the positions of the child views in Grid layout, we can do it by just using Layout row and columns attributes as shown in the given example.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#184757"
android:rowCount="3"
android:columnCount="3">
<Button
android:text="@string/Cell0"
android:textSize="14dip"
android:padding="20dp"
android:layout_row="0"
android:layout_column="0" />
<Button
android:text="@string/Cell1"
android:textSize="14dip"
android:padding="20dp"
android:layout_row="1"
android:layout_column="0" />
<Button
android:text="@string/Cell2"
android:textSize="14dip"
android:padding="20dp"
android:layout_row="0"
android:layout_column="1" />
<Button
android:text="@string/Cell3"
android:textSize="14dip"
android:padding="20dp"
android:layout_row="1"
android:layout_column="1" />
<Button
android:text="@string/Cell4"
android:textSize="14dip"
android:padding="20dp"
android:layout_row="0"
android:layout_column="2" />
<Button
android:text="@string/Cell5"
android:textSize="14dip"
android:padding="20dp"
android:layout_row="1"
android:layout_column="2" />
<Button
android:text="@string/Cell6"
android:textSize="14dip"
android:padding="20dp"
android:layout_row="2"
android:layout_column="1" />
</GridLayout>
Specifying Orientation:
The Grid Layout Organise the Childs views either Horizontally or vertically based on the specified Orientation Property. If We did not specify the Orientation Property (consider the above example), the Grid layout will Position each child view in Default Orientation that is Horizontal (from left to right). If we Change the Orientation from default, which is Horizontal to Vertical Orientation - The Grid layout will positions the Child views from top to bottom in each column instead of left to right as shown below.
Consider the following Example where we change the Grid layout's Orientation from the default, which is Horizontal to vertical.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#184757"
android:rowCount="3"
android:columnCount="3"
android:orientation="vertical">
<Button
android:text="Cell 0"
android:textSize="14dip" />
<Button
android:text="Cell 1"
android:textSize="14dip" />
<Button
android:text="Cell 2"
android:textSize="14dip" />
<Button
android:text="Cell 3"
android:textSize="14dip" />
<Button
android:text="Cell 4"
android:textSize="14dip" />
<Button
android:text="Cell 5"
android:textSize="14dip" />
<Button
android:text="Cell 6"
android:textSize="14dip" />
</GridLayout>
Rows & Columns Span:
In Grid layout, we can also span Multiple rows or columns. Consider the following example Where the first Cell (Cell 0) span 2 Rows and the Seven th cell span three columns -
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#184757"
android:rowCount="3"
android:columnCount="4">
<!--<string name="Cell0">\n Cell 0 \n Row \n Span \n</string>-->
<Button
android:text="@string/cell0"
android:textSize="14dip"
android:layout_rowSpan="2"
android:padding="15dp" />
<Button
android:text="Cell 1"
android:textSize="14dip"
android:padding="20dp" />
<Button
android:text="Cell 2"
android:textSize="14dip"
android:padding="20dp" />
<Button
android:text="Cell 3"
android:textSize="14dip"
android:padding="20dp" />
<Button
android:text="Cell 4"
android:textSize="14dip"
android:padding="20dp" />
<Button
android:text="Cell 5"
android:textSize="14dip"
android:padding="20dp" />
<Button
android:text="Cell 6"
android:textSize="14dip"
android:padding="20dp" />
<!--<string name="Cell7"> Cell 7 - Layout Column Span </string>-->
<Button
android:text="@string/cell7"
android:textSize="14dip"
android:padding="20dp"
android:layout_columnSpan="3" />
<Button
android:text="Cell 8"
android:textSize="14dip"
android:padding="20dp" />
</GridLayout>
Using Layout Gravity:
In above all example, we did not specify the width or height for any of the view within the grid layout. This is because Grid Layout use a different layout model. its wrap the content and provide enough space to cell that required by element. In this case, if the first cell in the column contain a small element and second cell in same column contain something bigger, than second cell will stretched itself to provide enough space to element. But other all cells will be at same size and cannot stretch itself. so, to control this situation, we use Layout Gravity attribute.
Consider the following example to know what i am talking about, and why we need Layout Gravity Attribute in Grid layout.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#184757"
android:rowCount="3"
android:columnCount="3">
<Button
android:text="Cell 1"
android:textSize="14dip"
android:padding="20dp" />
<!--Fill Horizontal and follow the cell 5-->
<Button
android:text="Cell 2"
android:textSize="14dip"
android:padding="20dp"
android:layout_gravity="fill_horizontal" />
<Button
android:text="Cell 3"
android:textSize="14dip"
android:padding="20dp" />
<Button
android:text="Cell 4"
android:textSize="14dip"
android:padding="20dp" />
<!--Cell 5: contain something bigger-->
<Button
android:text="Cell 5 - (Gravity)"
android:textSize="14dip"
android:padding="20dp" />
<Button
android:text="Cell 6"
android:textSize="14dip"
android:padding="20dp" />
<Button
android:text="Cell 7"
android:textSize="14dip"
android:padding="20dp" />
<!--Fill Horizontal and follow the cell 5-->
<Button
android:text="Cell 8"
android:textSize="14dip"
android:padding="20dp"
android:layout_gravity="fill_horizontal" />
<Button
android:text="Cell 9"
android:textSize="14dip"
android:padding="20dp" />
</GridLayout>
In above Picture, The First Screen is the Output where we did not use Layout Gavity attribute. and second one is the output where we did use Layout Gravity Attribute.
Example:
Creating a Keypad Using Grid Layout:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center | bottom"
android:columnCount="10">
<Button android:text="Q" style="@style/button_style" />
<Button android:text="W" style="@style/button_style" />
<Button android:text="E" style="@style/button_style" />
<Button android:text="R" style="@style/button_style" />
<Button android:text="T" style="@style/button_style" />
<Button android:text="Y" style="@style/button_style" />
<Button android:text="U" style="@style/button_style" />
<Button android:text="I" style="@style/button_style" />
<Button android:text="O" style="@style/button_style" />
<Button android:text="P" style="@style/button_style" />
<Button android:text="@" style="@style/button_style" />
<Button android:text="A" style="@style/button_style" />
<Button android:text="S" style="@style/button_style" />
<Button android:text="D" style="@style/button_style" />
<Button android:text="F" style="@style/button_style" />
<Button android:text="G" style="@style/button_style" />
<Button android:text="H" style="@style/button_style" />
<Button android:text="J" style="@style/button_style" />
<Button android:text="K" style="@style/button_style" />
<Button android:text="#" style="@style/button_style" />
<Button android:text="," style="@style/button_style" />
<Button android:text="L" style="@style/button_style" />
<Button android:text="Z" style="@style/button_style" />
<Button android:text="X" style="@style/button_style" />
<Button android:text="C" style="@style/button_style" />
<Button android:text="V" style="@style/button_style" />
<Button android:text="B" style="@style/button_style" />
<Button android:text="B" style="@style/button_style" />
<Button android:text="M" style="@style/button_style" />
<Button android:text="." style="@style/button_style" />
<Button android:text="12" style="@style/button_style" />
<Button android:text="-" style="@style/button_style" />
<Button android:text="_" style="@style/button_style" />
<Button
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="4"
style="@style/button_style"
/>
<Button android:text="?!" style="@style/button_style" />
<Button android:text="⌂" style="@style/button_style" />
<Button android:text="«" style="@style/button_style" />
</GridLayout>
Button Style:
In order to Design button, Add a New Resource in the Values Directory (values » add » New Item » Android layout) and Called "buttonstyle.xml" and then add the buttonstyle.xml into the button Using @style.
