{"id":465,"date":"2016-01-09T12:49:03","date_gmt":"2016-01-09T12:49:03","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=465"},"modified":"2019-06-12T07:45:42","modified_gmt":"2019-06-12T07:45:42","slug":"framelayout","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/framelayout","title":{"rendered":"Frame Layout Tutorial With Example In Android Studio"},"content":{"rendered":"

Frame Layout is one of the simplest layout to organize view controls. They are designed to block an area on the screen. Frame Layout should be used to hold child view, because it can be difficult to display single views at a specific area on the screen without overlapping each other.<\/p>\n

We can add multiple children to a FrameLayout and control their position by assigning gravity to each child, using the android:layout_gravity <\/strong>attribute.<\/p>\n

\"Frame<\/center><\/p>\n
\n

Attributes of Frame Layout:<\/strong><\/h4>\n

Lets see different properties of Frame Layout which will be used while designing Android App UI:<\/p>\n

1. android:id<\/span><\/strong><\/p>\n

This is the unique id which identifies the layout in the R.java file.<\/p>\n

Below is the id attribute\u2019s example with explanation included in which we define the id for Frame Layout.<\/p>\n

<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:id=\"@+id\/frameLayout\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\/>\r\n<\/pre>\n
2. android:foreground<\/strong><\/span><\/p>\n
Foreground defines the drawable to draw over the content and this may be a color value. Possible color values can be in the form of “#rgb”, “#argb”, “#rrggbb”, or “#aarrggbb”. This all are different color code model used.<\/p>\n
Example: In Below example of foreground we set the green\u00a0color for foreground of frameLayout so the ImageView and other child views of this layout will not be shown.<\/p>\n
<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n\r\nandroid:id=\"@+id\/framelayout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:foregroundGravity=\"fill\"\r\nandroid:foreground=\"#0f0\"><!--foreground color for a FrameLayout-->\r\n\r\n<LinearLayout\r\nandroid:orientation=\"vertical\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerInParent=\"true\"\r\n>\r\n\r\n<!-- Imageview will not be shown because of foreground color which is drawn over it-->\r\n\r\n<ImageView\r\nandroid:layout_width=\"200dp\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:layout_marginBottom=\"10dp\"\r\nandroid:src=\"@mipmap\/ic_launcher\"\r\nandroid:scaleType=\"centerCrop\"\r\n\/>\r\n\r\n<!--Textview will not be shown because of foreground color is drawn over it-->\r\n\r\n<TextView\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:gravity=\"center_horizontal\"\r\nandroid:text=\"abhiAndroid\"\/>\r\n\r\n<\/LinearLayout>\r\n\r\n<\/FrameLayout>\r\n<\/pre>\n
\"foreground<\/center>Important Note:<\/strong><\/span> On applying android:foregroud feature, all the views taken in the framelayout will goes to the background and the framelayout comes in the foreground i.e. over the views. We can set the @drawable\/image_name or the color in the foreground.<\/p>\n
3. android:foregroundGravity<\/strong><\/span><\/p>\n
This defines the gravity to apply to the foreground drawable. Default value of gravity is fill. We can set values in the form of \u201ctop\u201d, \u201dcenter_vertical\u201d , \u201dfill_vertical\u201d, \u201dcenter_horizontal\u201d, \u201dfill_horizontal\u201d, \u201dcenter\u201d,\u00a0 \u201dfill\u201d, \u201dclip_vertical\u201d, \u201dclip_horizontal\u201d, \u201dbottom\u201d, \u201dleft\u201d or \u201dright\u201d .<\/p>\n
It is used to set the gravity of \u00a0foreground. We can also set multiple values by using \u201c|\u201d. Ex: fill_horizontal|top .Both the fill_horizontal and top gravity are set to framelayout.<\/p>\n
In the above same example of foreground we also set the foregroundGravity of FrameLayout to fill.<\/p>\n
4. android:visibility<\/strong><\/span><\/p>\n
This determine whether to make the view visible, invisible or gone.<\/p>\n
visible –<\/strong> the view is present and also visible<\/p>\n
invisible –<\/strong> The view is present but not visible<\/p>\n
gone –<\/strong> The view is neither present nor visible<\/p>\n
\"Visibility<\/center>5. android:measureAllChildren<\/strong><\/span><\/p>\n
This determines whether to measure all children including gone state visibility or just those which are in the visible or invisible state of measuring visibility. The default value of measureallchildren is false. We can set values in the form of\u00a0 Boolean\u00a0 i.e. “true” OR “false”.<\/p>\n
This may also be a reference to a resource (in the form “@[package<\/em>:]type<\/em>:name<\/em>“) or theme attribute (in the form “?[package<\/em>:][type<\/em>:]name<\/em>“) containing a value of this type.<\/p>\n
Important Note:<\/strong><\/span> If measureallchildren is set true then it will show actual width and height of frame layout even if the views visibility is in gone state.<\/p>\n
The above property has been explained below:<\/p>\n
Example of Frame layout having measureAllChildren attribute:<\/strong><\/p>\n
In the below code the ImageView visibility is set gone and measureAllChildren is set true. The output will show actual height and width the Frame Layout despite visibility is set gone. We have used Toast to display the height and width:<\/p>\n
Below is the Code of activity_main.xml<\/strong><\/p>\n
Important Note:<\/strong><\/span> Make sure you have image in Drawable folder. In our case we have used ic_launcher image which we added in Drawable.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n   android:id=\"@+id\/frame\"\r\n    android:orientation=\"vertical\" android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:measureAllChildren=\"true\"\r\n    >\r\n    <ImageView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:visibility=\"gone\"\r\n        android:src=\"@drawable\/ic_launcher\"\/>\r\n\r\n<\/FrameLayout><\/pre>\n
Below is the code of MainActivity.java<\/strong> . Here we have used Toast to display height and width on screen.<\/p>\n
public class MainActivity extends Activity {\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.demo);\r\n        FrameLayout frame=(FrameLayout)findViewById(R.id.frame);\r\n        frame.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);\r\n        int width = frame.getMeasuredWidth();\r\n        int height = frame.getMeasuredHeight();\r\n        Toast.makeText(getApplicationContext(),\"width=\"+width+\"  height=\"+height,Toast.LENGTH_SHORT).show();\r\n\r\n    }\r\n\r\n}<\/pre>\n
When you run the App in Emulator you will see the below output:<\/p>\n
\"measureAllChildren<\/center>Explanation of Example<\/strong>:<\/span> It measures all the children in the layout. For ex: If we setVisiblity of an view be gone and set measuresAllChildren property to be true, then also it will also count to that view which is not visible, but if we set the measuresAllChildren property to be false, then it will not count to that view which is gone.<\/p>\n
Things To Do Yourself:<\/strong><\/span> Try changing measuresAllChildren value to false and run the App in Emulator. You will see the output shows 0 width and height of Frame Layout.<\/p>\n
\n
Example Of Frame Layout in Android Studio:<\/strong><\/h4>\n
Example 1:<\/strong><\/span> Frame Layout using layout gravity. Here we will put textview at different position in Frame Layout. Below is the code and final output:<\/p>\n
Download Code<\/a> ? <\/a><\/p>\n
\"Frame<\/center>Step 1:<\/strong> Create a new project in Android Studio and name it FrameTesting. (Select File -> New -> New Project. Fill the forms and click “Finish” button)<\/p>\n
Step 2:<\/strong> Now Open res -> layout -> activity_main.xml and add the following code. Here we are putting different TextView in Frame Layout.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\r\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_height=\"match_parent\"\r\n    android:layout_width=\"match_parent\"\r\n    >\r\n    <TextView android:text=\"LeftTop\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\" \/>\r\n    <TextView android:layout_height=\"wrap_content\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:text=\"RightTop\"\r\n        android:layout_gravity=\"top|right\" \/>\r\n    <TextView android:layout_height=\"wrap_content\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:text=\"CentreTop\"\r\n        android:layout_gravity=\"top|center_horizontal\" \/>\r\n    <TextView android:text=\"Left\"\r\n        android:layout_gravity=\"left|center_vertical\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\" \/>\r\n    <TextView android:layout_height=\"wrap_content\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:text=\"Right\"\r\n        android:layout_gravity=\"right|center_vertical\" \/>\r\n    <TextView android:layout_height=\"wrap_content\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:text=\"Centre\"\r\n        android:layout_gravity=\"center\" \/>\r\n    <TextView android:text=\"LeftBottom\"\r\n        android:layout_gravity=\"left|bottom\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\" \/>\r\n    <TextView android:layout_height=\"wrap_content\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:text=\"RightBottom\"\r\n        android:layout_gravity=\"right|bottom\" \/>\r\n    <TextView android:layout_height=\"wrap_content\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:text=\"CenterBottom\"\r\n        android:layout_gravity=\"center|bottom\" \/>\r\n<\/FrameLayout><\/pre>\n
Step 3:<\/strong> Let the MainActivity.java has default Android code or add the below code:<\/p>\n
package abhiandroid.com.frametesting;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n    }\r\n}<\/pre>\n
Output:<\/strong><\/span><\/p>\n
Run the App in Emulator, you will see Textview positioned at various position in FrameLayout<\/p>\n
\"Frame<\/center>Example 2:<\/strong><\/span> Example of A Frame Layout without using layout gravity. Here we will use a image to fill complete screen and then we will write “abhiandroid” text in center of the image. We will do all this inside Frame Layout. Below is the code and final output:<\/p>\n
Download Code<\/a> ? <\/a><\/p>\n
\"Frame<\/center>Step 1:<\/strong> Create a new project and name it FrameWithoutGravity.<\/p>\n
Select File -> New -> New Project in Android Studio. Fill the forms and click “Finish” button.<\/p>\n
Step 2:<\/strong> Now open res -> layout -> activity_main.xml\u00a0and add following code. Here we are designing ImageView and TextView inside Frame Layout.<\/p>\n
Important Note:<\/span><\/strong> Make sure you have an image saved in drawable folder name img_name. If you have saved other image with different name then please change it in the code.<\/p>\n
<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:id=\"@+id\/frameLayout\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\">\r\n    <ImageView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:scaleType=\"fitXY\"\r\n        android:src=\"@drawable\/img_name\" \/><!--Change image as per your name of image saved in drawable-->\r\n    <TextView\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"fill_parent\"\r\n        android:gravity=\"center\"\r\n        android:text=\"abhiAndroid\"\r\n        android:textSize=\"30sp\"\r\n        android:textColor=\"#f3f3f3\"\r\n        android:textStyle=\"bold\" \/>\r\n<\/FrameLayout><\/pre>\n
Step 3:<\/strong> Let the MainActivity.java has default java code or add the below code:<\/p>\n
package abhiandroid.com.framewithoutgravity;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n    }\r\n}<\/pre>\n
Output:<\/strong><\/span><\/p>\n
Now run the App in Emulator and you will see the below output of Frame layout without Gravity:<\/p>\n
\"Frame<\/center>Example 3 (BONUS):<\/strong><\/span> Another Example Of Creating A \u00a0Frame Layout programmatically( i.e. Using Java Class only). Here we will create the same output as above but we won’t use xml. Instead we will use JAVA class. Below is code and final output:<\/p>\n
Download Code<\/a>  ? <\/a><\/p>\n
\"Frame<\/center>Step 1:<\/strong> Create a new project in Android Studio. In our case we created FrameLayoutJAVA.<\/p>\n
Step 2:<\/strong> Just add the following code to your MainActivity.java . Explanation is included in the code as comments.<\/p>\n
package abhiandroid.com.farmelayoutjava;\r\n\r\nimport android.graphics.Color;\r\nimport android.graphics.Typeface;\r\nimport android.os.Bundle;\r\nimport android.app.Activity;\r\nimport android.view.Gravity;\r\nimport android.view.Menu;\r\nimport android.widget.AbsListView;\r\nimport android.widget.FrameLayout;\r\nimport android.widget.ImageView;\r\nimport android.widget.RelativeLayout;\r\nimport android.widget.TextView;\r\n\r\npublic class MainActivity extends Activity {\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        ImageView imageView = new ImageView(this);\r\n        imageView.setImageResource(R.drawable.img_name);\r\n        imageView.setScaleType(ImageView.ScaleType.FIT_XY);\r\n        imageView.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,\r\n                RelativeLayout.LayoutParams.MATCH_PARENT));\r\n        TextView textView1 = new TextView(this);\r\n        textView1.setText(\"abhiAndroid\");\r\n        textView1.setTextSize(30);\r\n        textView1.setGravity(Gravity.CENTER);\r\n        textView1.setTextColor(Color.parseColor(\"#f3f3f3\"));\r\n        textView1.setTypeface(null, Typeface.BOLD);\r\n        textView1.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,\r\n                RelativeLayout.LayoutParams.MATCH_PARENT));\r\n        FrameLayout.LayoutParams lp1 = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT);\r\n        lp1.setMargins(0,20,0,0);\r\n        textView1.setLayoutParams(lp1);\r\n\r\n\/\/Initializing frame layout\r\n\r\n        FrameLayout framelayout = new FrameLayout(this);\r\n        framelayout.setLayoutParams(new AbsListView.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,\r\n                FrameLayout.LayoutParams.MATCH_PARENT));\r\n\r\n\/\/Adding views to FrameLayout\r\n\r\n        framelayout.addView(imageView);\r\n        framelayout.addView(textView1);\r\n        setContentView(framelayout);\r\n    }\r\n\r\n\r\n}<\/pre>\n
Output:<\/strong><\/span><\/p>\n
\"Frame<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
Frame Layout is one of the simplest layout to organize view controls. They are designed to block an area on the screen. Frame Layout should be used to hold child view, because it can be difficult to display single views at a specific area on the screen without overlapping each other. We can add multiple … Continue reading Frame Layout Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-465","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"Frame Layout Tutorial With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Tutorial on Frame Layout with lots of examples in Android Studio using XML and JAVA. Also find details about attributes and views used inside Frame Layout.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/framelayout\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=465"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/465\/revisions"}],"predecessor-version":[{"id":2784,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/465\/revisions\/2784"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}