ViewStub in Android with Example

In Android, ViewStub is a zero-sized invisible View and very flexible in that we can lazily inflate layout resources at runtime. It is a dumb and lightweight view and it has zero dimension. Depending upon the requirement, whenever in need we can inflate at runtime. This is a classic example to handle when there are complicated views to be handled. When the ViewStub is inflated, it replaces itself in its parent view with the inflated layout resource. Its visibility will exist in the view hierarchy only when setVisibility(int) or inflate() is invoked. The inflated view is added to ViewStub’s parent using the layout parameter. Whenever there are item details, undo messages, or progress indicators, we can think of ViewStub. It reduces memory usage and speeds up rendering by loading the views only when they are needed. One can think that it looks similar to including a tag but it is not. Include tag includes contents in the XML file which is present under the layout folder. So we can have header, footer, left, and right bar XMLs separately but still they are included in the main XML by using include tags. On the other hand, ViewStub is not included but it directly gets loaded when set as setVisibility(int)(for true option) or inflate() is invoked.

Important Methods

First, let us get the reference of ViewStub

ViewStub in XML

<ViewStub
    android:id="@+id/viewStubToLearn"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="100dp"
    android:inflatedId="@+id/inflatedviewsub"
    android:layout="@layout/custom_viewstub" 
/>

Syntax:

// viewStubToLearn is the id of ViewStub defined in xml
ViewStub simpleViewStub = ((ViewStub) findViewById(R.id.viewStubToLearn));

Attributes of ViewStub

Example

A sample GIF is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Add an Image to the Drawable Folder

Go to the app > res > drawable folder, and we need to provide the images required. For different resolutions, if there is a necessity for bigger or smaller images, it will be under the res folder for different drawable. Here, this image is specified in ImageView in custom_viewstub.xml. So you may download this image and paste it to the drawable folder.

Step 3: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail. 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical">

    <!-- To show the ViewStub -->
    <Button
        android:id="@+id/showButtonForViewStub"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:background="#0f0"
        android:text="Show ViewStub"
        android:textColor="#fff"
        android:textSize="16sp"
        android:textStyle="bold|italic" />

    <!-- To hide the ViewStub -->
    <Button
        android:id="@+id/hideButtonForViewStub"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:background="#f00"
        android:text="Hide ViewStub"
        android:textColor="#fff"
        android:textSize="16sp"
        android:textStyle="bold|italic" />

    <!-- ViewStub, its layout is specified 
         under layout->custom_viewstub -->
    <ViewStub
        android:id="@+id/viewStubToLearn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:inflatedId="@+id/inflatedviewsub"
        android:layout="@layout/custom_viewstub" />
</LinearLayout>

Create a New Layout XML File 

Go to the app > res > layout > right-click > New > XML > Layout XML file and name the file as custom_viewstub. Below is the code for the custom_viewstub.xml file.

<?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:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:src="@drawable/cryptocurrency" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="CRYPTOCURRENCY"
        android:textColor="@color/colorAccent" />
</LinearLayout>

Step 4: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. 

import android.app.Activity
import android.os.Bundle
import android.view.View
import android.view.ViewStub
import android.widget.Button

class MainActivity : Activity() {

    private lateinit var simpleViewStub: ViewStub
    private lateinit var showButton: Button
    private lateinit var hideButton: Button

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

        // get the reference of ViewStub
        simpleViewStub = findViewById(R.id.viewStubToLearn)

        // inflate the layout
        simpleViewStub.inflate()

        // get the reference of show button
        showButton = findViewById(R.id.showButtonForViewStub)

        // get the reference of hide button
        hideButton = findViewById(R.id.hideButtonForViewStub)

        // perform click event on show button
        showButton.setOnClickListener {
            // set VISIBLE visibility of ViewStub
            simpleViewStub.visibility = View.VISIBLE
        }

        // perform click event on hide button
        hideButton.setOnClickListener {
            // set GONE visibility of ViewStub
            simpleViewStub.visibility = View.GONE
        }
    }
}

import android.os.Bundle;
import android.view.View;
import android.view.ViewStub;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    ViewStub simpleViewStub;
    Button showButton, hideButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // get the reference of ViewStub
        simpleViewStub = findViewById(R.id.viewStubToLearn);

        // inflate the layout
        simpleViewStub.inflate();

        // get the reference of show button
        showButton = findViewById(R.id.showButtonForViewStub);

        // get the reference of hide button
        hideButton = findViewById(R.id.hideButtonForViewStub);

        // perform click event on show button
        showButton.setOnClickListener(view -> {
            // set VISIBLE visibility of ViewStub
            simpleViewStub.setVisibility(View.VISIBLE);
        });

        // perform click event on hide button
        hideButton.setOnClickListener(view -> {
            // set GONE visibility of ViewStub
            simpleViewStub.setVisibility(View.GONE);
        });
    }
}

Output: Running on Emulator

On running the project, we can able to see a similar kind of output as attached in the video. So ViewStub is a nice feature in android and whenever in need, we can invoke that which provides enormous memory usage reduction but at the same time can able activate it by inflating.

priyarajtt

Follow

Improve

Article Tags :

• Java
• Kotlin
• Android
• Android-View

Practice Tags :

• Java