Chat bubble animation

Question

I want to achieve animation when I send my message it goes from bottom to top like flying a bird (though I have done it :P) but while flying, that chat bubble view's radius is also changing(This is the thing I am not able to achieve).

Please help me to achieve this kind of animation or give me some sort of hint.

Thank you

I have used below code to set radius and then translate that view using xml file but not able to change radius on the go.

GradientDrawable gd = new GradientDrawable();

            // Specify the shape of drawable
            gd.setShape(GradientDrawable.RECTANGLE);

            // Set the fill color of drawable
            gd.setColor(Color.TRANSPARENT); // make the background transparent

            // Create a 2 pixels width red colored border for drawable
            gd.setStroke(2, Color.RED); // border width and color

            // Make the border rounded
            gd.setCornerRadius(15.0f);

            ((RelativeLayout) findViewById(R.id.rlvView)).setBackground(gd);

             Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.item_animation_from_bottom);

            ((RelativeLayout) findViewById(R.id.rlvView)).startAnimation(animation);

Answer 1

You need to use ObjectAnimator (derivative class of ValueAnimator) to achieve animate any value (visible/invisible) of a view. Code below animate cornerRadius for one time from 15.0f to 0. Please try, I hope it helps.

     // Make the border rounded
    gd.setCornerRadius(15.0f);
    ((RelativeLayout) findViewById(R.id.rlvView)).setBackground(gd);

    ObjectAnimator animator = ObjectAnimator.ofFloat(gd, "cornerRadius", 0);
    animator.setInterpolator(new LinearInterpolator());
    animator.setDuration(800);
    animator.start();