Android ViewStub Using Kotlin With Example

Greetings!
We have recently published 100+ articles on android tutorials with kotlin and java. If you need, you may visit Android Tutorial for beginners page. You can also check Kotlin Tutorial for beginners. Also, if you are interested in content writing, you can mail us at tutorialwing@gmail.com.

Hello Readers! In this post, we are going to learn about android viewStub using kotlin in any android application. We will also learn about different attributes of android viewStub that can be used to customise this widget.

Output

Tutorialwing Kotlin ViewStub Output Android ViewStub Using Kotlin Tutorial With Example

Tutorialwing Kotlin ViewStub Output

Getting Started

Android ViewStub can be defined as below –

ViewStub is invisible, zero-sized view that are used to inflate layout resource at run time.

Different Attributes of Android ViewStub Widget

Some of the popular attributes of android ViewStub widget are –

Sr. XML Attributes Description
1 android:inflatedId Defines id of the inflated view by viewStub
2 android:layout Provides identifier of the layout resource to inflate when viewStub is visible or forced to do so(by calling inflate() method)

Some of the popular attributes of android viewStub inherited from View are –

Sr. XML Attributes Description
1 android:alpha Defines alpha of the view
2 android:background Defines background of the view
3 android:focusable Defines whether view can take focus or not
4 android:id Defines unique identifier of the view
5 android:padding Defines padding of view
6 android:visibility Defines whether this view is visible or not



Example of Android ViewStub Using Kotlin

At first, we will create android application. Then, we will use viewStub using kotlin in the application.

1. Creating New Project in Kotlin

Follow steps below to create new project. Please ignore the steps if you have already created the project.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as ViewStub. Then, check Include Kotlin Support and click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. You will get a newly created project successfully if you have followed steps properly.

Since we have a project now, we will modify xml and other files to use viewStub using kotlin in the application.

2. Modify values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">ViewStub</string>
	<string name="hide">HIDE</string>
	<string name="show">SHOW</string>
	<string name="sub_view">This view is inflated by ViewStub by calling either inflate() or setVisibility(true) method</string>
</resources>

Now, we will create views that replaces viewStub when inflate() method is called. So, create an xml file, sub_item.xml, in res/layout folder.

3. Create View That Replaces ViewStub on inflate() Call

Open res/layout/sub_item.xml file and add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@android:color/holo_blue_light"
	android:gravity="center"
	android:padding="10dp">

	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:gravity="center"
		android:text="@string/sub_view"
		android:textColor="@android:color/black"
		android:textSize="18sp"/>

</LinearLayout>

4. Use ViewStub Widget in xml file

Open src/main/res/layout/activity_main.xml file and add below code into it.

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

	<Button
		android:id="@+id/button"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/hide"/>

	<ViewStub
		android:id="@+id/viewStub"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout="@layout/sub_item"/>

</LinearLayout>

In activity_main.xml file, we have defined viewStub widget. android:layout=”” is used to set layout resource that replaces viewStub when inflate() is called. Now, we access this widget in kotlin file to perform some operations on it.

5. Access ViewStub Widget in Kotlin file

Open src/main/java/com.tutorialwing.viewstub/MainActivity.kt file and add below code into it.

package com.tutorialwing.viewstub

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.View
import android.view.ViewStub
import android.widget.Button

class MainActivity : AppCompatActivity() {

    private var isViewInflated = true // Default state that represents viewStub has been replaced by sub view

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

        val viewStub = findViewById<ViewStub>(R.id.viewStub)
        viewStub.visibility = View.VISIBLE // or you can use viewStub.inflate()

        val button = findViewById<Button>(R.id.button)
        button?.setOnClickListener {
            isViewInflated = !isViewInflated
            viewStub.visibility = if (isViewInflated) View.VISIBLE else View.GONE
            button.text = if (isViewInflated) getString(R.string.hide) else getString(R.string.show)
        }
    }
}

We have accessed viewStub using kotlin file (i.e. MainActivity.kt file). Then, we have set visibility to inflate defined layout resource. After that, we have also set click listener to show/hide inflated view.

Since AndroidManifest.xml file is very important in any android application, we are also going to see the content inside this file.

AndroidManifest.xml file

Code inside main/AndroidManifest.xml file is as below.

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.viewstub"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When we run the program, we will get output as shown above.

That’s end of our tutorial on Android ViewStub using Kotlin.

Support Us

If you like Tutorialwing and would like to contribute, you can email an article on any educational topic at tutorialwing@gmail.com. We would love to publish your article. See your article on Tutorialwing and help others with your knowledge. Follow Facebook, LinkedIn, Google+, Twitter, Youtube for latest updates.
Greetings!
We have recently published 100+ articles on android tutorials with kotlin and java. If you need, you may visit Android Tutorial for beginners page. You can also check Kotlin Tutorial for beginners