Home » Android » android – Difference between Frame and Relative layout?

android – Difference between Frame and Relative layout?

Posted by: admin June 15, 2020 Leave a comment

Questions:

I’m new to android programming but from how much I have understood of the layouts from the documentation, RelativeLayout is mostly used when you need the views based on some rules and the FrameLayout when you want to overlap views.

But unfortunately for the following program I get the work of FrameLayout done by using RelativeLayout. I got my work done but for understanding, Am I missing something in the difference?
Also, how did the buttons come over my image? (Even the other image is overlapping.)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/ic_launcher"
    />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_launcher"
    android:layout_alignParentTop="true"
    android:layout_alignLeft="@id/imageView1"
    />

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/imageView1"
    android:gravity="center"
    android:orientation="horizontal"
    android:weightSum="1.0" >

<Button
    android:id="@+id/button1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.33"
    android:text="Login" />

<Button
    android:id="@+id/button2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.33"
    android:text="Register" />

<Button
    android:id="@+id/button3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.33"
    android:text="Try application" />

</LinearLayout>

</RelativeLayout>
How to&Answers:

The RelativeLayout can use :

android:layout_toEndOf="@id/some_view"
android:layout_toStartOf="@id/some_view"
android:layout_above="@id/some_view"
android:layout_below="@id/some_view"

to make sure views lineup correctly in relation to each other. FrameLayout is very similar except it’s only using gravity to put display its views (with no relation).

I would also suggest you to take a look at the ConstraintLayout component. ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It’s similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it’s more flexible than RelativeLayout and easier to use with Android Studio’s Layout Editor.

Answer:

RelativeLayout based on relation of views. It is a layout manager that helps you arrange your UI elements based on some rule. You can specify things like: align this to parents left edge, place this to the left/right of this elements etc.

FrameLayout allows placements along Z-axis. That is you can stack your view elements one above the other.

Answer:

RelativeLayout – As the name suggest in this viewgroup, view are placed relative to each other. Most used property of relativelayout are used are

android:layout_toLeftOf="@id/some_view1"
android:layout_toRightOf="@id/some_view2"
android:layout_above="@id/some_view3"
android:layout_below="@id/some_view4"
android:layout_toendof="@id/some_view5"
android:layout_tostartof="@id/some_view6"

View are placeed relative to each other. It is really helpful while developing complex designed.

FrameLayout – It behaves as a single object view are not placed relative to each but as per to the FrameLayout. FrameLayout takes the size of biggest child view.

android:gravity="center_horizontal|center_vertical|bottom"

Using above property child views position is modified.