Grid Layout In Android v2.3 (API level 8)

We have seen in a previous post on layouts that Grid layout is applicable to only API greater than 14 . Lets use a trick that allows A grid like structure in API 1-13

What we need ?

1. Just Lots of Linear Layout .
2. ImageButtons

What are we going to do ?
Implement a Grid layout like structure shown in screenshot below which can also be deployed in Android v (1 - 3) .

We are going to make a Grid like structure using Linear Layouts

We will make a structure as shown in the diagram below :

First we save the image used in ImageButton . I have used the image shown below, you can also use the same for practice .

The code for the layout is :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="268dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_marginBottom="20dp"
            android:layout_marginLeft="3dp"
            android:layout_row="0"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/list"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/a"
                android:gravity="center" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_marginLeft="60dp"
            android:layout_row="0"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/notation"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/a"
                android:gravity="center" />

        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="268dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_marginLeft="3dp"
            android:layout_row="1"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/info"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:background="@drawable/a"
                android:gravity="center" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_marginRight="0dp"
            android:layout_marginLeft="60dp"
            android:layout_row="1"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/about"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:background="@drawable/a"
                android:gravity="center" />

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Explanation of the code:

• The LinearLayouts which hold the position of the ImageButtons are written inside other Linear layouts .

• The Layouts outerupper and outerbelow are horizontally oriented which hold the buttons horizontally i.e. aside each other .

• The layout outer is vertically oriented , hence it holds the two layouts(outerupper and outerbelow) vertically i.e. one below each other .

Download the Complete Source Code

Stay Tuned with Made In Android