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.

Step 2

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

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

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.

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.

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

android studio

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

<?xml version="1.0" encoding="utf-8"?>
<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">
<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" />
<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" />
<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

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.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView android:layout_width="wrap_content" android:layout_height="200dp" android:layout_gravity="center" android:src="@drawable/image" />
<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

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 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