Making Android Kid's Zoo App (Part 2)

Now were done in designing lets go to coding:


i added explanations about the code in the comments

Make a folder in resource and named it (raw):

make sure you have your sounds...


this is were we defined our image height and width.

SquareImageView.java

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class SquareImageView extends ImageView
{
    public SquareImageView(Context context)
    {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
    }

    
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
    }
}

MainActivity.java

import java.util.ArrayList;
import java.util.List;


import android.app.Activity;
import android.content.Context;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity
{
 MediaPlayer mPlayer, mPlayer2,  mPlayer3, mPlayer4, mPlayer5 ;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mPlayer = MediaPlayer.create(MainActivity.this, R.raw.sound1);
        mPlayer2 = MediaPlayer.create(MainActivity.this, R.raw.sound10);
        mPlayer3 = MediaPlayer.create(MainActivity.this, R.raw.sound11);
        mPlayer4 = MediaPlayer.create(MainActivity.this, R.raw.sound12);
        mPlayer5 = MediaPlayer.create(MainActivity.this, R.raw.sound13);
        GridView gridView = (GridView)findViewById(R.id.gridview);
        gridView.setAdapter(new MyAdapter(this));
      
        gridView.setOnItemClickListener(new OnItemClickListener()
        {

   @Override
   public void onItemClick(AdapterView parent, View view,
     int position, long id) {
    
    //if the user clicks the specific photo in gridview this sounds will be played
    //notice the position numbers! 
    switch (position) {
             case 0:
               mPlayer.start();  // This will make  sound
               Toast.makeText(MainActivity.this, "Cat sound playing " ,
           Toast.LENGTH_SHORT).show();
               
               break;
             case 1:
               mPlayer2.start(); 
               Toast.makeText(MainActivity.this, "Cow sound playing " ,
           Toast.LENGTH_SHORT).show();
               // This will make different sound
                 break;
             case 2:
               mPlayer3.start(); // This will make different sound
              
               Toast.makeText(MainActivity.this, "Dog sound playing " ,
           Toast.LENGTH_SHORT).show();
               
               break;

             case 3:
               mPlayer4.start(); // This will make different sound
               Toast.makeText(MainActivity.this, "Monkey sound playing " ,
           Toast.LENGTH_SHORT).show();
               
               break;
                 
             case 4:
               mPlayer5.start(); // This will make different sound
                
               Toast.makeText(MainActivity.this, "Frog sound playing " ,
           Toast.LENGTH_SHORT).show();
               
               
               break;
                   }
   
   }
        });
        
        
        
    }

    
    
    private class MyAdapter extends BaseAdapter
    {
     
  
     
        private List items = new ArrayList();
        private LayoutInflater inflater;
        
//this is how we named each photo in gridview
        
        public MyAdapter(Context context)
        {
            inflater = LayoutInflater.from(context);

            items.add(new Item("Cat", R.drawable.cat));
            items.add(new Item("Cow", R.drawable.cow));
            items.add(new Item("Dog", R.drawable.dog));
            items.add(new Item("Monkey", R.drawable.monkey));
            items.add(new Item("Frog", R.drawable.frog));
        }

        @Override
        public int getCount() {
            return items.size();
        }

        @Override
        public Object getItem(int i)
        {
            return items.get(i);
        }

        
   
        
        
        @Override
        public long getItemId(int i)
        {
            return items.get(i).drawableId;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup)
        {
            View v = view;
            ImageView picture;
            TextView name;

            if(v == null)
            {
               v = inflater.inflate(R.layout.gridview_item, viewGroup, false);
               v.setTag(R.id.picture, v.findViewById(R.id.picture));
               v.setTag(R.id.text, v.findViewById(R.id.text));
            }

            picture = (ImageView)v.getTag(R.id.picture);
            name = (TextView)v.getTag(R.id.text);

            Item item = (Item)getItem(i);

            picture.setImageResource(item.drawableId);
            name.setText(item.name);

            return v;
        }

        private class Item
        {
            final String name;
            final int drawableId;

            Item(String name, int drawableId)
            {
                this.name = name;
                this.drawableId = drawableId;
            }
        }
    }



}

I think were done..
Now please dont hesitate to drop comments if you have problems