A Game with GridView

Let’s build a simple magic card trick game and in the process learn how to use GridViews. Game goes as follows :

1. Ask user to think of a card
2. Deal the cards in 3 piles and ask user to select the pile with his card
3. Repeat 2 more times
4. Reveal the card. Notify the card to any associated wearable.

What’s a GridView?

If you want to make an activity with a grid of images, you’d use a GridView. We are going to use GridView to layout cards.

public class MyActivity extends Activity {
 
        private GridView gameView;
        Button playButton;
        static CardUtils cutil;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_my);
            gameView = (GridView) findViewById(R.id.gridView1);
            playButton = (Button) findViewById(R.id.button);
            cutil = new CardUtils();
           
            gameView.setAdapter(new ImageAdapter(this, cutil.playingCardsArrayList, 21));
            playButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent i = new Intent(getApplicationContext(), SplitActivity.class);
                    startActivity(i);
                }
            });
        }
    }

We are going to use 3 gridviews to show the 3 piles. Do the dealing again for 3 times before guessing the card. So we have to put the cards back together and deal them again inside the button Onclick method. We reset the adapters on click of the button indicating the pile has been reset.

public class SplitActivity extends Activity {
        GridView g4,g2,g3;
        Button blueButton, violetButton, yellowButton;
        int playCount=0;
        private ImageAdapter a1, a2, a3;
        Intent doneIntent;
     
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.dealt_layout);
         g2 = (GridView) findViewById(R.id.gridView2);
         g3 = (GridView) findViewById(R.id.gridView3);
         g4 = (GridView) findViewById(R.id.gridView4);
         
         blueButton = (Button) findViewById(R.id.button1);
         violetButton = (Button) findViewById(R.id.button2);
         yellowButton = (Button) findViewById(R.id.button3);
         
         MyActivity.cutil.deal();
         
         g2.setAdapter(a1 = new ImageAdapter(this, MyActivity.cutil.pile1ArrayList,7));
         g3.setAdapter(a2 = new ImageAdapter(this, MyActivity.cutil.pile2ArrayList,7));
         g4.setAdapter(a3 = new ImageAdapter(this, MyActivity.cutil.pile3ArrayList,7));
        
         blueButton.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 if (playCount < 4) {
                     CardUtils.set1 = 1;
                     Log.v("Blue Button", "Pressed");
                     MyActivity.cutil.play();
                     playCount++;
                     
                     g2.setAdapter(a1 = new ImageAdapter(getApplicationContext(), MyActivity.cutil.pile1ArrayList, 7));
                     g3.setAdapter(a2 = new ImageAdapter(getApplicationContext(), MyActivity.cutil.pile2ArrayList, 7));
                     g4.setAdapter(a3 = new ImageAdapter(getApplicationContext(), MyActivity.cutil.pile3ArrayList, 7));
                   
                     a1.notifyDataSetChanged();
                     a2.notifyDataSetChanged();
                     a3.notifyDataSetChanged();
                   
                     MyActivity.cutil.deal();
                     g2.setAdapter(a1 = new ImageAdapter(getApplicationContext(), MyActivity.cutil.pile1ArrayList, 7));
                     g3.setAdapter(a2 = new ImageAdapter(getApplicationContext(), MyActivity.cutil.pile2ArrayList, 7));
                     g4.setAdapter(a3 = new ImageAdapter(getApplicationContext(), MyActivity.cutil.pile3ArrayList, 7));
                   
                     a1.notifyDataSetChanged();
                     a2.notifyDataSetChanged();
                     a3.notifyDataSetChanged();
                   
                     if (playCount == 3) {
                         MyActivity.cutil.play();                    
                         doneIntent = new Intent(getApplicationContext(),DoneActivity.class);
                         startActivity(doneIntent);
                     }
                 }
             }
         });

As you can see, both these GridViews need an Adapter. So we have to fill out the getView method of the BaseAdapter to overload the images onto the GridView. We do this because the GridView does not know how to load images on its own. So we have to teach it by filling out the getView method. We also have to teach it how to getCount, getItem and the getItemId methods. The getView method will get called for getCount number of times to render each card in the GridView.

public class ImageAdapter extends BaseAdapter {   
        private Context context;
        private ArrayList<CardModel> pCards = new ArrayList<CardModel>();
          int len;
          public ImageAdapter(Context context, ArrayList<CardModel> p1Cards, int length) {
              this.context = context;
              len = length;
              for (int i=0; i<len; i++) {           
                  pCards.add(i, p1Cards.get(i));
              }
          }
          
        public View getView(int position, View convertView, ViewGroup parent) {
          View gridView;
          if (convertView == null) {
              gridView = new View(context);
          } else {
              gridView = (View) convertView;
          }
          
          LayoutInflater inflater = (LayoutInflater) context
                  .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
          gridView = inflater.inflate(R.layout.deal_layout, null);
          CardModel itemCard = getItem(position);
          TextView textView = (TextView) gridView
              .findViewById(R.id.textView);
          textView.setText(itemCard.cardText);
         
          ImageView imageView = (ImageView) gridView
              .findViewById(R.id.imageView);
          imageView.setImageResource(itemCard.cardFace);
          return gridView;
      }
      
      @Override
      public int getCount() {       
          return len;
      }
      
      @Override
      public CardModel getItem(int position) {
          return pCards.get(position);
      }
      
      @Override
      public long getItemId(int position) {
          return position;
          }
      }

Code for this post is here.