Inflate Layout at Runtime in Kotlin Android

In this article, you will learn how to inflate one layout in another at Runtime using Kotlin in Android. To populate very few items, we can embed or inflate them on runtime. But for a long list, its always better to use RecyclerView. Following is the basic code to inflate one layout in another in Kotlin.

var itemsLayout: LinearLayout = findViewById(R.id.layout_items)
val view = layoutInflater.inflate(R.layout.item_child, null)
val tvItem: TextView = view.findViewById(R.id.tv_item) // Here you can access all views inside your child layout and assign them values
itemsLayout.addView(view)

Example

Inflate one layout in another at Runtime in Kotlin
Inflate one layout in another at Runtime in Kotlin

As you can see in the above screenshot, we will add items layout in our main layout at runtime.

Video Tutorial

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <LinearLayout
        android:id="@+id/layout_items"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- item_child layout will be populated here at runtime-->

    </LinearLayout>
</RelativeLayout>

item_child.xml

This is the layout that is going to be inflated in a LinearLayout, present above.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/tv_item"
android:layout_width="match_parent"
android:layout_height="50dp"
tools:text="Item"
android:textSize="18sp"
android:gravity="center"
android:background="#0000ff"
android:layout_marginTop="10dp"
android:textColor="#fff"/>

</LinearLayout>

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.LinearLayout
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // Inflate layout at runtime
        var itemsLayout: LinearLayout = findViewById(R.id.layout_items)

        for (i in 1..4) {
            val view = layoutInflater.inflate(R.layout.item_child, null)
            val tvItem: TextView = view.findViewById(R.id.tv_item)
            tvItem.setText("Item " + i)
            itemsLayout.addView(view)
        }
    }
}

That’s it. Enjoy 🙂

For other helping, code snippets have a look at our Android Articles List.

Please share this post:
Native Mobile Application Developer (Android + IOS) having experience in Java, Swift, Kotlin, Objective C, Unity, C#, C/C++, NODE JS & PHP.

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: