Easy Tutorial
❮ Cpp Const Keyword Linux Autologin Shell ❯

2.2.4 FrameLayout (Frame Layout)

Category Android Basic Tutorial

Introduction to This Section

FrameLayout (Frame Layout) can be considered the simplest of the six major layouts. This layout simply creates an empty area on the screen. When we add controls to it, they are, by default, placed at the top-left corner of this area. However, this layout does not have any positioning methods, so its applications are limited. The size of the FrameLayout is determined by the largest child control within it. If the sizes of the controls are the same, then only the topmost component can be seen at any given time! Subsequently added controls will cover the previous ones! Although the controls are placed at the top-left corner by default, we can also specify other positions through the layout_gravity attribute! In addition to demonstrating a simple example, this section also brings two interesting examples for those who are interested!

1. Common Attributes

There are only two attributes for FrameLayout, but before we discuss them, let's introduce one thing:

Foreground Image: The image that is always on top of the FrameLayout, facing the user, is the image that will not be covered.

Two attributes:

2. Example Demonstration

1) The Simplest Example

Running effect picture:

The implementation code is as follows:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/FrameLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    tools:context=".MainActivity"     
    android:foreground="@drawable/logo"    
    android:foregroundGravity="right|bottom">    

    <TextView    
        android:layout_width="200dp"    
        android:layout_height="200dp"    
        android:background="#FF6143" />    
    <TextView    
        android:layout_width="150dp"    
        android:layout_height="150dp"    
        android:background="#7BFE00" />    
     <TextView    
        android:layout_width="100dp"    
        android:layout_height="100dp"    
        android:background="#FFFF00" />    

</FrameLayout>

Code Analysis: It's very simple, three TextViews set different sizes and background colors, covering each other in sequence, followed by the foreground image in the lower right corner. The foreground image is set by android:foreground="@drawable/logo" to set the foreground image, android:foregroundGravity="right|bottom" to set the position of the foreground image in the lower right corner.

2) The Cute Girl Moving with Finger Touch

Effect picture as follows:

Implementation process analysis:

Layout code: main_activity.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/mylayout"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    tools:context=".MainActivity"    
    android:background="@drawable/back" >    
</FrameLayout>

Custom MeziView.java

package com.jay.example.framelayoutdemo2;  

import android.content.Context;  
import android.graphics.Bitmap;  
import android.graphics.BitmapFactory;  
import android.graphics.Canvas;  
import android.graphics.Paint;  
import android.view.View;  

public class MeziView extends View {  
    //Define related variables, in order, the
Step 4: In the onCreate() method, create a new Timer object, override the run method, and send an empty message to the handler every 170 milliseconds.

**Implementation Code is as follows:**

**Layout file: main_activity.xml:**

```xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/myframe"    
    android:layout_width="wrap_content"    
    android:layout_height="wrap_content"     
    android:foregroundGravity="center">    
</FrameLayout>

MainActivity.java:

package com.jay.example.framelayoutdemo3;    

import java.util.Timer;    
import java.util.TimerTask;    
import android.os.Bundle;    
import android.os.Handler;    
import android.os.Message;    
import android.view.View;    
import android.view.View.OnClickListener;    
import android.widget.FrameLayout;    
import android.app.Activity;    
import android.graphics.drawable.Drawable;    

public class MainActivity extends Activity {    
    // Initialize variables, frame layout    
    FrameLayout frame = null;    
    // Define a custom handler object for periodically updating the UI interface    
    Handler handler = new Handler()    
    {    
        int i = 0;    
        @Override    
        public void handleMessage(Message msg) {    
        // Determine if the message is sent by this application    
            if(msg.what == 0x123)    
            {    
                i++;    
                move(i % 8 );    
            }    
            super.handleMessage(msg);    
        }    
    };          

    // Define a method to switch images when walking    
    void move(int i)    
    {    
        Drawable a = getResources().getDrawable(R.drawable.s_1);    
        Drawable b = getResources().getDrawable(R.drawable.s_2);    
        Drawable c = getResources().getDrawable(R.drawable.s_3);    
        Drawable d = getResources().getDrawable(R.drawable.s_4);    
        Drawable e = getResources().getDrawable(R.drawable.s_5);    
        Drawable f = getResources().getDrawable(R.drawable.s_6);    
        Drawable g = getResources().getDrawable(R.drawable.s_7);    
        Drawable h = getResources().getDrawable(R.drawable.s_8);    
        // Set the foreground image through setForeground    
        switch(i)    
        {    
            case 0:    
                frame.setForeground(a);    
                break;    
            case 1:    
                frame.setForeground(b);    
                break;    
            case 2:    
                frame.setForeground(c);    
                break;    
            case 3:    
                frame.setForeground(d);    
                break;    
            case 4:    
                frame.setForeground(e);    
                break;    
            case 5:    
                frame.setForeground(f);    
                break;    
            case 6:    
                frame.setForeground(g);    
                break;    
            case 7:    
                frame.setForeground(h);    
                break;    
        }    
    }    

    @Override    
    protected void onCreate(Bundle savedInstanceState) {    
        super.onCreate(savedInstanceState);    
        setContentView(R.layout.activity_main);    

        frame = (FrameLayout) findViewById(R.id.myframe);    
        // Define a timer object to send periodic messages to the handler    
        new Timer().schedule(new TimerTask() {    

            @Override    
            public void run() {    
                // Send an empty message to notify the system to change the foreground image    
                handler.sendEmptyMessage(0x123);    
            }    
        }, 0,170);     
    }    
}

Code Analysis: The code is quite simple, defining a handler object to refresh the foreground image of the frame layout, defining a Timer to send timed messages every 170 milliseconds, i++;move(i%8); because we use 8 images as the animation material!

Code Download: FrameLayoutDemo3.zip

Summary of This Section

This section introduced FrameLayout, mainly mastering the use of the foreground and foregroundGravity properties! Frame layout is used a bit more than the previous table layout! If you are interested, you can try writing some small examples like the author!

❮ Cpp Const Keyword Linux Autologin Shell ❯