Tuesday, August 4, 2015

// //

Play sound when clicking picture inside gridview

Hi there?

Today were going to the another series of tutorials pertaining on listview...
In the previous activity we have successfully make a gallery application by using gridview..

But this time what were going to do is how to play sound while clicking item in the gridview.

Please take a look into the previous activity..

Now, then lets get started..
Make a raw folder and then paste your sounds:
gridview


Create a xml file and name it gridview_item:

In your gridview_item paste this code.


    
    


And make a java file 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
    }
}

And then make another xml file and name it activity_main
activity_main.xml


    



and then make a java file and name it (MainActivity)
please provide your own sounds
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);
//please provide your own sounds

        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;

        public MyAdapter(Context context)
        {
            inflater = LayoutInflater.from(context);
//provide your own picture!
            items.add(new Item("Image 1", R.drawable.tarpaulin));
            items.add(new Item("Image 2", R.drawable.nature2));
            items.add(new Item("Image 3", R.drawable.churchlogo));
            items.add(new Item("Image 4", R.drawable.nature3));
            items.add(new Item("Image 5", R.drawable.tree2));
        }

        @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;
            }
        }
    }



}

please provide your own photo:
//provide your own picture!
            items.add(new Item("Image 1", R.drawable.tarpaulin));
            items.add(new Item("Image 2", R.drawable.nature2));
            items.add(new Item("Image 3", R.drawable.churchlogo));
            items.add(new Item("Image 4", R.drawable.nature3));
            items.add(new Item("Image 5", R.drawable.tree2));