Android TextView and Button

Guest Posts coolbhushans

Hello friends in this tutorial we are working with android Textview and Button controls and controlling Android view elements programmatically.

Before we start


  1. You have Eclipse IDE setup for android development.

  2. You are familiar with simple Android Hello World program.


You can find our Hello World Tutorial Here Hello World

<!--[if gte mso 9]>-->

<!--[if gte mso 9]>-->

Step1. Create new android project

ART2_image1


Step2.Run app

We run our app with out any changes made in it. You see following similar windows when you came Eclipse IDE.

ART2_image2

<!--[if gte mso 9]>-->

<!--[if gte mso 9]>-->

Just run this on app you see following window on AVD.


ART2_image3


<!--[if gte mso 9]>-->


<!--[if gte mso 9]>-->


Step 3.Graphical display and XML file


Come back to Eclipse IDE and click on xml tab near graphical layout tab


ART2_image4


You see xml fileART2_image5

<!--[if gte mso 9]>-->

<!--[if gte mso 9]>-->

Textview is responsible to display text in android activity.


We look closely to textview we see


android:text="@string/helloworld"


Its good practices to move details of your user interface to property files.


The ”@strring/helloworld” isn’t the stringit self but rather the pointer into a string property file.


Step 4.String.xml file


Open string.xml file


 ART2_image6

<!--[if gte mso 9]>-->

<!--[if gte mso 9]>-->

Now you see

<string name="helloworld">Hello world!</string>


helloworld is name of  string and Hello world! Is value of this string


Let’s add new string in resource file.


Click on resource tab


Click add button and select string and press enter


ART2_image7 <!--[if gte mso 9]>-->

<!--[if gte mso 9]>-->

I give name = multiLineText


And value  = This\nis\nMutiline\nText


\n is used for displaying text on next line.


Step 5: Modifying activity file


<!--[if gte mso 9]>-->


<!--[if gte mso 9]>-->


Replace


android:text="@string/helloworld"


with


android:text="@string/multiLineText"


save file and run project.


you see following window


<a href=http://localhost:4000/uploads/2013/12/ART2image8.png>ART2_image8


<!--[if gte mso 9]>-->


<!--[if gte mso 9]>-->


Step6: Adding button


Open activity xml file in graphical mode


Drag and drop Button from Palette.


You can find Button under Form Widget.


Drag it and place it under text


ART2_image9


<!--[if gte mso 9]>-->


<!--[if gte mso 9]>-->


Open xml file you see new <button> under <TextView>


Step7: Assign name to button


Since we not assign any name to button. Let’s give name to button


Go to String.xml and add new string


<string name="buttonClickString">Click Me!</string>


Your String.xml file looks like this


 ART2_image10

<!--[if gte mso 9]>-->

<!--[if gte mso 9]>-->

 Save file and open activity xml file


<Button       


        android:text="@string/buttonClickString" />


place @string/buttonClickString text save file.


To check effect run project.  You see button under text like this.


ART2_image11


<!--[if gte mso 9]>-->


<!--[if gte mso 9]>-->


If you click on button nothing happen because we not assign any functionality to it. Let’s add some functionality to button.  


Step8: Adding functionality to button.


Its time to start making  the Button Work. There is an attribute on the button view just for this purpose called android:onClick. The Value for the attribute is the name of the action you want to use.


Add android:onClicked property to Button. Give is a value of onButtonClicked to be descriptive of what the Button supposed to do.


Run app and clicked button you get following error message


ART2_image12


<!--[if gte mso 9]>-->


<!--[if gte mso 9]>-->


This is because we not yet write onButtonClicked java method.


Step9: Writing onButtonClicked method


Open TextDisplayActivity.java file


You find it under src->com->TextDisplayActivity.java


ART2_image13


<!--[if gte mso 9]>-->


<!--[if gte mso 9]>-->


 

We need to define method like this


public void onButtonClicked(View view)


also we need to import package


import android.view.View


Write empty method your code file looks like this


ART2_image14

Run your app now you don’t get any error.

<!--[if gte mso 9]>-->

<!--[if gte mso 9]>-->

Now its time to hide text on button click.


Step 10.Hide text on click


Past following code inside OnButtonClick method


public void onButtonClicked(View view)


{


            TextView txtview = (TextView) findViewById(R.id.textView1);


            txtview.setVisibility(View.INVISIBLE);            


}


Run app and click on button you see text get hidden


ART2_image11


After click

ART2_image15