ViewStub in Android with Example
Last Updated :
22 Aug, 2022
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));
|
Methods
|
Description
|
| getInflatedId() |
To get the id taken by the inflated view |
| setLayoutResource(int layoutResource) |
Via this method, we can set the layout resource to inflate when StubbedView becomes visible or invisible or when inflate() is invoked. |
| getLayoutResource() |
To get the layout resource that will be used by setVisibility(int) or inflate() to replace this StubbedView in its present with another view. The resultant will be an integer value |
| inflate() |
In order to Inflate the layout resource that gets identified by getLayoutResource() and replace this StubbedView in its parent by the inflated layout resource. |
| setVisibility(int visibility) |
Sometimes there is a need to make the visibility to invisible and later on visible. |
| setOnInflateListener(OnInflateListenerinflateListener) |
Via this call, It specifies the inflate listener to be notified after this ViewStub successfully inflated its layout resource. |
Attributes of ViewStub
|
Attributes
|
Description
|
| id |
To uniquely identify a ViewStub |
| inflated |
To set the id of the inflated View. Via programmatically we can set it by using the setInflatedId() method. |
| layout |
To supply an identifier for the layout resource to inflate when the ViewStub becomes visible or when forced to do so.
Via programmatically can be set by using the setLayoutResource(int) method.
|
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.
XML
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<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" />
<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
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
<?xml version="1.0" encoding="utf-8"?>
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.
Kotlin
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)
simpleViewStub = findViewById(R.id.viewStubToLearn)
simpleViewStub.inflate()
showButton = findViewById(R.id.showButtonForViewStub)
hideButton = findViewById(R.id.hideButtonForViewStub)
showButton.setOnClickListener {
simpleViewStub.visibility = View.VISIBLE
}
hideButton.setOnClickListener {
simpleViewStub.visibility = View.GONE
}
}
}
|
Java
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);
simpleViewStub = findViewById(R.id.viewStubToLearn);
simpleViewStub.inflate();
showButton = findViewById(R.id.showButtonForViewStub);
hideButton = findViewById(R.id.hideButtonForViewStub);
showButton.setOnClickListener(view -> {
simpleViewStub.setVisibility(View.VISIBLE);
});
hideButton.setOnClickListener(view -> {
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...