ViewStub Example And Use In Android

A ViewStub is a dumb and lightweight view which has no dimension It does not draw anything and does not participate in the layout in any way. This means a ViewStub is very cheap to inflate and very cheap to keep in a view hierarchy. A ViewStub can be best described as a lazy include. The layout referenced by a ViewStub is inflated and added to the user interface only when you decide so.

The difference between ViewStub and include tag:
The include tag will just include the xml contents in your base xml file. It’s a nice way to share layout parts between different layouts.The ViewStub tag is a bit different because it is not directly included, and will be loaded only when you actually need it, i.e, when you set it’s visibility to “true”. This a nice optimization because you could have a complex layout with tons of small views or headers anywhere, and still have your Activity load up really fast. Once you use one of those views, it’ll be loaded.

In the example below we will see a very simple ways to work with various implementations of ViewStub class from Android platform. We will create a screen with two buttons and a third component as a message dialog to pop-up on screen rather than a separate screen, and to dissapear on another user action. So one button on click shows this message and another button just hides it.

Algorithm:

1.) Write following into MainActivity.java:

package com.example.viewstubexample;

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

public class MainActivity extends Activity implements OnClickListener{

private View viewInfl;
private ViewStub viewStub;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewStub = (ViewStub) findViewById(R.id.exampleOverlay);

Button button = (Button) findViewById(R.id.customButton);
button.setText("Hide");
button.setOnClickListener(this);
Button button1 = (Button) findViewById(R.id.customButton1);
button1.setText("Show");
button1.setOnClickListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

@Override
public void onClick(View arg0) {
if(viewInfl == null) {
viewInfl = viewStub.inflate();
}
if(arg0.getId() == R.id.customButton)
viewInfl.setVisibility(View.INVISIBLE);
if(arg0.getId() == R.id.customButton1)
viewInfl.setVisibility(View.VISIBLE);
}
}

Here in above code the onClick method has a condition to check whether ID of the component matches
and accordingly set the visibility factor for the viewstub.

2.) Create and write following into ViewStubButton.java

package com.example.viewstubexample;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.view.View.OnLongClickListener;
import android.view.ViewStub;
import android.widget.Button;

public class ViewStubButton extends Button implements OnLongClickListener {

public ViewStubButton(Context context) {
super(context);
setOnLongClickListener(this);
}
public ViewStubButton(Context context, AttributeSet attrs) {
super(context, attrs);
setOnLongClickListener(this);
}
public ViewStubButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setOnLongClickListener(this);
}

@Override
public boolean onLongClick(View arg0) {
arg0.setBackgroundColor(Color.RED);
return false;
}
}

3.) Write following into activity_main.xml:

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

<com.example.viewstubexample.ViewStubButton android:id="@+id/customButton"
android:padding="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/custom_btn_label"/>
<com.example.viewstubexample.ViewStubButton android:id="@+id/customButton1"
android:padding="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/custom_btn_label"/>
<ViewStub android:id="@+id/exampleOverlay"
android:inflatedId="@+id/exampleInflateOverlay"
android:layout="@layout/overlay_layout"
android:layout_width="120dp"
android:layout_height="120dp"
android:minHeight="120dp"
android:minWidth="120dp"
/>
</LinearLayout>

The view stub class file above uses below layout as drawable.

4.) Create and write following into overlay_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView android:id="@+id/txtView" android:layout_width="100dp"
android:layout_height="50dp"
android:text="@string/hello"
android:background="@drawable/message_background"/>
</LinearLayout>

Output:

Now lets try to create very simple example of showing a ViewStub with a different layout XML file. This example will have a Activity with a layout XML file, which contains a ViewStub, while ViewStub has another layout that inludes a ScrollView and a TextView in it. We will use inflate method of ViewStub to inflate secondary Layout XML
file.

1.) Write following into your manifest file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.viewstubexample"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="7"
android:targetSdkVersion="15" />

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".ViewStubActivity"
android:label="@string/title_activity_example_view_stub" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

</manifest>

2.) Write following into activity_example_view_stub.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ViewStub
android:id="@+id/viewStub1"
android:layout="@layout/example_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="130dp" />

</RelativeLayout>

3.) Write following into example_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:id="@+id/scrlView" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView android:id="@+id/txtSroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="This is ViewStub Sample Text"
android:textSize="30dp"
android:textScaleX="2"/>"
</LinearLayout>

</ScrollView>

4.) Write following into ViewStubActivity.java

package com.example.viewstubexample;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.ViewStub;
import android.widget.ScrollView;

public class ViewStubActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_example_view_stub);
ViewStub viewStub = (ViewStub) findViewById(R.id.viewStub1);
ScrollView srView = (ScrollView) findViewById(R.id.scrlView);

viewStub.inflate();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_example_view_stub, menu);
return true;
}
}