Ice Cream Sandwich GridLayout

Android 4.0 (Ice Cream Sandwich) introduced a new type of layouts: the Gridlayout.
Gridlayout is like the <Table> tag in HTML. child widgets are arranged in Cells made of Rows and Columns.

Grid layout is a ViewGroup that can be used in constructing dashboard activities like that one in the Google Plus application:

so lets see what we can do with the GridLayout:
well construct a simple dashboard layout like this:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 
 android_layout_width="fill_parent"
 android_layout_height="fill_parent"
 android_rowCount="5"
 android_columnCount="3"
 >

 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button 1"
 android_layout_row="0"
 android_layout_column="0"
 android_layout_marginLeft="5dp"
 />
 
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button 2"
 android_layout_row="0"
 android_layout_column="1"
 android_layout_margin="5dp" />
 
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button 3"
 android_layout_row="1"
 android_layout_column="0"
 android_layout_margin="5dp" />
 
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button 4"
 android_layout_row="1"
 android_layout_column="1"
 android_layout_margin="5dp" />
 
 <Button
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_text="Button 5"
 android_layout_row="2"
 android_layout_column="0"
 android_layout_margin="5dp" />
 
 

</GridLayout>

Widgets are placed in position specified by android:layout_column and android:layout_row properties.
we can organize the widgets in a similar way by using the new Space View like this:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rowCount="5"
android:columnCount="3"

>

<Space
android:layout_width="5dp"
android:layout_height="5dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_row="0"
android:layout_column="0"
/>
<Space
android:layout_width="5dp"
android:layout_height="5dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_row="0"
android:layout_column="1"
/>
<Space
android:layout_width="5dp"
android:layout_height="5dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_row="1"
android:layout_column="0"
/>
<Space
android:layout_width="5dp"
android:layout_height="5dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4"
android:layout_row="1"
android:layout_column="1"
/>
<Space
android:layout_width="5dp"
android:layout_height="5dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 5"
android:layout_row="2"
android:layout_column="0"
/>
<Space
android:layout_width="5dp"
android:layout_height="5dp"/>


</GridLayout>

Related Posts by Categories