Download GameBeen_1 - iba-s12

Game_APNAGAME
Just sketch and imagine what features should be there in this game,this application need the
following things,




A splash sequence that displays the application name, version, and developer name,
A way to view scores
An explanation of the game rules
A way to store game settings
In first step we need 6 screens(activities)
1.
2.
3.
4.
5.
6.
A startup screen
A main menu screen
A game play screen
A settings screen
A scores screen
A help screen
We need six acitivty classes,each class represent an activity. A good design practice is to
implement a base Activity class with shared components,which you can simply call QuizActivity.
Features of these activities would be,
QuizActivity—Derived from android.app.Activity, this is the base class.Here, define application
preferences and other application-wide settings and features.
QuizSplashActivity—Derived from QuizActivity, this class represents the splash screen.
QuizMenuActivity—Derived from QuizActivity, this class represents the main menu screen.
QuizHelpActivity—Derived from QuizActivity, this class represents the help screen.
QuizScoresActivity—Derived from QuizActivity, this class represents the scores screen.
QuizSettingsActivity—Derived from QuizActivity, this class represents the settings screen.
QuizGameActivity—Derived from QuizActivity, this class represents the game screen.
Defining Splash Screen Features
The splash screen serves as the initial entry point for the Been There, Done That! game. Its
functionality should be encapsulated within the QuizSplashActivity class. This screen should do
the following:
 Display the name and version of the application
 Display an interesting graphic or logo for the game
 Transition automatically to the main menu screen after a period of time
Defining Main Menu Screen Features
The main menu screen serves as the main navigational screen in the game. This screen displays
after the splash screen and requires the user to choose where to go next. Its functionality
should be encapsulated within the QuizMenuActivity class.
This screen should do the following:
. Automatically display after the splash screen
. Allow the user to choose Play Game, Settings, Scores, or Help
Defining Help Screen Features
The help screen tells the user how to play the game. Its functionality should be
encapsulated within the QuizHelpActivity class. This screen should do the
following:
. Display help text to the user and enable the user to scroll through text
. Provide a method for the user to suggest new questions
Defining Scores Screen Features
The scores screen enables the user to view game scores. Its functionality should be
encapsulated within the QuizScoresActivity class. This screen should do the
following:
. Display top score statistics
. Show the latest score if the user is coming from the game screen
Defining Settings Screen Features
The settings screen allows users to edit and save game settings, including username
and other important features. Its functionality should be encapsulated within the
QuizSettingsActivity class. This screen should do the following:
. Allow the user to input game settings
. Allow the user to invite friends to play
Defining Game Screen Features
The game screen displays the trivia quiz. Its functionality should be encapsulated
within the QuizGameActivity class. This screen should do the following:
. Display a series of yes/no questions . Handle input and keep score and state of the quiz
. Transition to the scores screen when the user is finished playing
STEP 2
Creating a New Android Project
You can begin creating a new Android project for your application by using the
Eclipse Android Project Wizard.
The project has the following settings:
1)Project name: ApnaGame
2) Build target: Android 2.3.3 OR Android 4.0 + Google APIs (API Level 10)
3) Application name: Nasr You, Done That!
4)Package name: pk.edu.iba
5) Create activity: QuizSplashActivity (Make sure that your R file has been generated,without R
file don’t go further,).clean the build or go into the android tools and fix the problem.
STEP 3(adding resources)
FOR This application ,we need some additional resources,
We need to add a layout file for each activity,and a text string for each
activity name,
Adding String Resources
Strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Nasr You, Done That!</string>
<string name="help">Help Screen</string>
<string name="menu">Main Menu Screen</string>
<string name="splash">Splash Screen</string>
<string name="game">Game Screen</string>
<string name="scores">Scores Screen</string>
</resources>
Adding Layout resources
Next, you need layout resource files for each activity. Begin by renaming the main.xml layout
to splash.xml. Then copy the splash.xml file five more times, resulting in one layout for each
activity: game.xml, help.xml, menu.xml,scores.xml, and settings.xml. You might notice that
there is an error in each Layout file. This is because the TextView control in the layout refers to
the @string/hello string, which no longer exists. For each layout file, you need to use the
Eclipse layout editor to change the String resource loaded by the TextView control. For
example, game.xml needs to replace the reference to @string/hello with the new string you
created called @string/game. Now when each layout loads, it displays the screen it is supposed
to represent.
Adding Drawable Resources
This is a icon.png ,copy/pas tethem into the (/drawable-ldpi, /drawable-mdpi, and /drawablehdpi), files used by default. only a single reference to the icon is required. Just make sure all of
the icons are named identically. This enables the Android operating system to choose the most
appropriate icon version for the device.(if you are unable to paste it in the required folder than
you can downloads the project from the wiki,then copy this icon.png from it and paste it into
your project.)
Hdpi
ldpi
mdpi
{(just for reading for your)While you are adding resources, you should change the icon for your
application to something more appropriate. To do this, create a 48×48 pixel PNG file called
quizicon. png and add this resource file to the /drawable resource directory. Then you can
delete the icon.png}
Implementing Application Activities
To implement a base Activity class, simply copy the source file called QuizSplashActivity.java.
Name this new class file QuizActivity and save the file. This class should look very simple for
now:
package pk.edu.iba;
import android.app.Activity;
public class QuizActivity extends Activity {
/** Called when the activity is first created. */
public static final String GAME_PREFERENCES="GamePref";
}
You will add to this class later. Next, update the QuizSplashActivity class to extend from the
QuizActivity class instead of directly from the Activity class.
Creating the Rest of the Application Activities
Now perform the same steps five more times, once for each new activity:
QuizMenuActivity, QuizHelpActivity, QuizScoresActivity,QuizSettingsActivity, and
QuizGameActivity.. (just copy the QuizSplashActivity and paste it in the pk.edu.iba package and
change the setcontentView)You need to modify each class to load the specific layout associated
with that activity. For example, in the QuizHelpActivity class, modify the setContentView()
method to load the layout file you created for the help screen as follows:
setContentView(R.layout.help);
You need to make similar changes to the other activity files, such that each call to
setContentView() loads the corresponding layout file.
STEP 4
Updating the Android Manifest File
You now need to make some changes to the Android manifest file. First, modify the application icon resource to point at the
@drawable/quizicon icon you created.,
you need to register all your new activities in the manifest file so they run properly. Finally,
set the Debuggable application attribute to true and verify that you have QuizSplashActivity
set as the default activity to launch,(try to do this job using Gui of AndroidManifest and not
type the xml code,because you have already done in previous Activities),(what will you do if
you have to set anyother activity as a launcher activity? Make it by using the GUI of
androidManifest ,not by changing into the xml)
Step 5 (Preferences)
topic of 3 march 2012
Creating Application Preferences
“Nasr You, Done That! “application needs a simple way to store some basic state information
and user data. You can use Android’s shared preferences (android.content.SharedPreferences)
to add this functionality.
You can access shared preferences, by name, from any activity within the
application.Therefore, declare the name of your set of preferences in the base class
QuizActivity so that they are easily accessible to all subclasses:
public static final String GAME_PREFERENCES = “GamePrefs”;
There is no practical limit to the number of sets of shared preferences you can
create. You can use the preference name string to divide preferences into categories,
such as game preferences and user preferences. How you organize shared
preferences is up to you.
To add shared preferences to the application, follow these steps:
1. Use the getSharedPreferences() method to retrieve an instance of a
SharedPreferences object within your Activity class.
2. Create a SharedPreferences.Editor object to modify preferences.
3. Make changes to the preferences by using the editor.
4. Commit the changes by using the commit() method in the editor.
Saving Specific Shared Preferences
Each preference is stored as a key/value pair. Preference values can be the following
types:
Boolean
Float
Integer
Long
String
After you decide what preferences you want to save, you need to get an instance of
the SharedPreferences object and use the Editor object to make the changes and
commit them. In the following sample code, when placed within your Activity
class, illustrates how to save two preferences—the user’s name and age:
SharedPreferences settings =
getSharedPreferences(GAME_PREFERENCES, MODE_PRIVATE);
SharedPreferences.Editor prefEditor = settings.edit();
prefEditor.putString(“UserName”, “JaneDoe”);
prefEditor.putInt(“UserAge”, 22);
prefEditor.commit();
You can also use the shared preferences editor to clear all preferences, using the
clear() method, and to remove specific preferences by name, using the remove()
method.
Retrieving Shared Preferences
Retrieving shared preference values is even simpler than creating them because you
don’t need an editor. The following example shows how to retrieve shared preference
values within your Activity class:
SharedPreferences settings =
getSharedPreferences(GAME_PREFERENCES, MODE_PRIVATE);
if (settings.contains(“UserName”) == true) {
// We have a user name
String user = Settings.getString(“UserName”, “Default”);
}
You can use the SharedPreferences object to check for a preference by name,
retrieve strongly typed preferences, or retrieve all the preferences and store them
in a map.
Although you have no immediate needs for shared preferences yet in Been There,
Done That!, you now have the infrastructure set up to use them as needed within
any of the activities within your application. This will be important later when you
implement each activity in full in subsequent hours
Designing the Splash Screen (splash.xml)
Focus on designing the splash screen in portrait mode (not in portrait orientation) and we are
going to use two common screen views(controls) on splash screen
1) A text view control displays a text string.
2) An imageView control displays a graphic.
3)To organize various view controls on the screen,we would use layout controls,For example
linearLay out control enables placement of child views in a vertical or horizontal stack
Figure below shows the layout of the splash screen
Adding new project resources
Now we have a layout design of our splash screen,now we need to create string,color and
dimension resources to use within this layout,
1)add four graphic resources(splash1.png,splash2.png, splash3.png,splash4.png) in the
res/drawable directories (ldpi,hdpi,mdpi) like this in figure below
These graphics will be displayed in
the table layout control in the centre
of the splash screen
Now add three new strings /res/values/strings.xml file,(remove the splash string because now
no longer you need it) your strings.xml should be like this
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Nasr You, Done That!</string>
<string name="help">Help Screen</string>
<string name="menu">Main Menu Screen</string>
<string name="game">Game Screen</string>
<string name="scores">Scores Screen</string>
<string name="settings">Settings Screen</string>
<string name="app_logo_top">NASR THERE</string>
<string name="app_logo_bottom">DONE THAT!</string>
<string name="app_version_info">version 1.0.0\copyright
Rights Reserved</string>
</resources>
@ 2012 IBA(FCS)\All
Now create some dimension resource in a new resource file called
/res/values/dimens.xml (create the xml file by(right click on the values folder) FileNew
otherANDROIDAndroid XML Value file)Don’t type the code,yo
your result should be like this
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="logo_size">48dp</dimen>
<dimen name="version_size">15dp</dimen>
<dimen name="version_spacing">3dp</dimen>
</resources>
Now your colors.xml file should be like this
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="logo_color">#FFFF0F</color>
<color name="version_color">#F0F0F0</color>
<color name="version_bkgrd">#1A1A48</color>
</resources>
SAVE YOUR WORK
Updating the Splash Screen Layout
Remove all controls from the splashl.xml,just right clik on the control and remove it Now take
the following steps to generate the desired layout, based on your intended design
1. Begin by adding a LinearLayout control and setting its background attribute to
@android:color/black (a built-in color resource) and its orientation to vertical. Add all
subsequent controls as child views inside this control.
2. Add a TextView control called TextViewTopTitle. Set layout_width to match_parent and
layout_height to wrap_content. Set the control’s text attribute to the appropriate string
resource, its textColor attribute to the appropriate color resource, and its textSize to the
dimension resource you created for that purpose.
3. Add a TableLayout control called TableLayout01. Set its layout_width attribute to
match_parent and its layout_height attribute to wrap_content.Also, set the stretchColumns
attribute to * to stretch any column, as necessary,to fit the screen .
4. Within the TableLayout control add a child TableRow control. Within this TableRow control,
add two ImageView controls. For the first ImageView control, set the src attribute to the
5.
6.
7.
8.
9.
splash1.png drawable resource called @drawable/ splash1. Add a second ImageView
control and set its src attribute to the @drawable/splash1 drawable resource.
Repeat step 4, creating a second TableRow. Again, add ImageView controls for splash3.png
and splash4.png.
Add another TextView control called TextViewBottomTitle within the parent LinearLayout.
Set its layout_width attribute to match_parent and layout_height to wrap_content. Set its
text attribute to the appropriate string, its textColor attribute to the appropriate color
resource, and its textSize attribute to the dimension resource you created for that purpose.
For the version information, create one last TextView control, called
TextViewBottomVersion. Set its layout_width attribute to match_parent and layout_height
to match_parent. Set its text attribute to the appropriate string, its textColor attribute to
the grayish color, and its textSize attribute to the dimension resource you created. Also, set
its background attribute to the color resource (dark blue) and lineSpacingExtra to the
spacing dimension resource value you created for that purpose.
Finally, tweak the layout_gravity and gravity settings on the various controls until you think
the layout looks reasonable in the Eclipse resource editor preview.
At this point, save the splash.xml layout file and run the Nasr There, Done That! application
in the Android emulator. The Splash screen should look as shown in figure
Working With Animation In Android
Now we have to add some sort of animation in our Splash screen.
Android platform provide four type of animation graphics.
Animated GIF images—Animated GIFs are self-contained graphics files with multiple frames
Frame-by-frame animation—The Android SDK provides a similar mechanism for frame-byframe animation in which the developer supplies the individual graphic frames and transitions
between them (see the AnimationDrawable class).
Tweened animation—Tweened animation is a simple and flexible method of defining
specific animation operations that can then be applied to any view or layout.
OpenGL ES—Android’s OpenGL ES API provides advanced three-dimensional drawing,
animation, lighting, and texturing capabilities.
For the Nasr There, Done That! application, tweened animation makes the most sense. Android
provides tweening support for alpha (transparency), rotation, scaling, and translating (moving)
animations. You can create sets of animation operations to be performed simultaneously, in a
timed sequence, and after a delay. Thus,tweened animation is a perfect choice for your splash
screen.With tweened animation, you create an animation sequence, either programmatically
or by creating animation resources in the /res/anim directory. Each animation sequence needs
its own XML file, but the same animation may be applied to any number of View controls within
your application. You can also take advantage of built-in animation resources as well, provided
in the android.R.anim class.
Adding Animation Resources:For your splash screen, you need to create three custom animations in XML and save them to
the /res/anim resource directory: fade_in.xml, fade_in2.xml, and custom_anim.xml.The first
animation, fade_in.xml, simply fades its target from an alpha value of 0 (transparent) to an
alpha value of 1 (opaque) over the course of 2500 milliseconds,or 2.5 seconds. There is no builtin animation editor in Eclipse. Instead, it’s up to the developer to create the appropriate XML
animation sequence The fade_in.xml resource file simply has a single animation applied using
the <alpha> tag
The XML for the fade_in.xml animation should look something like this:
<?xml version=”1.0” encoding=”utf-8” ?>
<set
xmlns:android=”http://schemas.android.com/apk/res/android”
android:shareInterpolator=”false”>
<alpha
android:fromAlpha=”0.0”
android:toAlpha=”1.0”
android:duration=”2500”>
</alpha></set>
Creat the res/anim folder and than right click on the anim folder
NewotherAndroidAndroid XML FILE
Fade_in2.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="2500"
android:startOffset="2500">
</alpha>
</set>
Custom_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"/>
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="2000">
</alpha>
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale=".1"
android:fromYScale=".1"
android:toXScale="1.0"
android:toYScale="1.0"
android:duration="2000" />
</set>
Animating Specific Views
Animation sequences must be applied and managed programmatically within your Activity
class—
Animating All Views in a Layout