Loading ...

Working with Frame Layout in android applications | CodeAsp.Net

Working with Frame Layout in android applications

 /5
0 (0votes)

You might have noticed at times that there are different overlapping widgets or same widgets in just one activity page i.e. one item on another for e.g. you cannot place a “TextView” above another “TextView” or place an “ImageView” below a “TextView” i.e. display both of them. This is not possible with any other layout. But in the “FrameLayout” you can do that too. You must have seen something similar to this on your home screen where different widgets are displayed on the screen one above the other. I am not implying that they use the same approach; however this could surely be done this way.

The major advantage of a “Frame Layout” and its usage lies in the fact that it places the elements in a stack, which means that when some widgets are added into it they are added in the stack format i.e. the widgets are placed one above the other and the first one added is placed at the bottom.
Examples: You can have a background in your application using an "ImageView" with certain buttons to perform some funtions on top of the background, you can have an "ImageButton" which the user can click to get a date time picker etc. All this can be achieved using the “FrameLayout”.

Many a times the “FrameLayout” is used to display only one view.

NOTE: While using “FrameLayout” to display multiple widgets, developers should take special care of the order in which the widgets or orders are to be displayed.

As mentioned above, one can create a “FrameLayout” via code or xml file.

Here, we will first create a layout via code and then via the xml file. The reason for this approach is to show you how to work through the code first and then using the xml, because as you must have understood with the above information that “FrameLayout” places widgets one above the other which is very different as compared to the more commonly used layouts such as “RelativeLayout” or the “LinearLayout” which place the widgets adjacent to each other.

Steps to create an android application that uses the “FrameLayout” via code are:

1. Create an android studio project and name it as "Frame Layout", and set the company domain as "codeasp.frame_layout.com". Click next.

2. Now select the minimum SDK as 18(Jelly Bean 4.3) and leave all other fields as they are and click next.

3. Select the activity as Blank Activity and click next.

4. Leave all the fields as default and click next.

5. Now open the java file “MainActivity.java” and add the following code which adds a frame layout.

package com.frame_layout.codeasp.framelayout;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
        TextView textView = new TextView(this);
        textView.setText("Brown Bubbles Image");
        textView.setTextSize(30);
        textView.setTextColor(Color.WHITE);

        TextView textView1 = new TextView(this);
        textView1.setTextSize(20);
        textView1.setGravity(Gravity.RIGHT);
        textView1.setGravity(Gravity.BOTTOM);
        textView1.setText("About: 82kb Size");
        textView1.setTextColor(Color.BLUE);

        ImageView imageView = new ImageView(this);
        imageView.setImageResource(R.drawable.bubbles);
        imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);

        FrameLayout frameLayout = new FrameLayout(this);
        frameLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
        frameLayout.addView(imageView);
        frameLayout.addView(textView);
        frameLayout.addView(textView1);
        setContentView(frameLayout);

    }
}

Explanation of the above code:
This is the whole code if you want to add the "FrameLayout" programatically.
You can directly run this code and you will get your desired output without any errors and display will look fine.
In the "onCreate" method I have commented the "setContentView(R.layout.activity_main)"; however I have added the same in the last line with a different parameter. This is done because we want to add the whole "FrameLayout" programatically and we do not need the xml file.

Now lets take a look at the "TextView"; instead of connecting it with the "TextView" created in the xml file we have just created an object using "this" and we have defined its properties which define its look and place on the screen.

Next, I have defined some properties of the "TextView" which will give it a basic look, they are:

1. setTextSize() which is an alternative to xml's 'android:textSize="30sp"'; but here setTextSize() sets the value in pixels.

2. setText() is an alternative to xml's 'android:text="Brown Bubbles Image"'; here we need to put all the text in double quotes("") or alternatively we can also get the string data from the strings file using the following code:

textView.setText(R.string.brown_bubbles_string);

This will do the same.

3. setTextColor() is an alternative to xml's 'android:textColor="#FFFFFF".

4. We can also set the "Gravity" of the widget and other properties too.

The same applies to "ImageView" also.

In the "ImageView" we have defined some different properties which I would like to explain.

1. setImageResource(): Here I have set the resource that I have saved in my Drawable folder. You can set it dynamically or from internal storage or external storage and also from the internet. This is the alternative to 'android:src="@drawable/bubbles"'.

2. setLayoutParams(): This is the alternative to 'android:layout_width="fill_parent"' and 'android:layout_height="fill_parent"'.

3. setScaleType(): This is an alternative to 'android:scaleType="fitXY"'. This means that using the FILL method which is responsible to scale the image with respect to X and Y so as it fits the screen in which the image is displayed.

Now we create the most impotant element that is the "FrameLayout".

Here again I have created an object of "FrameLayout".

After this, I have set the screen space it will take. I have only one layout i.e. "FrameLayout"; so this will be the parent layout and the whole space will be given to this layout. Hence, we could have also used "MATCH_PARENT" instead of "FILL_PARENT".

Next, I have used "add_view" which is used to add the view's or the objects(Widgets) to the current view as children of the current view.

Check the order in which I have added the Views as this is the order in which the widgets will be displayed. The one added first will be at the last position in the stack and so on. So to make it clear the "ImageView" we have added is going to be the last element of the stack and the "TextView" with id "textView1" will be on the top and the "TextView" with id "textView" will be in the middle.

Please check the defination of ViewGroup and ViewGroup.LayoutParams from the following links:

1. ViewGroup

2. ViewGroup.LayoutParams

Application screen shot:




If you want to create a "FrameLayout" via the xml file please add the following code; this is a very basic layout with a simple change that the parent layout is not "RelativeLayout" or "LinearLayout" but "FrameLayout".

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bubbles" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Brown Bubbles Image"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#FFFFFF"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start|bottom"
        android:text="About: 82kb Size"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#FF0099CC"
        android:textSize="20sp" />
</FrameLayout>

Please Note: The oder in which you define the "Widgets" is very important as they will be placed accordingly; the first one at the bottom position and so on, so the  "ImageView" here also will be at the bottom most position or the last position. To attach this xml file to the java file we have to make changes to our exsisting "MainActivity.java" file, the code for that is:

package com.frame_layout.codeasp.framelayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


public class MainActivity extends AppCompatActivity {

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

Application screen shot:

Comments (3)

   
Jack Ramon

Quite Researched. Love the article

12/7/2016
 · 
by
   
Charli Tyson

May I simply just say what a relief to discover someone that actually knows what they are talking about online.

4/17/2017
 · 
by
   
go here

Working with frame layout in android devices is not that much difficult now. Because, now technology is growing up that much which eases people in variety of ways. And now, learning and doing programming of these layouts is no longer remains difficult.

4/20/2017
 · 
by
  • :*
  • :*
  • :
 *

Top Posts