Previously, we learn how to save data in android using key-value set in Saving data in Android: Saving in Key-Value Sets. Now we see how to make a view invisible and show it programmatically.

First, Create a project “Android Love” and AVD for it in Eclipse. 

Add Widgets to our GUI: 

Now, we need to add views in our view groups, i.e. add widgets to our GUI. We need a button and a text view widget for our app’s GUI

For this, navigate to res/Layout/main.xml from package explorer in Eclipse. Open main.xml

Add the following code into it:

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".HaikuDisplay" > 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/love_button_text"
        /> 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"/> 

</LinearLayout>

 This will result to add a button and a text view in our app’s GUI. 

Adding String values for GUI widgets:  

Now we need to add string values for text view and for buttons label

Now, open res/values/string.xml from package explorer and add following code in it:

<?xml version="1.0" encoding="utf-8"?>
<resources> 
    <string name="app_name">AndroidLove</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">I dreamed of a phone\nOpen source and hackable\nAndroid for the win!"</string>
    <string name="love_button_text">Show me some Android Love!</string>
 </resources>

 This will result to add values for our button label and the text we want to show in our text view.

Hiding the text from the screen:

To hide text from the screen we need, we required a property that can hide the <TextView > from the app’s GUI.

This can be done by a visibility attribute in <TextView> widget. So, we need to set it to “invisible” i.e.:

android: visibility = “invisible”

Now add this attribute in the Text view of our Layout,

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:visibility="invisible"/>

 Doing this, our text view is now invisible from the app’s screen. 

 Make the button to show our <TextView>:

 It’s time to start making the button work! For this, we have an attribute on Button View for just this purpose called android: onClick.

The value for the attribute is the name of the action we want to use. Add the android:  onClick property to the Button definition in main.xml. Give it a value of onLoveButtonClicked.

 <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/love_button_text"
        android:onClick="onLoveButtonClicked" />

 The onClick attribute added to the button pointing to the onLoveButtonClicked method in the main activity class.

Adding behavior to the Button:

Navigate to main activity class i.e. Android Love class and open AndriodLove.java. Add the code to handle the onClick functionality for our button.

Add the onLoveButtonClicked method to the activity.This method needs to take one argument of a view. This is the view that was clicked

public void onLoveButtonClicked(View view)
 

Implement the onLoveButtonClicked() method: 

Now, implementing the action in the onLoveButtonClicked method really consists of two parts:

• We need to get the reference to the TextView and then,
• We need to set the visibility property to true.

But how to get the reference of< TextView>?

Since <TextView> is defined in XML in the main.xml layout. But our action code is defined in java in the Android Love Activity.

So, how are we supposed to get the references of XML code which is defined in java code?

To solve this, Android uses the “R” file. This is a file of constants that allow us to get java references to the TextView we defined in our main.xml

Navigate to gen/com../R.java in package explore and open R.java. This file contains the number of static final constants, each one referring to an XML resource.

The constants are grouped into interfaces according to the XML resource type.

For getting view references, we need a method that will return view on the bases of IDs provided in R class. So, Android provide us findViewById() method:  

TextView textView = (TextView) findViewById(R.id.haikuTextView); 

Now, we just need to define the id attribute for <TextView> in main.xml

  <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:visibility="invisible"
        android:id="@+id/haikuTextView" /> 

After doing so, and saving our work, we just need to look at our R class, in which a new static constant has been generated for the id of <TextView > in our main Layout. 

package com.example.androidlove; 

public final class R {

    public static final class attr {

    }

    public static final class dimen {

        public static final int activity_horizontal_margin=0x7f040000;

        public static final int activity_vertical_margin=0x7f040001;

    }

    public static final class drawable {

        public static final int ic_launcher=0x7f020000;

    }

    public static final class id {

        public static final int action_settings=0x7f080002;
        public static final int button1=0x7f080000;
        public static final int haikuTextView=0x7f080001;

    }

    public static final class layout {

        public static final int activity_haiku_display=0x7f030000;

    }

    public static final class menu {

        public static final int haiku_display=0x7f070000;

    }

    public static final class string {

        public static final int action_settings=0x7f050001;

        public static final int app_name=0x7f050000;

        public static final int hello_world=0x7f050002;

        public static final int love_button_text=0x7f050003;

    }

    public static final class style {

        public static final int AppBaseTheme=0x7f060000;

        public static final int AppTheme=0x7f060001;

    }

}

After doing all this, we just need a way to show our hidden TextView. For this purpose, we have a complementary java method in TextView class, setVisibillity() which will solve our problem. 

So putting it all together with our final implementation for the main Activity class will look like this :

package com.example.androidlove; 

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.widget.TextView;
 

public class HaikuDisplay extends Activity { 

      @Override
      protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_haiku_display);

      }

 

      @Override
      public boolean onCreateOptionsMenu(Menu menu) {

            // Inflate the menu; this adds items to the action bar if it is present.

            getMenuInflater().inflate(R.menu.haiku_display, menu);

            return true;

      }     

      public void onLoveButtonClicked(View view){
            TextView textView = (TextView) findViewById(R.id.haikuTextView);
            textView.setVisibility(View.VISIBLE);

           

      }

 

}

 Running the app:

Now run the project, the emulator will start and will show this screen:

 

Click on the button, and Voila! our text will be visible  under the button.

In my next post, we are going to implement a simple calculator app in Simple Calculator App in Android