Skip to main content

Using FrameLayout for designing XML Layouts in Android.

In Android app development, there are many Layout Managers which help you arrange(layout) UI elements on the screen. This eases the development process of apps while keeping the layout and logic completely separate. For e.g. ,

  • LinearLayout arranges elements side by side either horizontally or vertically.
  • RelativeLayout helps you arrange your UI elements based on specific rules. You can specify rules like: align this to parent’s left edge, place this to the left/right of this elements etc.
  • AbsoluteLayout is for absolute positioning i.e. you can specify exact co-ordinates where the view should go.
  • TableLayout, we create a table with rows and columns and place elements within them. In each row, you can specify one or more elements.The table row is created using the tag inside the TableLayout.
  • FrameLayout allows placements of views along Z-axis. That means that you can stack your view elements one above the other. These are used less often than some other layouts, simply because they are generally used to display only one view, or views which overlap. The size of the FrameLayout is the size of its largest child (plus any padding).

Let us consider that, we have to create the following view/design for our app.

As you can see in the image, there are multiple views here, which are on top of each other with their respective layout positions (i.e. for e.g. the image saying “What if your peers decide your bonus” is on top of the background image and is positioned at bottom). To achieve this design we can
create an XML layout file and use the below code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <FrameLayout
        android:id="@+id/imageviewlayout"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:paddingBottom="2dp"
        android:paddingLeft="2dp"
        android:paddingRight="0dp"
        android:paddingTop="2dp" >

        <ImageView
            android:id="@+id/linearlayoutforFeatureImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="1dp"
            android:adjustViewBounds="true"
            android:background="@drawable/yourMainImage"
            android:clickable="true"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/sectionText"
            android:layout_width="wrap_content"
            android:layout_height="24dip"
            android:background="@drawable/yourBackGroundImage"
            android:gravity="center_vertical"
            android:paddingLeft="10dip"
            android:paddingRight="10dp"
            android:text="Action Resource Series"
            android:textColor="#bbbbbb"
            android:textSize="12sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/homescreennew_textProductDetailFeatureID"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
           android:layout_gravity="bottom"
            android:layout_marginBottom="-1dp"
            android:layout_marginTop="10dip"
            android:background="@drawable/yourBackGroundImage"
            android:gravity="center_vertical"
            android:maxLines="2"
            android:paddingLeft="10dip"
            android:paddingRight="10dp"
            android:text="What If Your Peers Decide Your Bonus"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/arrowimageFeatureID"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="32dip"
            android:layout_marginRight="5dip"
            android:gravity="center_vertical"
            android:src="@drawable/list_arrow" />
    </FrameLayout>

</RelativeLayout>
Here, the frame layout is used as a container, with all the other child views inside it. Child views are drawn in a stack, with the most recently added child on top. You can, however, control their position within the FrameLayout by assigning gravity to each child, using the
android:layout_gravity attribute.
The android:layout_gravity attribute used here will help you understand how to position the child views according to the requirement shown above.
You can also define a FrameLayout programmatically, as follows,
public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        TextView tv1 = new TextView(this);
        tv1.setText("Action Resource Series");
        tv1.setTextSize(YourSize);
        tv1.setTextColor(Color.BLACK);

        TextView tv2 = new TextView(this);
        tv2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
                LayoutParams.WRAP_CONTENT, Gravity.BOTTOM));
        tv2.setTextSize(50);
        tv2.setGravity(Gravity.BOTTOM);
        tv2.setText("What If Your Peers Decide Your Bonus");
        tv2.setTextColor(Color.WHITE);

        ImageView iv1 = new ImageView(this);
        iv1.setImageResource(R.drawable.yourImage);
        iv1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
        LayoutParams.FILL_PARENT));
        iv1.setScaleType(ScaleType.MATRIX);

        ImageView iv2 = new ImageView(this);
        iv2.setImageResource(R.drawable.yourImage);
        iv2.setGravity(Gravity.BOTTOM);
        iv2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
        LayoutParams.FILL_PARENT));
        iv1.setScaleType(ScaleType.MATRIX);

        FrameLayout fl = new FrameLayout(this);
        fl.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
        LayoutParams.FILL_PARENT));
        fl.addView(iv1);
        fl.addView(iv1);
        fl.addView(tv1);
        fl.addView(tv2);
        fl.addView(iv2);
        setContentView(fl);

    }

Thus, the FrameLayout allows developers to display either a single or multiple UI elements within FrameLayout. Each element will be positioned based on the top left of the screen, and elements that overlap each other will be displayed overlapping.

Comments

Popular posts from this blog

Android Bar Chart Using MpAndroidChart Library Tutorial

https://www.numetriclabz.com/android-bar-chart-using-mpandroidchart-library-tutorial/ Android Bar Chart Using MpAndroidChart Library Tutorial Objective In this tutorial we learn how to implement Bar Chart using MpAndroidChart Library in your Android App. Download Source Code       Step 1 Contents ·        1  Introduction ·        2  Creating Bar chart o    2.1  Create a new Project o    2.2  Adding library in Project o    2.3  Create Layout o    2.4  To Plot Bar Chart §   2.4.1  Initialize the graph id §   2.4.2  Creating a Dataset §   2.4.3  Defining X-axis labels §   2.4.4  Set the data §   2.4.5  Add the description to the chart §   2.4.6  Run your App § ...

Circular Button with Icon and Text in Android

Circular Button with Icon and Text in Android Rounded android button can be used for many purposes to make awesome application. We can see many applications that have used circle button or rounded corner. In this tutorial, I am going to show how to make circular android button and to add icons/images and text in the same button. To make circular button in android app, you don’t need any java code, this can be done by using only XML. Rounded button can also be created by using java code but it is time consuming and need to have advance knowledge of java programming. Here you will learn to make circular/rounded corner button using XML only. Related: Android Button with Icon and Text Adding Badge (Item Count) to Android Button Android Switch Button Example Android Example: How to Create Circular Button with Icon and Text in Android First you have to create a new XML file in drawable folder to make rounded button. In this file I have made a rectangle and gave border radius to ma...

how to retrieve image from sqlite database in android and display in listview

 Android platform provides several ways to store data in our application. 1. SQLite database 2. SharedPreferences etc For our post, we will only work with SQLite database. First and foremost, we need to understand what an SQLite database is? SQLite database  is an open source SQL database that stores data to a text file on a device. It executes SQL Commands to perform a set of functions, that is, create, read, update and delete operations. On my previous post, I showed how to  store data in SQLite database from edit text, retrieve and populate it in a listview . For this post, I will show the SQLite CRUD operations with images from gallery and text from EditText. We need to understand this; images are stored in SQLite database as BLOB data type. A BLOB is a large binary object that can hold a variable amount of data.  Note, we can only store images in the database as BLOB data type. We need to convert our image path to a bitmap th...