Bitmap onClick

mpathare · by **mpathare** » Sat Apr 18, 2009 6:49 pm

I have a custom view in which I override the onDraw method like so

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
    protected void onDraw(Canvas canvas) {
 
        canvas.drawBitmap(mD.getBackImage(), 0, 0, null);
 
    }
 
Parsed in 0.030 seconds,  using GeSHi 1.0.8.4

Is there a way I can have the drawn bitmap register clicks? I would like to show a different draw a different bitmap when the one displayed on the screen is clicked.

Thanks

padde · by **padde** » Sat Apr 18, 2009 7:59 pm

If your custom View extends Android.View or a direct/indirect Subclass you could use
View.OnClickListener to achieve your goal.
If not you could use a ImageView as container for the bitmap in your custom View and use the
OnClickListener of the ImageView.

Greets
Padde

mpathare · by **mpathare** » Sat Apr 18, 2009 9:01 pm

I was trying to use a custom view, but i plan to have multiple images drawn on the canvas and dont know how to get the listener to know which bitmap has been clicked on.

I am trying now to create an ImageView container or each bitmap.

I have another question. How can I access Context.getResources() in my Activity?

Thanks.

mpathare · by **mpathare** » Sat Apr 18, 2009 9:10 pm

I just wanted to clarify what I am trying to achieve. I am trying to implement a card game. I have a Deck class in which I initialize the various cards. I create images for the cards as follows

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
public Deck(Resources res){
 
                //create cards for all four suites
 
                Card ca = new Card(res, R.drawable.ca, "clubs", 1); 
 
}
 
Parsed in 0.030 seconds,  using GeSHi 1.0.8.4

now I want to be able to do something like this from my activity

deck = new Deck(context.getResources())

but I am getting errors.

padde · by **padde** » Sat Apr 18, 2009 9:47 pm

To access the Context.getResources() of your Activity in other classes just
declare a public static variable of type context and assign the value "this" to it
in the onCreate method of the concerned activity.

Example

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
public class Test extends Activity {
 
    public static Context testContext;
 
    public void onCreate(Bundle icicle) {
 
        super.onCreate(icicle);
 
        testContext = this;
 
        setContentView(R.layout.main);
 
    }
 
}
 
Parsed in 0.034 seconds,  using GeSHi 1.0.8.4

A better policy would be a private variable and pass it to the various methods.

I would build a card class as a subclass of ImageView and so "just" extend the
ImageView with functions and values to implement the Card "logic".

Similar to this...

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
public class Card extends ImageView {
 
    private byte value;  // 1,2,3.... jack, queen... ace
 
    private byte suite;   // spades, diamonds, clubs, hearts 
 
    .....
 
}
 
Parsed in 0.035 seconds,  using GeSHi 1.0.8.4

You can use the common functions of ImageView then to access the bitmap or to assign it and
your own extendes functions to access the Card values/logic.
A deck would then be just a vector of Card objects or a own class with a vector of cards and
additional functions/values/logic... depends on your needs

Huummmn maybe i start a poker game projekt i always wanted to do when i finished my diploma.
Maybe as a long term tutorial that successive build a poker game that covers common aspects and
problems.

Sorry.. i wander from the subject.

Greets
Padde

mpathare · by **mpathare** » Sat Apr 18, 2009 10:50 pm

Hey,
Thanks for your help. making the Card class as an extension of ImageView sounds like a good idea. I will try that. I have implemented the Deck as a Stack.

I am new to Java development, so a poker tutorial for Android sounds like a great idea to me! I am not trying to do anything that fancy yet, just a simple Solitaire game...

Once i have created the cards as an extension of ImageView, do I have to create a separate listener for each card?

mpathare · by **mpathare** » Sat Apr 18, 2009 11:37 pm

This is what I have so far, but the onClick method does not seem to work as expected.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
public class GameView extends View implements OnClickListener{
 
        private Deck mD;
 
        private boolean mInit;
 
        private Stack<Card> mPile1, mPile2, mPile3, mPile4, mPile5, mPile6, mPile7, mOpenPile;
 
        private Canvas mCanvas;
 
        public GameView(Context context) {
 
        super(context);
 
        mD = new Deck(context, context.getResources());
 
    }
 
    @Override 
 
    protected void onDraw(Canvas canvas) {
 
        mCanvas = canvas;
 
        initialize();
 
    }
 
    protected void initialize(){
 
        mD.shuffle();
 
        mD.peek().setOnClickListener(this);
 
        mCanvas.drawBitmap(mD.peek().getBackImage(), 0, 0, null);
 
    }
 
    public void onClick(View v) {
 
        mCanvas.drawBitmap(mD.deal().getFrontImage(), 75, 0, null);
 
        invalidate();
 
    }
 
}
 
Parsed in 0.038 seconds,  using GeSHi 1.0.8.4

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
public class Card extends ImageView{
 
        private String mSuite;
 
        private int mRank;
 
        private Bitmap mImage;
 
        private Bitmap mBackImage;
 
        private int mX;
 
        private int mY;
 
        private boolean mFaceUp;
 
        private Context mContext;
 
        public Card(Context context, Resources res, int image, String suite, int rank){
 
                super(context);
 
                //BitmapFactory.Options opts = new BitmapFactory.Options();
 
               //opts.inJustDecodeBounds = true;
 
                Bitmap bm, fm;
 
                fm = BitmapFactory.decodeResource(res, image);
 
                bm = BitmapFactory.decodeResource(res, R.drawable.bb1);
 
                mImage = Bitmap.createScaledBitmap(fm,49, 70, true);
 
                mBackImage = Bitmap.createScaledBitmap(bm,49, 70, true);
 
                mSuite = suite;
 
                mRank = rank;
 
                mX = 0;
 
                mY = 0;
 
                mFaceUp = false;
 
                mContext = context;
 
        }
 
        public Card(Context context){
 
                super(context);
 
        }
 
        public Bitmap getFrontImage(){
 
                return mImage;
 
        }
 
        public Bitmap getBackImage(){
 
                return mBackImage;
 
        }
 
        public String getSuite(){
 
                return mSuite;
 
        }
 
        public int getRank(){
 
                return mRank;
 
        }
 
        public int getX(){
 
                return mX;
 
        }
 
        public int getY(){
 
                return mY;
 
        }
 
        public void setX(int x){
 
                mX = x;
 
        }
 
        public void setY(int y){
 
                mY = y;
 
        }
 
}//end class Card
 
Parsed in 0.040 seconds,  using GeSHi 1.0.8.4

When I click on the deck I want the popped card to be displayed face up next to it. What am I missing? I have not included the Deck class and the main Activity code, let me know if you want to see it.

Thanks.

padde · by **padde** » Sun Apr 19, 2009 1:10 am

Well if you want to pop the upper card out of the deck
by clicking the deck (and not the card) you must implement
the clicklistener on the deck.
I would therefore also extend the deck class from ImageView
an set the bitmap of the deck to your grafik for the flipside
of the cards. The OnClickListener of the Deck checks which
card in your card stack is on top and then does what ever
you need.

Example

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
public class deck extends ImageView implements OnClickListener {
 
    private Stack cards;
 
    ...
 
    public void onClick(View v) {
 
        Card topcard = cards.peek();
 
        topcard.doSomeStuff();
 
    }
 
    ...
 
}
 
Parsed in 0.036 seconds,  using GeSHi 1.0.8.4

Greets
Padde

mpathare · by **mpathare** » Sun Apr 19, 2009 1:46 am

Hey Padde,
I am a little confused about what you said. Also, to clarify, when i said that I want clicks to register when I click the deck. I did not mean the Deck object specifically. I just want the clicks to register when I click the picture of the deck on the screen and this image is stored by every card object in the deck.

I have a Card class, Deck class and a GameView class (the GameView class is where the drawing on the canvas happens)

I have implemented Card as a subclass of ImageView. should I change it as follows

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
class Card extends ImageView implements onClickListener{
 
public Card(){//constructor
 
this.setOnClickListener(this);
 
}
 
    public void onClick(View v) {
 
    }
 
}
 
Parsed in 0.036 seconds,  using GeSHi 1.0.8.4

If I do this, then how do I pass information from the onClick method, to the onDraw method in GameView (this is where all the drawing happens).

Also, is it enough that the ImageView is just a wrapper around a card, or do I have to actually display the ImageView on the screen for the listener to function correctly? Currently I am only displaying the cards bitmap image....not the ImageView...

padde · by **padde** » Sun Apr 19, 2009 2:17 am

You have to implement the OnClickListener on the view your are actually clicking on.
Which view this at the end is depends on how you want to design your game.
You could implement a touchlistener on your gameview and check if the coordinates
of the event matches your deck position.. or you could form a deck just visually and
draw all cards on top of each other and implement a onclicklistener in the card class.
Or you could implement a onclicklistener in a deck class and do stuff from there.. like
change coordinates of a the top card and call the draw method on the game view which
draws all cards or something like that.
There are so many methods to achieve what you want.. each one have their pros and cons.

If you end up in a situation where you want to call draw UI stuff from a different class or thread just
use message/handler system of android.

And yes... you have to display the cards itself not just the bitmaps.

I will hack some stuff together to show you how i would do it and for me to check
if i dont overlook some hurdles.

Greets
Padde

mpathare · by **mpathare** » Sun Apr 19, 2009 3:19 pm

Hey Padde,
Thanks for all your help. I would love to see your implementation of this.
for now, I have decided to implement the listener in my gameview class. Based on the x and y coordinates of the event (I am using onTouch Listener) I do different stuff...

It seems to be working

padde · by **padde** » Sun Apr 19, 2009 3:49 pm

Well i solved it in a different way but ontouchlistener is better because you could
drag and drop the cards with your finger or other cool stuff

So here is the stuff i hacked together.. not a complete game just
to show what i would do to manage a deck and cards and invoke
functions on them by onclick event and so on.

CardGameSample.java

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package de.CardGame.sample;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.AbsoluteLayout;
 
public class CardGameSample extends Activity {
    public static AbsoluteLayout layout;
 
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        layout = new AbsoluteLayout(this);
        layout.setLayoutParams(new AbsoluteLayout.LayoutParams(
            AbsoluteLayout.LayoutParams.FILL_PARENT,
            AbsoluteLayout.LayoutParams.FILL_PARENT, 0, 0)
        );
        setContentView(layout);
        Deck myDeck = CardUtils.generateDeck(layout.getContext());
        myDeck.shuffle();
        myDeck.setLayoutParams(new AbsoluteLayout.LayoutParams(
            AbsoluteLayout.LayoutParams.WRAP_CONTENT,
            AbsoluteLayout.LayoutParams.WRAP_CONTENT, 10, 10)
        );
        layout.addView(myDeck);
    }
}
 
Parsed in 0.038 seconds,  using GeSHi 1.0.8.4

This class holds my version of your GameView.. in my case a simple AbsoluteLayout
where i add the different cards and stuff.

CardUtils.java

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package de.CardGame.sample;
 
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
 
public class CardUtils {
    public final static int CardWidth = 50;
    public final static int CardHeight = 80;
    
    public final static int spades = 9824;
    public final static int hearts = 9829;
    public final static int diamonds = 9670;
    public final static int clubs = 9827;
    
    public final static Bitmap BackSide = generateBack();
    
    
    public static Deck generateDeck(Context mContext) {
        Card c;
        Deck d = new Deck(mContext, generateBack());
        
        int[] suits = { spades, hearts, diamonds, clubs };
        String[] values = { "2", "3", "4", "5", "6", "7", 
                            "8", "9", "10", "J", "Q", "K", "A" };
        
        for(int x=0; x < suits.length; x++) {
            for(int y=0; y < values.length; y++) {
                c = new Card(mContext, 20, 20, values[y], suits[x], 
                             generateFace(values[y], suits[x]));
                d.pushCard(c);
            }
        }
        return d;
    }
    
    private static Bitmap generateBack() {
        Bitmap back = Bitmap.createBitmap(CardWidth, CardHeight, 
                                          Bitmap.Config.ARGB_8888);
        Canvas can = new Canvas(back);
        Paint pnt = new Paint();
        pnt.setColor(Color.GRAY);
        pnt.setStyle(Paint.Style.FILL);
        can.drawRoundRect(new RectF(0,0,CardWidth,CardHeight), 5, 5, pnt);
        return back;
    }
    
    private static Bitmap generateFace(String value, int suite) {
        Bitmap face = Bitmap.createBitmap(CardWidth, CardHeight, 
                                          Bitmap.Config.ARGB_8888);
        Canvas can = new Canvas(face);
        Paint pnt = new Paint();
        pnt.setStyle(Paint.Style.FILL);
        pnt.setColor(Color.WHITE);
        can.drawRoundRect(new RectF(0,0,CardWidth,CardHeight), 5, 5, pnt);
        pnt.setTextSize(15);
        if(suite == diamonds || suite == hearts) 
            pnt.setColor(Color.RED); 
        else 
            pnt.setColor(Color.BLACK);
        can.drawText(value, (CardWidth/2)-7, (CardHeight/2)-7, pnt);
        can.drawText(String.valueOf((char)suite),(CardWidth/2)-10,(CardHeight/2)+7,pnt);
        return face;
    }
}
 
Parsed in 0.047 seconds,  using GeSHi 1.0.8.4

This Class is mainly for primitive Card graphics generation..

Card.java

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package de.CardGame.sample;
 
import android.content.Context;
import android.graphics.Bitmap;
import android.view.View;
import android.widget.AbsoluteLayout;
import android.widget.ImageView;
 
public class Card extends ImageView implements View.OnClickListener{
    private String value;
    private int suit;
    private AbsoluteLayout.LayoutParams position;
    private boolean faceup = false;
    private Bitmap face;
    private Bitmap back;
 
    public Card(Context context, int x, int y, String value, int suit, Bitmap img) {
        super(context);
        this.position = new AbsoluteLayout.LayoutParams(
                                AbsoluteLayout.LayoutParams.WRAP_CONTENT,
                                AbsoluteLayout.LayoutParams.WRAP_CONTENT,x,y
                        );
        this.value = value;
        this.suit = suit;
        this.back = CardUtils.BackSide;
        this.face = img;
        this.setImageBitmap(back);
        this.setLayoutParams(position);
        this.setOnClickListener(this);
    }
    
    public int getX() { return this.position.x; }
    public int getY() { return this.position.y; }
    public String getValue() { return this.value; }
    public int getSuit() { return this.suit; }
    public boolean isFaceUp() { return faceup; }
 
    public void setPosition(int x, int y) { 
        this.position.x = x; 
        this.position.y = y; 
        this.setLayoutParams(position); 
    }
    
    public void flip() {
        faceup = !faceup;
        if(faceup) 
            this.setImageBitmap(face); 
        else 
            this.setImageBitmap(back);
    }
    
    public void onClick(View v) {
        this.flip();
    }
}
 
Parsed in 0.043 seconds,  using GeSHi 1.0.8.4

Well.. this is my Card class.. it shows the Cards first with the back and onClick
it flips between face and back.

Deck.java

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package de.CardGame.sample;
 
import java.util.Random;
import java.util.Stack;
 
import android.content.Context;
import android.graphics.Bitmap;
import android.view.View;
import android.widget.ImageView;
 
public class Deck extends ImageView implements View.OnClickListener {
    private Stack<Card> cards;
    
    public Deck(Context context, Bitmap back) {
        super(context);
        this.setImageBitmap(back);
        this.cards = new Stack<Card>();
        this.setOnClickListener(this);
    }
    
    public void pushCard(Card c) { cards.push(c); }
    public Card peekCard() { return cards.peek(); }
    public Card popCard() { return cards.pop(); }
    public int getDeckSize() { return cards.size(); }
    public boolean isDeckEmpty() { return cards.isEmpty(); }
 
    public void shuffle() {
        Card tmp;
        int from,to;
        Random rnd = new Random(System.currentTimeMillis());
        for(int x=0; x <= 1000; x++) {
            from = rnd.nextInt(cards.size());
            to   = rnd.nextInt(cards.size());
            tmp = cards.get(to);
            cards.setElementAt(cards.elementAt(from), to);
            cards.setElementAt(tmp, from);
            rnd.setSeed(System.currentTimeMillis()/((from*to)+1));
        }
    }
    
    public void onClick(View v) {
        if(!cards.isEmpty()) {
            Card top = cards.pop();
            top.setPosition(100, 100);
            CardGameSample.layout.addView(top);
        }
    }
}
 
Parsed in 0.042 seconds,  using GeSHi 1.0.8.4

And this is the class for the Deck.. onClick it moves the topmost card of
the deck to a different position.

This is all.. i hope it will lead to inspiration :lol:

Greets
Padde

Bitmap onClick

Bitmap onClick

Who is online