In this tutorial I’m going to deal with some very
basic concepts of android app making. Birthday is a game by which you
can find out the date of the month when your friend was born by asking five
questions.
Each question asks whether the day is in one
of the five sets of numbers.
1) Download
the resources which I have attached to the “download resource” link above.
2) Fire
up eclipse and start by making a new android application project.
3) Give
your application a unique name in my case it’s Birthday Guess. Set minimum
required SDK level to API 8 means that our game will run on all the devices
having Android 2.2 or above. Leave the rest of the settings as it is and click
next.
4) Leave
the default settings and click next.
5) Leave
the default settings and click next.
6) Leave
the default settings and click next.
7) Give
a activity name, I have given Guess. Name of the activity must start with a
capital letter. This activity is the main activity of your game.
8) Copy
the images in the “images” folder downloaded previously and paste into the your
project’s “Birthdday Guess >> res >> drawable-hdpi” folder. You can also paste inside eclipse also. Right
click drawable-hdpi and click paste.
9) After
the project is created eclipse opens the xml layout file which is in the
res->layout folder.
10) Select
the Hello World text by clicking on it and hit delete button to delete. When
the text is deleted click anywhere on this layout to open the properties of the
screen in properties panel.
11) In
the properties panel set the background value to #B38761 and hit enter. This
gives a beautiful color to our game background. If you want to set background
color of your choice then find the color code online and enter with a # in
background property. You can also use Photoshop or gimp to find codes for the
color.
12) Expand
Images & Media and drag and drop ImageView into the Birthday Guess layout.
13) When
you drop the ImageView in the layout it will open the Resource Chooser window.
Select the first image and click ok.
14) Now
our layout is filled with the image we wanted to set. If your image don’t fit
the screen then expand it to cover full screen.
15) Give
this image a unique identity by changing the id property in the Properties
panel to first_image hit click when eclipse asks for rename resource. This id
property gives a unique identity to this image which we will use for
referencing this image from our Java code later.
16) Expand
Form Widgets if it’s not and drag and drop TextView below the image.
17) Set
the Id to tv, change the Text field to “Is your birthday in this set”, Text
Color value #FFFFFF(code for white color) and Text Size to 40sp. This will
change the text as shown below, if your text doesn’t cover the full screen
horizontally expand it.
18) Now
we will add to buttons. Expand Form Widgets if it is not and drag and drop two
buttons below the text.
19) Select
first button and change properties in the properties panel. Set Id to
“buttonYes”, Text to “Yes”, Text Size to”40sp”. I have also set the background
color of the button to “#CCCCCC”, which is optional. Now select second button
and repeat the same process, set Id to “buttonNo”, Text to “No”, Text Size to
“40sp” and background color to “#CCCCCC”(optional).
20) We
have completed our layout design now it’s time to add tween animation to the
image in the layout. We will start by adding a new xml file. Click the xml
creator button shown in the figure, this will open you a new window. Change the
resource type to “Tween Animation”, give it a name “animation” and set the root
element to “Set” if it not then finally click finish button.
21)
Change animation xml file as shown in the
figure. “set” tag is used for setting the animation, inside “set” we have
“scale” tag which will scale the image. “scale” tag is set to the property
android:fromXScale="0.0" android:toXScale="1.0" scale image from 0 to original size
along x-axis.
android:fromYScale="0.0"
android:toYScale="1.0" scale
image from 0 to original size along y-axis.
android:pivotX="50%" android:pivotY="50%" the animation will start from center of
image.
android:duration="2000" set the duration of
animation to 2000 milliseconds(2 seconds).
Save the file.
22) Now
it’s time to bring our game to life by adding some Java code to our main
activity.
The birthday is the sum of the first numbers
in the sets where the day appears. For example, if the birthday is 19, it
appears in Set1, Set2, and Set5. The first numbers in these threesets are 1, 2, and 16. Their sum is 19.
23) Open
“Guess.java” (expand “src” -> “com.example.birthdayguess” ->”
Guess.java”)
24) Add
two public integer values inside class Guess. “dayTotal” variable adds days
every time button is pressed, and “i” is used to change the animaton.
public int dayTotal=0,i=0;
25) This
line creates a ImageView variable “image ”and reference to the image in our
layout. ImageView find the image by the id “first_image” which we gave to the
image previously.
final ImageView
image=(ImageView) findViewById(R.id.first_image);
26) In
the same way create two Button variables “buttonYes” and “buttonNo” and link
them to the buttons in the layout through the id we gave them. TextView
variable “text” links to the text view.
Button buttonYes=(Button)
findViewById(R.id.buttonYes);
Button buttonNo=(Button)
findViewById(R.id.buttonNo);
final TextView
text=(TextView) findViewById(R.id.tv);
27) Remember
we created the animation xml file which plays the animation. It’s time to add
that animation to the image in our game. Create a “anim” variable of the
Animation class, and we associate this animation to this “anim” variable
through “AnimationUtils.loadAnimation(Guess.this,R.anim.animation)”. We
reference the animation through “R.anim.animation”, this refers to the
animation.xml file in the directory “res>>anim>>animation.xml”.
“image.startAnimation(anim)” starts the animation for image.
final Animation
anim=AnimationUtils.loadAnimation(Guess.this,R.anim.animation);
image.startAnimation(anim);
28) Set
the on click listener on the button which add a number if “Yes” button is
clicked, changes the image by “image.setImageResource(R.drawable.second)”, plays the animation “anim” and increase the
value of “i” everytime we click button so that the image is changed.
When the value “i” becomes 4 we change the “text” to “Your birthday is +
dayTotal(the numeric value of dayTotal)+” and ask for restart. If user presses
“Yes” again the whole process will restart again and will set the value of “i”
and “dayTotal” back to zero.
buttonYes.setOnClickListener(new
OnClickListener(){
@Override
public
void onClick(View arg0) {
//
TODO Auto-generated method stub
if(i==0){
dayTotal+=1;
image.setImageResource(R.drawable.second);
image.startAnimation(anim);
i++;
}
else
if(i==1){
dayTotal+=2;
image.setImageResource(R.drawable.third);
image.startAnimation(anim);
i++;
}
else
if(i==2){
dayTotal+=4;
image.setImageResource(R.drawable.fourth);
image.startAnimation(anim);
i++;
}
else
if(i==3){
dayTotal+=8;
image.setImageResource(R.drawable.fifth);
image.startAnimation(anim);
i++;
}
else
if(i==4){
dayTotal+=16;
image.setImageResource(RESULT_OK);
text.setText("Your
birthday is "+dayTotal+" .Restart?");
i++;
}
else
if(i==5){
i=0;
dayTotal=0;
image.setImageResource(R.drawable.first);
image.startAnimation(anim);
text.setText("Is
your birthday in this set?");
}
}});
29) Set
the on click listener to “buttonNo”. Everytime “No” button pressed we only
change the animation and increment the value of “i”, but the value of
“dayTotal” is not changed. When the value of “i” becomes 5 we exit the
application.
buttonNo.setOnClickListener(new
OnClickListener(){
@Override
public
void onClick(View arg0) {
//
TODO Auto-generated method stub
if(i==0){
image.setImageResource(R.drawable.second);
image.startAnimation(anim);
i++;
}
else
if(i==1){
image.setImageResource(R.drawable.third);
image.startAnimation(anim);
i++;
}
else
if(i==2){
image.setImageResource(R.drawable.fourth);
image.startAnimation(anim);
i++;
}
else
if(i==3){
image.setImageResource(R.drawable.fifth);
image.startAnimation(anim);
i++;
}
else
if(i==4){
image.setImageResource(RESULT_OK);
text.setText("Your
birthday is "+dayTotal+" .Restart?");
i++;
}
else
if(i==5){
finish();
System.exit(0);
}
}});
}
@Override
public boolean
onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this
adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.guess, menu);
return true;
}
}
