In this tutorial we’ll dive into Android FrameLayout and Android AbsoluteLayout. This is the second tutorial in the layout series, earlier we looked into Android LinearLayout and RelativeLayout examples.
Android FrameLayout
Android FrameLayout is one of the useful layouts provided by android system, which allows User Interface widgets to be overlapped with each other. It’s used in cases such as placing a TextView over an ImageView. This becomes quite difficult to implement using LinearLayout or RelativeLayout since they place widgets adjacent to each other.
FrameLayout is designed to display a single item at a time. We can have multiple elements within a FrameLayout but each element will be positioned based on the top left of the screen. In FrameLayout, all the child views added are placed like stack. The most recent added are shown on top. Hence the order of elements in the layout is of importance.
FrameLayout Attributes
Following are the most important attributes used in this layout:
- android:id : This is the ID which uniquely identifies the layout
- android:foreground : This defines the drawable to draw over the content and possible values may be a color value, in the form of “#rgb”, “#argb”, “#rrggbb”, or “#aarrggbb”
- android:foregroundGravity : Defines the gravity to apply to the foreground drawable. The gravity defaults to fill. Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc
- android:measureAllChildren : Determines whether to measure all children or just those in the VISIBLE or INVISIBLE state when measuring. Defaults to false
Some important points to note:
- FrameLayout can become more useful when elements are hidden and displayed programmatically
- If the gravity is not set then the text would have appeared at the top left of the screen
The xml layout is given below:
layout_frame.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="https://schemas.android.com/apk/res/android"> <ImageView android:src="https://www.journaldev.com/9525/@android:drawable/alert_dark_frame" android:scaleType="fitCenter" android:layout_height="fill_parent" android:layout_width="fill_parent"/> <TextView android:text="JournalDev.com" android:textSize="24sp" android:textColor="#ffff" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center"/> </FrameLayout> |
Here we’ve placed a TextView over an ImageView. Isn’t it simple when compared to a RelativeLayout!
Android AbsoluteLayout
Android AbsoluteLayout is used when the UI components on screen are positioned at their absolute positions with respect to the origin at the top left corner of the layout. We need to specify the x and y coordinate position of each component on the screen. This is not recommend since it makes the UI inflexible, in fact AbsoluteLayout is deprecated now. The xml layout code below shows an AbsoluteLayout implementation.
layout_absolute.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<AbsoluteLayout xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/next" android:text="Next" android:layout_x="10px" android:layout_y="5px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_x="19dp" android:layout_y="74dp" android:text="First Name" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:layout_x="140dp" android:layout_y="54dp" android:width="300px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_x="22dp" android:layout_y="137dp" android:text="Last Name" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:layout_x="143dp" android:layout_y="117dp" android:width="300px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </AbsoluteLayout> |
Here layout_x and layout_y attributes specify the absolute positions of the components. width attribute is used to specify the EditText width.
Project Structure
Android FrameLayout AbsoluteLayout Code
The MainActivity displays the absolute layout which consists of a Button which is used to launch the SecondActivity via intent and display a FrameLayout. There codes are given below and are self explanatory:
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
package com.journaldev.layoutsparttwo; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends Activity { Button next; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_absolute); next=(Button)findViewById(R.id.next); next.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent= new Intent(MainActivity.this,SecondActivity.class); startActivity(intent); } }); } @Override public void onBackPressed() { finish(); } } |
The MainActivity overrides the onBackPressed() method to finish the activity when back is pressed.
SecondActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
package com.journaldev.layoutsparttwo; import android.app.Activity; import android.os.Bundle; public class SecondActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_frame); } @Override public void onBackPressed() { super.onBackPressed(); } } |
In the above code onBackPressed takes us back to the most recent activity present in the stack i.e. MainActivity.
Below is our application in action in android emulator. We have displayed an absolute layout with a predefined width of EditText and then a frame layout with a TextView placed over a drawable ImageView.
This brings an end to this tutorial. You can download the Android FrameLayout AbsoluteLayout Project from the below link.