Image Hide And Show Process Using ViewStub In Android Applications

In this blog, you will learn the process of hiding and showing the images, 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

• Windows 10 OS
• Android Studio 2.1.3 (free source available online)

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.



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



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



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






Here, add the image in drawable folder.



Step 6

Now, build the design in new XML page.



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



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



Now, declare the ViewStub and Button (variable).



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



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



Add the click event on Hide button.



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.



Here, you will choose the Emulator or Devices.



Step 10

Output



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