Understanding FrameLayout and GridLayout

We have discussed most basic layouts in last post.Now lets discuss FrameLayout and GridLayout in this post.
So lets get started!!!






FrameLayout

FrameLayout is one of the useful layout provided by android system, which allows User Interface widgets to be overlapped with each other.
Frame Layout represents a simple layout for the user interface of Android applications. It is usually used for displaying single Views at a specific area on the screen or overlapping its child views.

The Linear Layout and RelativeLayout places the views adjacent to each other but, if you have to develope something as shown in the screenshot below, where the TextViews are placed on top of an ImageView. It is quite impossible to achieve using LinearLayout or RelativeLayout.So we use FrameLayout to achieve this

Capture

Here are the steps to achieve this with FrameLayout
1.Open your project
Android> app > java >package
2.Right click and create a new Activity>Blank Acitivty. Name it for example ” FrameLayout.java”
3.Corresponding XML file will be created by name “activity_frame_layout.xml”
4.Add a image named image.jpg in your res/drawable folder
5.Open the xml file and type the following code.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/photo" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:background="#00000c"
        android:padding="10dp"
        android:text="Fanny Hands Lane, London"
        android:textColor="#fafafa"
        android:textSize="22sp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_marginLeft="5dp"
        android:background="#AA000000"
        android:padding="10dp"
        android:text="26/Jan/2014"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />

</FrameLayout>

6. now set the layout to your activity. you can do that by calling setContentView(layoutID) method inside onCreate(). Your activity code should look something similar to the following code snippets.

//Your activity class
public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

7.Run the code.
Now you will see the output as show in screenshot above.






GridLayout

A GridLayout object places components in a grid of cells. Each component takes all the available space within its cell, and each cell is exactly the same size.
The number of rows and columns within the grid can be declared using the android:rowCount and android:columnCount properties. Typically, however, if the number of columns is declared the GridLayout will infer the number of rows based on the number of occupied cells making the use of the rowCount property unnecessary.

Similarly, the orientation of the GridLayout may optionally be defined via the android:orientation property.

The following example XML declares a 2 x 2 GridLayout configuration in horizontal orientation:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:rowCount="2"
    android:orientation="horizontal"
    tools:context=".GridXMLActivity" >
</GridLayout>

Here are the steps to work with GridLayout
1.Open your project
Android> app > java >package
2.Right click and create a new Activity>Blank Acitivty. Name it for example ” GridLayout.java”
3.Corresponding XML file will be created by name “activity_grid_layout.xml”
4.Open the xml file and type the following code.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:rowCount="2"
    android:orientation="horizontal"
    tools:context=".GridXMLActivity" >
    <Button
        android:id="@+id/button1"
        android:layout_gravity="left|top"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_gravity="left|top"
        android:text="Button" />
    
    <Button
        android:id="@+id/button3"
        android:layout_gravity="left|top"
        android:text="Button" />
    
    <Button
        android:id="@+id/button4"
        android:layout_gravity="left|top"
        android:text="Button" />   
</GridLayout>

5.Run the project
Child views can be added to a GridLayout by declaring the elements within the structure in the XML file. If no row and column values are declared for a child it is positioned automatically by the GridLayout class based on the configuration of the layout and the position of the view in the XML file. The above XML places four buttons within the above GridLayout, with each view placed in the top left hand corner of the encapsulating cell
Gridlayout_xml_layout

Thank you.Stay tuned for more topics!!!