Below is the main.xml layout.

Now that you have the love_

button_text property, you should have used it in the Button
definition to set the text form the strings.xml resources.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=
/>
<TextView android:text="@string/haiku"
android:id="@+id/haikuTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
@string/love_button_text
Here s the prefix
telling the view
rendering to use a
String resource
And here s the name of
the String resource to use.
you are here ?? 55
working with feeds
Whew! You added the Button, which had some weird text. And to fix
that, you added a new String resource, and used that new String resource
from the Button s android:text attribute. Let s see if it all worked!
Run the app again...
And it works! The button looks good!
The button is displayed
with the correct text
from the String resource.
??????????????????????????????????
??????????????????????????????????????????
????????????????????????????????????????????????
????????????????????????????????????????????
Test Drive
56 Chapter 2
hiding text
Hide the haiku text
Now that the Button is added and looking good, it s time
to move on to the next step: hiding the haiku text.
How are you going to do this?
Well, two strategies are probably coming into your head
right now. You could remove the TextView and it back
once the button is pushed or you could set the text to be
invisible and make it visible once a user presses the button.
Let s go with the invisible text option!
OK, but that s not a huge help, right? You need to know
how to hide text. This is something new that you haven t
done yet and you need to know where to find out about
new things in Android. Luckily, Android comes with great
online documentation for just this reason! You can view is
at developer.android.com/reference.
You need
to hide
this text.
developer.android.com/reference
Go to the online
Android documentation
now at developer.
android.com/
reference.
Do this!
you are here ?? 57
working with feeds
Documentation Navigation Up Close
This area lists all
of the packes in
the documentation.
Click on one to
view the package
documentation.
In this case, the
android.widget
package is selected.
Once a package
is selected, this
section will show
all of the classes
in that package.
In this case, the
TextView is selected.
When you click on a class or a
package, the main panel will show the
details for what you ve selected.
If you know the class you re
looking for, but now the package,
you can type it in here to search
the documentation.
Let s take a quick look around the Android online documentation
to get acquainted. You can navigate to what you re looking for by
either selecting the package and class name, or searching for a class
name in the search box on the top right. Now since you re looking
to update an attribute on the TextView, you need to look at the
TextView documentation.
58 Chapter 2
android online docs
Browse the XML attributes
As you browse the documentation for TextView,
you ll notice it has a number of Java methods, but
it also has XML attributes listed. That s because
internally, TextView is a complete Java class.
Since you re working with the main.xml layout
definition in XML, focus on the XML attributes.
Does any look interesting? You re looking
for something that can hide the text...
This looks perfect!
It says it can control the visibility of a view. That s
exactly what you want! Using this you can make the
entire TextView invisible when the app starts up.
So how does it work?
you are here ?? 59
working with feeds
View XML attribute details
If you click on any attribute, you ll be taken to a
section that details the usage of that attribute. Click
on android:visibility, you ll be taken to the
detail section on it s usage.
Click here to view
the usage details for
android:visibility.
This tells us the usage is like this:
android:visibility = invisible
This is the name of the XML attribute,
which matches the name in the docs.
Use invisible since you
want to hide the view.
Attribute values are
always in quotes.
Detailed usage for
android:visibility.
60 Chapter 2
making the text invisible
????????????????????????????????????????????????????
??????????????????????????????????????????????????????
????????????????????????????????????????????????
????????????????????????????????????????????????????????????
????????????????????????????????????????????????
ence/android/view/View.html#attr_android:visibility
Look in the URL after you go
to the android:visibility details
and you ll see View in the URL
now instead of TextView .
View is a base class that other widgets inherit from
The View.java class is a base class with several cross widget methods,
attributes, and constants. And if you look at the headers for both
Button and TextView, you ll see that they both inherit from View.
The Android docs include superclass methods descriptions along with
the locally implemented methods (but if you look close you will see that
the android:visibility attribute was located in a section called
Inherited XML Attributes).
you are here ?? 61
working with feeds
Below is the main.xml layout code. Update this code with the
android:visibility set to invisible. This will hide the
TextView and with it the haiku text.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:text="@string/love_button_text"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="@string/haiku"
android:id="@+id/haikuTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Add the
android:visibility
attribute here.
62 Chapter 2
testing the hidden text
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:text="@string/love_button_text"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="@string/haiku"
android:id="@+id/haikuTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
android:visibility= invisible
Below is the main.xml layout code. You should have updated
this code with the android:visibility set to invisible.
This should hide the TextView and with it the haiku text.
Here s the android:visibility attribute
set to invisible. This should hide the
whole haiku TextView!
you are here ?? 63
working with feeds
You ve hidden the TextView with the haiku on it with the
android:visibility attribute. Now run the app and
make sure it worked!
The text is gone. Great job!
Setting the
android:visivibility
attribute to invisible
hid the text.
????????????????????????????????????????????????
????????????????????????????????????????????????????
????????????????????????????????????????????????
??????????????????????????????????????????????????????
????????????????????????????????????????????????????
Let s get that button working!
Test Drive
64 Chapter 2
the onClick attribute
Make the button show the haiku
XML
main.xml
<Button android:text= @+id/Button01
android:id= @+id/Button01
android:layout_width= wrap_content
android:layout_height= wrap_content
/>
android:onClick= onLoveButtonClicked
The onClick attribute
added to the Button.
Pointing to the
onLoveButtonClicked
method.
The Button
definition
from main.xml
It s time to start making that Button work! There is
an attribute on the Button View for just this purpose
called android:onClick. The value for the
attribute is the name of the action you want to use.
Let s use it now!
Add the android:onClick property to the
Button definition in main.xml. Give is a value of
onLoveButtonClicked to be descriptive of what
the Button is supposed to do.
you are here ?? 65
working with feeds
??????????????????????????????????????????????
????????????????????????????????????????????????????????????????????????
????????????????????????????????????????????????????????????????????????
????????????????????????????????????????????????????????
You ll get an error like
this if you run your
app now and press the
button. This is because
onLoveButtonClicked
isn t defined yet.
Actually, it s a Java method.
It s just not written yet...
So far, you ve updated the screen
layout, added a new View to the screen,
modified and added String resources.
All of these changes control the way
the app starts. But for the button action,
you ll be making a change that a user
can initiate while the app is runningadding
behavior to the app. And
Android app behavior is defined in Java.
So, let s define onLoveButtonClicked now...
66 Chapter 2
java source
Defining onLoveButtonClicked
Android
Love
Project
src
gen
assets
res
Your project s
Java source code
is all in here.
config
files
Android
Love
.java
com
headfirst
labs
android
love
So defining onLoveButtonClicked
in the android:onClick property
on the Button is calling some kind of
Java method. But where is that method
supposed to go?
Let s start by taking a look at the Java
source code in your project and it s contents.
This is the package com.
headfirstlabs.android.
love that you defined
in the project creation
dialog in chapter 1. This is the only Java
source file in your
project created by the
new project wizard.
Only one Java source file created by the wizard?
Let s take a closer look at it...
you are here ?? 67
working with feeds
public class AndroidLove extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);;
setContentView(R.layout.main);;
}
}
AndroidLove.java
The AndroidLove Activity
The AndroidLove class is a subclass of a built
in Android class called Activity. Think of
an Activity as the Java code that supports
a screen. And in this case, AndroidLove is
actually the Activity that supports your main
screen you re defining in main.xml.
Double click on AndroidLove.java and
Eclipse will automatically open it in a Java editor.
The source for
AndroidLove.java
The button is expecting to call a method in this class.
Since the AndroidLove Activity is
setting the main.xml layout on the screen,
the Android action code is going to look for the
method defined in the android:onClick
attribute here. The action code is going to look
for a method in the following format.
AndroidLove extends
Activity
This code is setting the view defined
in main.xml on the screen. You ll see
how it works soon!
public void onLoveButtonClicked View view (
(
The method name needs
to match the value of the
android:onClick attribute
The method needs to take one
argument of a View. This is the
view that was clicked.
68 Chapter 2
action method
Add the action method
public class AndroidLove extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);;
setContentView(R.layout.main);;
}
public void onLoveButtonClicked(View view) {
//doesn t do anything yet
}
}
AndroidLove.java
You can run the app and click
the button now. Nothing will
happen, but the app won t force
close either.
Let s add the onLoveVuttonClicked method to
AndroidLove now. Once this is done, we can run
the app and press the button and it shouldn t break.
The new
onLoveVuttonClicked
method that s
referenced from the
android:onClick Button
attribute.
Run the app now and press the button. It won t perform
any actions yet. But you also won t see errors either.
Test Drive
you are here ?? 69
working with feeds
Implementing the action method
Great work so far! The Button has an action method
configured in the android:onClick property
(onLoveButtonClicked). The onLoveButtonClicked
method has an empty implementation in the AndroidLove
Activity which you ve verified is being called since the app
doesn t crash. Whew!
Now it s time to implement the onLoveButtonClicked
method and make it show the text!
Implementing the action in the onLoveButtonClicked
method really consists of two parts. First, you need to get a
reference to the TextView and then you need to set the
visibility property to true. Sounds simple enough, right?
public class AndroidLove extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);;
setContentView(R.layout.main);;
}
public void onLoveButtonClicked(View view) {
TextView haikuTextView =
}
}
Cool! Let s get started...Below is the main.xml layout. Now that you have the love
_
button_text property, you should have used it in the Button
definition to set the text form the strings.xml resources.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=
/>
<TextView android:text="@string/haiku"
android:id="@+id/haikuTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
@string/love_button_text
Here s the prefix
telling the view
rendering to use a
String resource
And here s the name of
the String resource to use.
you are here ?? 55
working with feeds
Whew! You added the Button, which had some weird text. And to fix
that, you added a new String resource, and used that new String resource
from the Button s android:text attribute. Let s see if it all worked!
Run the app again...
And it works! The button looks good!
The button is displayed
with the correct text
from the String resource.
??????????????????????????????????
??????????????????????????????????????????
????????????????????????????????????????????????
????????????????????????????????????????????
Test Drive
56 Chapter 2
hiding text
Hide the haiku text
Now that the Button is added and looking good, it s time
to move on to the next step: hiding the haiku text.
How are you going to do this?
Well, two strategies are probably coming into your head
right now. You could remove the TextView and it back
once the button is pushed or you could set the text to be
invisible and make it visible once a user presses the button.
Let s go with the invisible text option!
OK, but that s not a huge help, right? You need to know
how to hide text. This is something new that you haven t
done yet and you need to know where to find out about
new things in Android. Luckily, Android comes with great
online documentation for just this reason! You can view is
at developer.android.com/reference.
You need
to hide
this text.
developer.android.com/reference
Go to the online
Android documentation
now at developer.
android.com/
reference.
Do this!
you are here ?? 57
working with feeds
Documentation Navigation Up Close
This area lists all
of the packes in
the documentation.
Click on one to
view the package
documentation.
In this case, the
android.widget
package is selected.
Once a package
is selected, this
section will show
all of the classes
in that package.
In this case, the
TextView is selected.
When you click on a class or a
package, the main panel will show the
details for what you ve selected.
If you know the class you re
looking for, but now the package,
you can type it in here to search
the documentation.
Let s take a quick look around the Android online documentation
to get acquainted. You can navigate to what you re looking for by
either selecting the package and class name, or searching for a class
name in the search box on the top right. Now since you re looking
to update an attribute on the TextView, you need to look at the
TextView documentation.
58 Chapter 2
android online docs
Browse the XML attributes
As you browse the documentation for TextView,
you ll notice it has a number of Java methods, but
it also has XML attributes listed. That s because
internally, TextView is a complete Java class.
Since you re working with the main.xml layout
definition in XML, focus on the XML attributes.
Does any look interesting? You re looking
for something that can hide the text...
This looks perfect!
It says it can control the visibility of a view. That s
exactly what you want! Using this you can make the
entire TextView invisible when the app starts up.
So how does it work?
you are here ?? 59
working with feeds
View XML attribute details
If you click on any attribute, you ll be taken to a
section that details the usage of that attribute. Click
on android:visibility, you ll be taken to the
detail section on it s usage.
Click here to view
the usage details for
android:visibility.
This tells us the usage is like this:
android:visibility = invisible
This is the name of the XML attribute,
which matches the name in the docs.
Use invisible since you
want to hide the view.
Attribute values are
always in quotes.
Detailed usage for
android:visibility.
60 Chapter 2
making the text invisible
????????????????????????????????????????????????????
??????????????????????????????????????????????????????
????????????????????????????????????????????????
????????????????????????????????????????????????????????????
????????????????????????????????????????????????
ence/android/view/View.html#attr_android:visibility
Look in the URL after you go
to the android:visibility details
and you ll see View in the URL
now instead of TextView .
View is a base class that other widgets inherit from
The View.java class is a base class with several cross widget methods,
attributes, and constants. And if you look at the headers for both
Button and TextView, you ll see that they both inherit from View.
The Android docs include superclass methods descriptions along with
the locally implemented methods (but if you look close you will see that
the android:visibility attribute was located in a section called
Inherited XML Attributes).
you are here ?? 61
working with feeds
Below is the main.xml layout code. Update this code with the
android:visibility set to invisible. This will hide the
TextView and with it the haiku text.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:text="@string/love_button_text"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="@string/haiku"
android:id="@+id/haikuTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Add the
android:visibility
attribute here.
62 Chapter 2
testing the hidden text
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:text="@string/love_button_text"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="@string/haiku"
android:id="@+id/haikuTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
android:visibility= invisible
Below is the main.xml layout code. You should have updated
this code with the android:visibility set to invisible.
This should hide the TextView and with it the haiku text.
Here s the android:visibility attribute
set to invisible. This should hide the
whole haiku TextView!
you are here ?? 63
working with feeds
You ve hidden the TextView with the haiku on it with the
android:visibility attribute. Now run the app and
make sure it worked!
The text is gone. Great job!
Setting the
android:visivibility
attribute to invisible
hid the text.
????????????????????????????????????????????????
????????????????????????????????????????????????????
????????????????????????????????????????????????
??????????????????????????????????????????????????????
????????????????????????????????????????????????????
Let s get that button working!
Test Drive
64 Chapter 2
the onClick attribute
Make the button show the haiku
XML
main.xml
<Button android:text= @+id/Button01
android:id= @+id/Button01
android:layout_width= wrap_content
android:layout_height= wrap_content
/>
android:onClick= onLoveButtonClicked
The onClick attribute
added to the Button.
Pointing to the
onLoveButtonClicked
method.
The Button
definition
from main.xml
It s time to start making that Button work! There is
an attribute on the Button View for just this purpose
called android:onClick. The value for the
attribute is the name of the action you want to use.
Let s use it now!
Add the android:onClick property to the
Button definition in main.xml. Give is a value of
onLoveButtonClicked to be descriptive of what
the Button is supposed to do.
you are here ?? 65
working with feeds
??????????????????????????????????????????????
????????????????????????????????????????????????????????????????????????
????????????????????????????????????????????????????????????????????????
????????????????????????????????????????????????????????
You ll get an error like
this if you run your
app now and press the
button. This is because
onLoveButtonClicked
isn t defined yet.
Actually, it s a Java method.
It s just not written yet...
So far, you ve updated the screen
layout, added a new View to the screen,
modified and added String resources.
All of these changes control the way
the app starts. But for the button action,
you ll be making a change that a user
can initiate while the app is runningadding
behavior to the app. And
Android app behavior is defined in Java.
So, let s define onLoveButtonClicked now...
66 Chapter 2
java source
Defining onLoveButtonClicked
Android
Love
Project
src
gen
assets
res
Your project s
Java source code
is all in here.
config
files
Android
Love
.java
com
headfirst
labs
android
love
So defining onLoveButtonClicked
in the android:onClick property
on the Button is calling some kind of
Java method. But where is that method
supposed to go?
Let s start by taking a look at the Java
source code in your project and it s contents.
This is the package com.
headfirstlabs.android.
love that you defined
in the project creation
dialog in chapter 1. This is the only Java
source file in your
project created by the
new project wizard.
Only one Java source file created by the wizard?
Let s take a closer look at it...
you are here ?? 67
working with feeds
public class AndroidLove extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);;
setContentView(R.layout.main);;
}
}
AndroidLove.java
The AndroidLove Activity
The AndroidLove class is a subclass of a built
in Android class called Activity. Think of
an Activity as the Java code that supports
a screen. And in this case, AndroidLove is
actually the Activity that supports your main
screen you re defining in main.xml.
Double click on AndroidLove.java and
Eclipse will automatically open it in a Java editor.
The source for
AndroidLove.java
The button is expecting to call a method in this class.
Since the AndroidLove Activity is
setting the main.xml layout on the screen,
the Android action code is going to look for the
method defined in the android:onClick
attribute here. The action code is going to look
for a method in the following format.
AndroidLove extends
Activity
This code is setting the view defined
in main.xml on the screen. You ll see
how it works soon!
public void onLoveButtonClicked View view (
(
The method name needs
to match the value of the
android:onClick attribute
The method needs to take one
argument of a View. This is the
view that was clicked.
68 Chapter 2
action method
Add the action method
public class AndroidLove extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);;
setContentView(R.layout.main);;
}
public void onLoveButtonClicked(View view) {
//doesn t do anything yet
}
}
AndroidLove.java
You can run the app and click
the button now. Nothing will
happen, but the app won t force
close either.
Let s add the onLoveVuttonClicked method to
AndroidLove now. Once this is done, we can run
the app and press the button and it shouldn t break.
The new
onLoveVuttonClicked
method that s
referenced from the
android:onClick Button
attribute.
Run the app now and press the button. It won t perform
any actions yet. But you also won t see errors either.
Test Drive
you are here ?? 69
working with feeds
Implementing the action method
Great work so far! The Button has an action method
configured in the android:onClick property
(onLoveButtonClicked). The onLoveButtonClicked
method has an empty implementation in the AndroidLove
Activity which you ve verified is being called since the app
doesn t crash. Whew!
Now it s time to implement the onLoveButtonClicked
method and make it show the text!
Implementing the action in the onLoveButtonClicked
method really consists of two parts. First, you need to get a
reference to the TextView and then you need to set the
visibility property to true. Sounds simple enough, right?
public class AndroidLove extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);;
setContentView(R.layout.main);;
}
public void onLoveButtonClicked(View view) {
TextView haikuTextView =
}
}
Cool! Let s get started...