Home > DeveloperSection > Beginner > How to Show invisible text on button Click in android.

How to Show invisible text on button Click in android.


Android Android  Android Activity  Android Layout  Android Edittext 
Ratings:
0 Comment(s)
 3992  View(s)
Rate this:

How to show invisible text on button click in android


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 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 which 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 consist of two parts:

·         We need to get 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 “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 number  of static final constants, each one referring to an XML resource. The constants are grouped into interfaces according to XML resource type.

For getting view references, we need a method which will return view on the bases of id’s 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 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 complemenatary java method in TextView class, setVisibillity() which will solve our problem.

 

So putting it all together 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, 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


Don't want to miss updates? Please click the below button!

Follow MindStick