Color Pick Android Game for Nursery Kids an Educational Game – Complete Tutorial
Advertisement
An Android simple game specifically created for nursery kids, the concept of the game is pretty much for nursery kids, don’t shoot me with that, so it displayed lists of eight colors, basic colors absolutely, and when pressed it then tell what color it is via an audio background.
Let’s get started.
App details
App Name: Color Picker
Package Name: sutanaryan.com.colorpick;
Activity: MainActivity
manifests/
|--AndroidManifest.xml
res/
|--anim/
┌----blink.xml // This animation is used to bounce the dice number
|--drawable/
┌----icon.png // This icon is used as our Application icon
|----black.png // These images are used to display lists of ImageView colors
|----blue.png
|----brown.png
|----green.png
|----orange.png
|----red.png
|----violet.png
└----yellow.png
|--layout/
|----activity_main.xml // This file contains our App main activity
|--raw/
┌----black.mp3 // These mp3 are used to tell what color is pressed
|----blue.mp3
|----brown.mp3
|----green.mp3
|----orange.mp3
|----red.mp3
|----violet.mp3
└----yellow.mp3
|--values/
┌----colors.xml
|----strings.xml
└----styles.xml
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="sutanaryan.com.colorpick">
<application
android:allowBackup="true"
android:icon="@drawable/icon"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<!--Display lists of colors in table layout format
Two columns and 4 rows-->
<TableLayout
android:id="@+id/buttonTableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:stretchColumns="0,1,2">
<TableRow android:id="@+id/tableRow0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView android:id="@+id/imageBlack"
android:adjustViewBounds="false"
android:src="@drawable/black"
android:onClick="HandleClick" />
<ImageView android:id="@+id/imageYellow"
android:adjustViewBounds="false"
android:src="@drawable/yellow"
android:onClick="HandleClick" />
</TableRow>
<TableRow android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView android:id="@+id/imageViolet"
android:adjustViewBounds="false"
android:src="@drawable/violet"
android:onClick="HandleClick" />
<ImageView android:id="@+id/imageRed"
android:adjustViewBounds="false"
android:src="@drawable/red"
android:onClick="HandleClick" />
</TableRow>
<TableRow android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView android:id="@+id/imageGreen"
android:adjustViewBounds="false"
android:src="@drawable/green"
android:onClick="HandleClick" />
<ImageView android:id="@+id/imageBlue"
android:adjustViewBounds="false"
android:src="@drawable/blue"
android:onClick="HandleClick" />
</TableRow>
<TableRow android:id="@+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView android:id="@+id/imageOrange"
android:adjustViewBounds="false"
android:src="@drawable/orange"
android:onClick="HandleClick" />
<ImageView android:id="@+id/imageBrown"
android:adjustViewBounds="false"
android:src="@drawable/brown"
android:onClick="HandleClick" />
</TableRow>
</TableLayout>
</LinearLayout>
anim/blink.xml
A predifined values animation.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="0"/>
</set>
Advertisement
MainAcivity.java
Complete code for our MainActivity class
package sutanaryan.com.colorpick;
import android.app.Activity;
import android.os.Bundle;
import android.media.AudioManager;
import android.media.SoundPool;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
public class MainActivity extends Activity {
SoundPool color_sound = new SoundPool(1,AudioManager.STREAM_MUSIC,0);
ImageView imageBlack, imageBlue, imageBrown, imageGreen, imageOrange, imageRed, imageViolet, imageYellow;
int sound_color;
int black, blue, brown, green, orange, red, violet, yellow;
boolean blinking = false; // Is color blinking?
// Set our animation
private Animation blinkAnimation;
// ImageView ID
Integer colorID;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initial sound
black = color_sound.load(this,R.raw.black,1);
blue = color_sound.load(this,R.raw.blue,1);
brown = color_sound.load(this,R.raw.brown,1);
green = color_sound.load(this,R.raw.green,1);
orange = color_sound.load(this,R.raw.orange,1);
red = color_sound.load(this,R.raw.red,1);
violet = color_sound.load(this,R.raw.violet,1);
yellow = color_sound.load(this,R.raw.yellow,1);
// get reference to image widget
imageBlack = (ImageView) findViewById(R.id.imageBlack);
imageBlue = (ImageView) findViewById(R.id.imageBlue);
imageBrown = (ImageView) findViewById(R.id.imageBrown);
imageGreen = (ImageView) findViewById(R.id.imageGreen);
imageOrange = (ImageView) findViewById(R.id.imageOrange);
imageRed = (ImageView) findViewById(R.id.imageRed);
imageViolet = (ImageView) findViewById(R.id.imageViolet);
imageYellow = (ImageView) findViewById(R.id.imageYellow);
//load die shake animation
blinkAnimation = AnimationUtils.loadAnimation(this, R.anim.blink);
blinkAnimation.setRepeatCount(3); // animation repeats 3 times
// Tell the color audio right after the animation is done or end
blinkAnimation.setAnimationListener(blink_listener );
}
// Handle image click
public void HandleClick( View view ) {
// Get imageView ID
colorID = view.getId();
if (! blinking) {
blinking = true;
switch (colorID) {
case R.id.imageBlack:
imageBlack.startAnimation(blinkAnimation);
sound_color = black;
break;
case R.id.imageBlue:
imageBlue.startAnimation(blinkAnimation);
sound_color = blue;
break;
case R.id.imageBrown:
imageBrown.startAnimation(blinkAnimation);
sound_color = brown;
break;
case R.id.imageGreen:
imageGreen.startAnimation(blinkAnimation);
sound_color = green;
break;
case R.id.imageOrange:
imageOrange.startAnimation(blinkAnimation);
sound_color = orange;
break;
case R.id.imageRed:
imageRed.startAnimation(blinkAnimation);
sound_color = red;
break;
case R.id.imageViolet:
imageViolet.startAnimation(blinkAnimation);
sound_color = violet;
break;
case R.id.imageYellow:
imageYellow.startAnimation(blinkAnimation);
sound_color = yellow;
break;
default:
}
// Set color back to it's state
blinking = false;
}
}
private Animation.AnimationListener blink_listener = new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
// Play dice sounds
color_sound.play(sound_color,1.0f,1.0f,0,0,1.0f);
}
};
}
values/colors.xml
You can left this file untouch
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>
values/strings.xml
You can left this file untouch
<resources>
<string name="app_name">Color Picker</string>
</resources>
values/styles.xml
You can left this file untouch
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
That’s it, happy coding ^_^
Advertisement