How to use View Stub in android

Like the documentation says, ViewStub is a View that is inflated lazily.

You can declare a ViewStub in an XML file like this:

 <ViewStub android:id="@+id/stub"
           android:inflatedId="@+id/subTree"
           android:layout="@layout/mySubTree"
           android:layout_width="120dip"
           android:layout_height="40dip" />

The android:layout attribute is a reference to the View that will be inflated next to a call of inflate(). So

ViewStub stub = (ViewStub) findViewById(R.id.stub);
View inflated = stub.inflate();

When the method inflate() is invoked the ViewStub is removed from its parent and replaced with the right View (the root view of mySubTree layout).

If you want to do this progammatically then your code should be something like:

ViewStub stub = new ViewStub(this);
stub.setLayoutResource(R.layout.mySubTree);
stub.inflate(); 

Simply a ViewStub is used to increase efficiency of rendering layout. By using ViewStub, manually views can be created but not added to view hierarchy. At the runtime, can be easily inflated, while ViewStub is inflated, the content of the viewstub will be replaced the defined layout in the viewstub.

activity_main.xml we defined viewstub but not created first.enter image description here

Simple example gives better understanding,

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="create the view stub" />
     <Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hide the stub." />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ViewStub
            android:id="@+id/stub_import"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:inflatedId="@+id/content_import"
            android:layout="@layout/splash" />
    </RelativeLayout>
</LinearLayout>

At runtime, when we inflate, the content will be replaced with the layout defined in the viewstub.

public class MainActivity extends Activity {

    Button b1 = null;
    Button b2 = null;

    ViewStub stub = null;
    TextView tx = null;

    int counter = 0;

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

        b1 = (Button) findViewById(R.id.btn1);
        b2 = (Button) findViewById(R.id.btn2);
        b1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (stub == null) {     
                    stub = (ViewStub) findViewById(R.id.stub_import);
                    View inflated = stub.inflate();
                    tx = (TextView) inflated.findViewById(R.id.text1);
                    tx.setText("thanks a lot my friend..");
                } 

            }
        });

        b2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if (stub != null) {
                    stub.setVisibility(View.GONE);
                }

            }
        });

    }

enter image description here

So, Lets look at again the view hierarchy,

enter image description here

when we inflate the viewstub, it will be removed from the view hierarchy.


Here is an example for show/hide and change data of ViewStub at run time

activity_main.xml

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

    <Button
        android:id="@+id/buttonShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show View Stub"/>

    <Button
        android:id="@+id/buttonHide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide View Stub"/>

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

</LinearLayout>

layout_of_view_stub.xml

<TextView
    android:id="@+id/textInViewStub"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ViewStub Button"
    />

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private ViewStub viewStub;
    private Button buttonShow;
    private Button buttonHide;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        buttonShow = findViewById(R.id.buttonShow);
        buttonHide = findViewById(R.id.buttonHide);
        buttonShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showViewStub();
            }
        });

        buttonHide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                hideViewStub();
            }
        });
    }

    private void showViewStub() {
        if (viewStub == null) {
            viewStub = findViewById(R.id.viewStub);

            // If you want to change data of ViewStub at runtime, you can do like this
            View inflatedView = viewStub.inflate();
            TextView textViewInViewStub = inflatedView.findViewById(R.id.textInViewStub);
            textViewInViewStub.setText("ABC");
        }
        viewStub.setVisibility(View.VISIBLE);
    }

    private void hideViewStub() {
        if (viewStub == null) {
            return;
        }
        viewStub.setVisibility(View.GONE);
    }
}