android - overlap images (playing cards)

Question

I am trying to make the playing cards in my game overlap such that only the first half of a card is seen and the other half is covered by the next playing card. The only card that should be completely visible will be the last/rightmost card.

I have used the following code with both framelayout and relativelayout to no avail. can anyone offer some suggestions?

public int shouldShow(int numberOfCards, int card, int id)
{
    if(card == -1)
        hide(id);
    else
    {
        findViewById(id).setBackgroundDrawable(deckimages[card]);
        //findViewById(id).offsetLeftAndRight(findViewById(id).getWidth()* numberOfCards / 2);
        show(id);
        //findViewById(id).setPadding(findViewById(id).getWidth()* numberOfCards / 2, 0,0,0);
        return numberOfCards+1;
    }
    return numberOfCards;
}

i have tried using the padding and the offset methods neither of which are working for me. but i have also noticed that the getwidth() and getmeasuredwidth() methods are returning 0.

any suggestions on which layout i should use and why the getwidth functions arent working?

the xml code is below...there would be more images than this but this is what i was testing

<RelativeLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/RelativeLayout1">
            <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
            <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
        </RelativeLayout>

Answer 1

I was stuck on this for ages and after 4 hours messing with code and Googling. I finally figured out the solution and it's pretty simple.

All you have to do is align the next card to the top and left of the previous card. This will make it so the second card will be placed on top of the card before. Then set a leftMargin to "push" the card on top towards the right, creating the partial overlapping effect.

Here's my code (done programmatically):

for(int i=0; i<hand.size();i++){
        int c = hand.get(i).getCardResource();
        ib = new ImageButton(this);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        params.addRule(RelativeLayout.ALIGN_TOP, i-1);
        params.addRule(RelativeLayout.ALIGN_LEFT,i-1);
        params.leftMargin= 40;
        ib.setImageResource(c);
        ib.setClickable(true);
        ib.setPadding( 3, 3, 3, 3);
        ib.setId(i);    
        ib.setLayoutParams(params);
        ll.addView(ib);

    }

Answer 2

You can provide view bounds intentionally mismatched with image size, and use ScaleType of an Imageview: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html. For example, android:scaleType="fitStart"