Kotlin Android App Development Course, Overlapping Layout – FrameLayout

1. Introduction

One of the various layouts used in Android app development, FrameLayout is
suitable for stacking views on top of each other.
This allows for the creation of complex UI effects by layering or overlaying views.
In this article, we will explore the basic concept and usage of FrameLayout,
and how to utilize this layout through actual Kotlin application examples.

2. Basic Concept of FrameLayout

FrameLayout is the simplest form of layout, aligning child views to the top-left corner,
and any additional child views are stacked on top of the previous views.
This advantage allows multiple views to be displayed in an overlapping manner, but
there are limitations in controlling the size and position of the views.
Therefore, FrameLayout is mainly used when applying simple UI components or overlays.

The advantage of FrameLayout is that it allows easy overlapping of views, while the disadvantage is
that its structure can be complex for managing multiple views efficiently.
Generally, FrameLayout is used when the overall layout is simple and suitable for such cases.

3. Using FrameLayout

FrameLayout can be easily declared in an XML layout file.
Below is an example of stacking multiple views using FrameLayout.

                <!--[CDATA[
                <FrameLayout
                    xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"-->

                    <imageview android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/sample_image">

                    <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Overlapping Text" android:layout_gravity="center" android:textcolor="#FFFFFF" android:textsize="20sp">

                
                ]]&gt;</textview></imageview>
            

The code above illustrates stacking a TextView over an ImageView.
The ImageView fills the entire screen, while the TextView is positioned centrally.

Here, the android:layout_gravity="center" property sets
the text to be positioned in the center of the FrameLayout.

4. Example of Using FrameLayout with Kotlin

Now we will create a simple Android application using FrameLayout with Kotlin.
The example below includes a simple feature that changes the text upon a button click.

                <!--[CDATA[
                class MainActivity : AppCompatActivity() {

                    private lateinit var textView: TextView

                    override fun onCreate(savedInstanceState: Bundle?) {
                        super.onCreate(savedInstanceState)
                        setContentView(R.layout.activity_main)

                        textView = findViewById(R.id.textView)

                        val button: Button = findViewById(R.id.button)
                        button.setOnClickListener {
                            textView.text = "Button has been clicked!"
                        }
                    }
                }
                ]]&gt;</code-->