Image Hide And Show Process Using ViewStub In Android Applications

Introduction

In this blog, you will learn how to develop ViewStub and the Image Hide and Show process, using ViewStub in Android Studio

Requirements

If you want to develop the Image Hide and show functionality, follow the below steps.

Step 1

Open Android Studio and go to File >> New >> New Project.

android studio

Step 2

Now, write the application name and click the "Next"  button.

android studio

Here, we can choose the target Android devices and the minimum SDK version.

android studio

Step 3

Now, at the next screen, select Empty Activity and click the "Next" button.

android studio

Here, write the Activity name and click the "Finish" button.

android studio

Step 4

Now, in the New project, go to design page (activity_main.xml). If you want to add some options, just follow the drag and drop method to add ViewStub, imageView, button, Textview.

android studio

Here, you will see the design page (Graphical User Interface).

android studio

Now, look for XML code in activity_main.xml code.

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="xyz.rvconstructions.www.viewstubapp.MainActivity">  
  3.     <Button android:id="@+id/showButton" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="50dp" android:background="#ff7300" android:text="Show" android:textColor="#fff" android:textSize="18sp" android:textStyle="bold" />  
  4.     <Button android:id="@+id/hideButton" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="10dp" android:background="#ffaa00" android:text="Hide" android:textColor="#fff" android:textSize="18sp" android:textStyle="bold" />  
  5.     <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/custom_stub" /> </RelativeLayout>  
Step 5

Now, you will add the new XML page. Here, go to Layout and click open the new window. Go to New >> Layout resource file

BlogImages

Here, write the XML page name like custom_stub.xml and click the "OK" button.

LightClick


LightClick

Here, add the image in drawable folder.

LightClick

Step 6

Now, build the design in new XML page.

LightClick

Here, you will see the design page (Graphical User Interface).

LightClick

Now, add the following XML code in custom_stub.xml code.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">  
  3.     <ImageView android:layout_width="wrap_content" android:layout_height="200dp" android:layout_gravity="center" android:src="@drawable/image" />  
  4.     <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="BABY" android:textColor="#000" /> </LinearLayout>  
Step 7

Build the Java code in MainActivity.java, First of all, we need to declare the header file that is an extension file.

MainActivity.java

BlogImages

Now, declare the ViewStub and Button (variable).

BlogImages

Now, get the reference of ViewStub and button (show,hide).

BlogImages

Now , you will the perform click event on Show button.

BlogImages

Add the click event on Hide button.

BlogImages

MainActivity.java
  1. package xyz.rvconstructions.www.viewstubapp;  
  2. import android.support.v7.app.AppCompatActivity;  
  3. import android.os.Bundle;  
  4. import android.app.Activity;  
  5. import android.view.Menu;  
  6. import android.view.MenuItem;  
  7. import android.view.View;  
  8. import android.view.ViewStub;  
  9. import android.widget.Button;  
  10. public class MainActivity extends AppCompatActivity {  
  11.     ViewStub firstViewStub;  
  12.     Button showButton, hideButton;  
  13.     @Override  
  14.     protected void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         setContentView(R.layout.activity_main);  
  17.         firstViewStub = ((ViewStub) findViewById(R.id.simpleViewStub));  
  18.         firstViewStub.inflate();  
  19.         showButton = (Button) findViewById(R.id.showButton);  
  20.         hideButton = (Button) findViewById(R.id.hideButton);  
  21.         showButton.setOnClickListener(new View.OnClickListener() {  
  22.             @Override  
  23.             public void onClick(View v) {  
  24.                 firstViewStub.setVisibility(View.VISIBLE);  
  25.             }  
  26.         });  
  27.         hideButton.setOnClickListener(new View.OnClickListener() {  
  28.             @Override  
  29.             public void onClick(View v) {  
  30.                 firstViewStub.setVisibility(View.GONE);  
  31.             }  
  32.         });  
  33.     }  
  34.     @Override  
  35.     public boolean onOptionsItemSelected(MenuItem item) {  
  36.         int id = item.getItemId();  
  37.         if (id == R.id.action_bar) {  
  38.             return true;  
  39.         }  
  40.         return super.onOptionsItemSelected(item);  
  41.     }  
  42. }  
Step 8

Now, run your application.

BlogImages

Here, you will choose the Emulator or Devices.

package xyz.rvconstructions.www.viewstubapp; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewStub; import android.widget.Button; public class MainActivity extends AppCompatActivity { 	ViewStub firstViewStub; 	Button showButton, hideButton; 	@Override 	protected void onCreate(Bundle savedInstanceState) { 		super.onCreate(savedInstanceState); 		setContentView(R.layout.activity_main); 		firstViewStub = ((ViewStub) findViewById(R.id.simpleViewStub)); 		firstViewStub.inflate(); 		showButton = (Button) findViewById(R.id.showButton); 		hideButton = (Button) findViewById(R.id.hideButton); 		showButton.setOnClickListener(new View.OnClickListener() { 			@Override 			public void onClick(View v) { 				firstViewStub.setVisibility(View.VISIBLE); 			} 		}); 		hideButton.setOnClickListener(new View.OnClickListener() { 			@Override 			public void onClick(View v) { 				firstViewStub.setVisibility(View.GONE); 			} 		}); 	} 	@Override 	public boolean onOptionsItemSelected(MenuItem item) { 		int id = item.getItemId(); 		if (id == R.id.action_bar) { 			return true; 		} 		return super.onOptionsItemSelected(item); 	} }

Step 10

Output



Now, click the Hide button and you will get the given output.

BlogImages
Ebook Download
View all
Learn
View all