How to change width of ImageView in runtime?

Question

want to turn a card in my app. I have 2 ImageViews 1 Cardfront and 2 Cardback .

My theory ->

1. I change the width of the cardfront from 100% to 0%
2. I change the width of the cardback from 0% to 100%

I googled for solution on changing the width of am ImageView while runtime, but the solution I found don't work.

// Code for step 1
ViewGroup.LayoutParams params = ivBomb.getLayoutParams();
int width = params.width;
for (int i = 1; i<width; i++) {
    params.width--;
    ivBomb.setLayoutParams(params);
    Thread.sleep(10); // To see the change
}

When I start it without the Thread.sleep(10); , it disappears instantly. But when I start it with the Thread.sleep(10); , it waits ~7s and then disappears instantly.

What am I doing wrong?

Answer 1

Try calling one of these after setLayoutParams() : 1. requestLayout() 2. invalidate()

Since, requestLayout() should be called, when view's position or bounds in the parent layout have been changed, while invalidate() should be called when view's appearance has been changed. When you call requestLayout() then onLayout() and onMeasure() methods of the view will be fired, on the other hand when you call invalidate(), then onDraw() method will be fired.

Answer 2

You can use animation to get the flip card effect. This card flip animation tutorial here is for a fragment, but you can use the same animations for your views like

Animation cardFlipRightOut = AnimationUtils.loadAnimation(this, R.anim.card_flip_right_out);

cardFlipRightOut.setAnimationListener(new Animation.AnimationListener(){
    @Override
    public void onAnimationStart(Animation arg0) {
    }           
    @Override
    public void onAnimationRepeat(Animation arg0) {
    }           
    @Override
    public void onAnimationEnd(Animation arg0) {
                Animation cardFlipLeftIn = AnimationUtils.loadAnimation(this, R.anim.card_flip_left_in);
                cardFrontView.startAnimation(cardFlipLeftIn);
    }
});


cardBackView.startAnimation(cardFlipRightIn);