Android ViewStub Tutorial With Example In Android Studio

Android ViewStub, is a called as zero sized invisible view with which you can use load “layout resource” at the runtime by saving lot’s of processing time, ViewStub in android is a Zero Dimension View.

In android viewStub a layout is refered by a ViewStub is been inflated and added to UI only then we decide, In other words, A view is been displayed when every it is in real use by making it just visible. or when inflate() method is invokeed.

The Layout resource is inflated and then viewstub get replaces in its parent. The ViewStub is been displayed/ exists in the UI unitl the setVisibility is VISIBLE or inflate is invoked.

The android ViewStub is used when any Layout view are rarely used, this can reduce the memory usage and thus this will speed up the rendering of the views

DEMO ON VIEWSTUB ANDROID

Basic Syntax of ViewStup XML:

<ViewStub
        android:id="@+id/ViewStubId"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:inflatedId="@+id/inflatedview"
        android:layout="@layout/activity_custum_view_stub" />

Then, the ViewStub can be defined that can be found using it’s id “ViewStubId”.

So after Inflation of the Layout ” activitity_custum_view_stub”. the view Stub is been removed from its parent.

Then the view which is been created by inflating the layout resource ” activitity_custum_view_stub” is found using the inflate is “inflateviewId”.

Important Methods Of ViewStub:

1. getInflatedId(): This method is used to get the id taken by the inflated view. This method returns an integer type value.

ViewStub simpleViewStub = new ViewStub(getApplicationContext()); // get the reference of ViewStub
int infaltedId = simpleViewStub.getInflatedId(); //using this we can get the id if the Inflated view

2. setLayoutResource(int layoutResource): This method is used to set the layout resource to inflate when this StubbedView becomes visible or invisible or when inflate() is invoked.

Below we set the layout resource that is used while inflating.

ViewStub simpleViewStub = new ViewStub(getApplicationContext()); // get the reference of ViewStub
simpleViewStub.setLayoutResource(R.layout.stub_layout); // set layout resource to inflate

3. inflate(): Ok now this inflate method is used to inflate the layout resource identified by getLayoutResource() and then replaces  it with our StubbedView in its parent.

View inflated = simpleViewStub.inflate();

4. setVisibility(int visibility): So the setVisibility method is used as it sounds i,e we can manually set the view to VISIBLE OR INVISIBLE OR GONE.

simpleViewStub.setVisibility(View.INVISIBLE);

5. setOnInflateListener(OnInflateListenerinflateListener): This method is used to listener event when we inflate the ViewStub. It specifies the inflate listener to be notified after this ViewStub successfully inflated its layout resource.

ViewStub simpleViewStub = new ViewStub(getApplicationContext()); // get the reference of ViewStub
// perform setOnInflateListener event
simpleViewStub.setOnInflateListener(new ViewStub.OnInflateListener() {
@Override
public void onInflate(ViewStub stub, View inflated) {
// do something here.
}
});

Android Viewstub example in Android Studio implementation:

Step 1 : Create a new Android Project

As usual now you need to create a new android project or just implement this viewStub in your existing project all left to you.

Step 2 : Design the UI

Open Open res -> layout ->activity_main.xml and  then just add below xml code:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#9C7777"
    android:elevation="50dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="20dp"
        android:layout_gravity="center">

    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="Show"
        android:id="@+id/ButtonShow"/>
    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="Hide"
        android:id="@+id/ButtonHide"/>
    <ViewStub
        android:id="@+id/simpleViewStub"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:inflatedId="@+id/inflatedview"
        android:layout="@layout/activity_custum_view_stub" />
    </LinearLayout>

</LinearLayout>

Step 3 : Create a new XML File activity_custum_view_stub.xml

The copy paste the below xml code in the new xml file you just created.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CustumViewStub"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:srcCompat="@drawable/images"
         />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="This is An Example for Android ViewStub"/>
</LinearLayout>

Step 4: Open   src -> package -> MainActivity.java

MainAcitivity.java

In this step Firstly we get the reference of Button’s and ViewStub and then inflate the layout resource. In this we perform click events on Show and Hide Button’s. Show Button is used to show the inflated view and hide button is used to hide the inflated view from the screen. In inflated view i.e custom_stub.xml we display a ImageView with a TextView.

package com.ui.viewstub;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewStub;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    ViewStub ViewStub;
    Button showButton, hideButton;

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

        ViewStub = ((ViewStub) findViewById(R.id.simpleViewStub));
        ViewStub.inflate();
        showButton = (Button) findViewById(R.id.ButtonShow); // get the reference of show button
        hideButton = (Button) findViewById(R.id.ButtonHide);

        showButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewStub.setVisibility(View.VISIBLE);
            }
        });

        hideButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewStub.setVisibility(View.GONE);
            }
        });
    }
}

Then, It’s all set the app is ready to run for testing.