Wednesday, May 21, 2014

Android BlackJack: Getting Some Cards on the Table

Android BlackJack: Getting Cards on the Screen

Android BlackJack: Getting Cards on the Table

Introduction

The next step is to get rid of the ugly texted based card representation and replace it with graphics more fitting to an Android application. This short article is all about brute force. The 2 references below were all that was needed to get some graphics up on the screen. It's certainly not the card representation we are ultimately looking to use, but it provides some direction of the classes we need to use.

Android does not implement the AWT or the Swing graphics classes that a laptop can use. So the BufferedImage class is not there to help slice and dice the card images. It turns out that the Bitmap class is at the low level of image handling under android1. Then lifting code directly from an ImageView tutorial at the Android site2, The card deck we used previously can be displayed3.

Step One Create an image view object

  • Using the fragment.xml visual tool. Select an ImageView object and place it

on the screen.

  • A dialog box appears. Select program resource and select the standard Android Image for the icon to be displayed
  • Save the fragment.xml file.
  • Then go to Projects and do a clean and build.
  • Run the program in the emulator you should see a little robot on the screen.
  • I placed mine at the bottom.

Step Two

Lift the code from the android site. See the address at footnote 2. I added the 2 static methods found at the site directly to the MainActivity (calculateInSampleSize and decodeSampledBitmapFromResource).

    // the following 2 methods were taken from the Android documentation site
    // It deserves an in-line http address reference
    // http://developer.android.com/training/displaying-bitmaps/load-bitmap.html
    public static int calculateInSampleSize(
            BitmapFactory.Options options, int reqWidth, int reqHeight) {
    // Raw height and width of image
    final int height = options.outHeight;
    final int width = options.outWidth;
    int inSampleSize = 1;

    if (height > reqHeight || width > reqWidth) {

        final int halfHeight = height / 2;
        final int halfWidth = width / 2;

        // Calculate the largest inSampleSize value that is a power of 2 and keeps both
        // height and width larger than the requested height and width.
        while ((halfHeight / inSampleSize) > reqHeight
                && (halfWidth / inSampleSize) > reqWidth) {
            inSampleSize *= 2;
        }
    }

    return inSampleSize;
}

    public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId,
            int reqWidth, int reqHeight) {

        // First decode with inJustDecodeBounds=true to check dimensions
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(res, resId, options);

        // Calculate inSampleSize
        options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

        // Decode bitmap with inSampleSize set
        options.inJustDecodeBounds = false;
        return BitmapFactory.decodeResource(res, resId, options);
    }

Step Three

The line where the methods are used (it's a little further down the page) needs to be modified from:

mImageView.setImageBitmap(
    decodeSampledBitmapFromResource(getResources(), R.id.myimage, 100, 100));

to:

// Notice that R.id.imageView1 matches the element placed on the fragment
ImageView mImageView = (ImageView)findViewById(R.id.imageView1);
   mImageView.setImageBitmap(
                    decodeSampledBitmapFromResource(getResources(), R.raw.classic_playing_cards, 100, 100));

If you followed the steps properly you should see the andriod robot change to a miniature display of all the cards when you press the 'New' button and the onGo method gets executed. The next 2 figures show the difference.

Opening Blackjack Screen

BlackJack with Card Display

Conclusion

The next iteration we will need to figure out how to access just an individual card out of the whole sheet. Hopefully the Bitmap class will have similar functionality to what was available under the Java SE platform.

Footnotes:

3

Playcard images: www.jfitz.com/cards/classic-playing-cards.png

Author: Nasty Old Dog

Validate XHTML 1.0

No comments:

Post a Comment