Android User Interface Design: Frame Layouts & Absolute layout

Frame Layout Tutorial (Android UI)

Frame layouts are one of the simplest layout types used to organize controls within the user interface of an Android application.

Understanding layouts is important for good Android application design. In this tutorial, you learn all about frame layouts, which are primarily used to organize individual or overlapping view controls on the screen. When used correctly, frame layouts can be the fundamental layout upon which many interesting Android application user interfaces can be designed.

Let’s say we have a frame layout that is sized to control the entire screen (in other words, layout_width and layout_height attributes are both set to match_parent). We could then add three child controls to this frame layout:

use the framed.xml at mainactivity as 

 setContentView(R.layout.framed);  

/res/layout/framed.xml

==>>

<?xml version="1.0" encoding="utf-8"?>  

<FrameLayout  

    xmlns:android="http://schemas.android.com/apk/res/android"  

    android:layout_width="fill_parent"  

    android:layout_height="fill_parent">  

    <ImageView  

        android:id="@+id/ImageView01"  

        android:layout_height="fill_parent"  

        android:layout_width="fill_parent"  

        android:src="@drawable/lake"  

        android:scaleType="matrix"></ImageView>  

    <TextView  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:textColor="#000"  

        android:textSize="40dp"  

        android:text="@string/top_text" />  

    <TextView  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:text="@string/bottom_text"  

        android:layout_gravity="bottom"  

        android:gravity="right"  

        android:textColor="#fff"  

        android:textSize="50dp" />  

</FrameLayout>  

• An ImageView with a picture of a lake.
• A TextView with some text to display towards the top of the screen.
• A TextView with some text to display towards the bottom of the screen (Simply use the layout_gravity attribute to have the TextView “sink” to the bottom of the parent).

Absolute Layout Tutorial (Android UI)

The absolute layout enable us to specify the exact location (x/y coordinates) of its children. Absolute layouts are less flexible and harder to maintain than other types of layouts without absolute positioning. Please see the following XML layout to understand absolute layout.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    
    <Button 
        android:layout_width="188dp"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_x="130px"
        android:layout_y="390px"
        />
    
     <Button 
        android:layout_width="113dp"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_x="13px"
        android:layout_y="390px"
        />
    
</AbsoluteLayout>