changing background opacity (alpha level) sequentially android

Question

private void zoomImageFromThumb(final View thumbView, int imageResId){

    // If there's an animation in progress, cancel it
    // immediately and proceed with this one.
    if (mCurrentAnimator != null) {
        mCurrentAnimator.cancel();
    }
    Drawable expanded_image_background=getResources().getDrawable(R.drawable.background_expanded_image);



    // Load the high-resolution "zoomed-in" image.
    final ImageView expandedImageView = (ImageView) findViewById(R.id.expanded_image);
    expandedImageView.setImageResource(imageResId);
    expandedImageView.bringToFront();

    // Calculate the starting and ending bounds for the zoomed-in image.
    // This step involves lots of math. Yay, math.
    final Rect startBounds = new Rect();
    final Rect finalBounds = new Rect();
    final Point globalOffset = new Point();

    // The start bounds are the global visible rectangle of the thumbnail,
    // and the final bounds are the global visible rectangle of the container
    // view. Also set the container view's offset as the origin for the
    // bounds, since that's the origin for the positioning animation
    // properties (X, Y).
    thumbView.getGlobalVisibleRect(startBounds);
    findViewById(R.id.container).getGlobalVisibleRect(finalBounds, globalOffset);
    startBounds.offset(-globalOffset.x, -globalOffset.y);
    finalBounds.offset(-globalOffset.x, -globalOffset.y);

    // Adjust the start bounds to be the same aspect ratio as the final
    // bounds using the "center crop" technique. This prevents undesirable
    // stretching during the animation. Also calculate the start scaling
    // factor (the end scaling factor is always 1.0).
    float startScale;
    if ((float) finalBounds.width() / finalBounds.height()
            > (float) startBounds.width() / startBounds.height()) {
        // Extend start bounds horizontally
        startScale = (float) startBounds.height() / finalBounds.height();
        float startWidth = startScale * finalBounds.width();
        float deltaWidth = (startWidth - startBounds.width()) / 2;
        startBounds.left -= deltaWidth;
        startBounds.right += deltaWidth;
    } else {
        // Extend start bounds vertically
        startScale = (float) startBounds.width() / finalBounds.width();
        float startHeight = startScale * finalBounds.height();
        float deltaHeight = (startHeight - startBounds.height()) / 2;
        startBounds.top -= deltaHeight;
        startBounds.bottom += deltaHeight;
    }

    // Hide the thumbnail and show the zoomed-in view. When the animation
    // begins, it will position the zoomed-in view in the place of the
    // thumbnail.
    thumbView.setAlpha(0f);
    expandedImageView.setVisibility(View.VISIBLE);

    // Set the pivot point for SCALE_X and SCALE_Y transformations
    // to the top-left corner of the zoomed-in view (the default
    // is the center of the view).
    expandedImageView.setPivotX(0f);
    expandedImageView.setPivotY(0f);

    // Construct and run the parallel animation of the four translation and
    // scale properties (X, Y, SCALE_X, and SCALE_Y).
    AnimatorSet set = new AnimatorSet();
    set.play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left, finalBounds.left))
            .with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top, finalBounds.top))
            .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X,
                    startScale, 1f)).with(ObjectAnimator.ofFloat(expandedImageView,
            View.SCALE_Y, startScale, 1f));
    set.setDuration(mShortAnimationDuration);
    set.setInterpolator(new DecelerateInterpolator());
    set.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mCurrentAnimator = null;
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            mCurrentAnimator = null;
        }
    });
    set.start();
    mCurrentAnimator = set;

    // Upon clicking the zoomed-in image, it should zoom back down
    // to the original bounds and show the thumbnail instead of
    // the expanded image.
    final float startScaleFinal = startScale;
    expandedImageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (mCurrentAnimator != null) {
                mCurrentAnimator.cancel();
            }

            // Animate the four positioning/sizing properties in parallel,
            // back to their original values.
            AnimatorSet set = new AnimatorSet();
            set.play(ObjectAnimator
                    .ofFloat(expandedImageView, View.X, startBounds.left))
                    .with(ObjectAnimator
                            .ofFloat(expandedImageView,
                                    View.Y,startBounds.top))
                    .with(ObjectAnimator
                            .ofFloat(expandedImageView,
                                    View.SCALE_X, startScaleFinal))
                    .with(ObjectAnimator
                            .ofFloat(expandedImageView,
                                    View.SCALE_Y, startScaleFinal));
            set.setDuration(mShortAnimationDuration);
            set.setInterpolator(new DecelerateInterpolator());
            set.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    thumbView.setAlpha(1f);
                    expandedImageView.setVisibility(View.GONE);
                    mCurrentAnimator = null;
                }

                @Override
                public void onAnimationCancel(Animator animation) {
                    thumbView.setAlpha(1f);
                    expandedImageView.setVisibility(View.GONE);
                    mCurrentAnimator = null;
                }
            });
            set.start();
            mCurrentAnimator = set;
        }
    });
}

currently I am working on animations, and I have an image on imageview and if I click it, it is zoomed out (filled in screen), next it is zoomed in.

I used this function to create an animation. But I also have background(drawable folder) of imageview and I want it to increase (and decrease) its opacity while zoomed out and in. I know that I have to use setAlpha(), but I cannot figure out where to put it. Please help...

could i know the values of opacity you want to set.. 1. for zoom in, 2. for zoom out ?? — Janki Gadhiya, Jul 05 '16 at 10:42
> http://stackoverflow.com/questions/1492554/set-transparent-background-of-an-imageview-in-android/37323776#37323776 — Narendra Sorathiya, Jul 05 '16 at 10:45
I think its between 0.0 and 1.0, so while zooming out from 0.0 to 1.0, and vice-versa — Azam Rahimjonov, Jul 05 '16 at 10:46
Yes, and I only want to change the background opacity not the image itself. — Azam Rahimjonov, Jul 05 '16 at 10:50
Ok, I understand your code, but how can I use it while image is zooming out, or in, I don't understand where and how to put it. — Azam Rahimjonov, Jul 05 '16 at 10:54
Actually what I want is to have background transparent first, then while image is being zoomed out, background should increase alpha level until 1.0 from 0.0 — Azam Rahimjonov, Jul 05 '16 at 11:19

Aman Jain · Accepted Answer · 2016-07-06T18:35:12.770

2

You need to create two background drawable, one with full opacity and other with 0 opacity then you can use this code to animate from one drawable to another.

I have created a drawable array containing two drawable.

Drawable[] drawables = {ContextCompat.getDrawable(mActivity, R.drawable.firstBackgroundDrawable),ContextCompat.getDrawable(mActivity, R.drawable.secndBackgroundDrawable)};
TransitionDrawable trans = new TransitionDrawable(drawables);
imageID.setBackground(trans); 
trans.setCrossFadeEnabled(true);
trans.startTransition(5000);

In startTransition(duration) you can set the animation duration.

edited Jul 06 '16 at 18:35

answered Jul 05 '16 at 10:45

Aman Jain

2,893
1
18
33

Thanks for your answer, but I think it changes the alpha level of image not the background – Azam Rahimjonov Jul 05 '16 at 10:56
Sorry, but can you explain how your code works, because I think it is nearer to answer. Only difference is I want to change background(drawable folder) alpha and I think I should use it – Azam Rahimjonov Jul 06 '16 at 03:31
`ObjectAnimator.ofFloat(targetView ,propertyName , fromValue,toValue)` property name could be **`alpha`** or **`rotation`** , fromValue and to Value self understandable. – Aman Jain Jul 06 '16 at 08:18
I used `objectanimator.ofFloat(background_drawable, "alpha", 0f, 1f)` but it is not working. please help – Azam Rahimjonov Jul 06 '16 at 12:42
targetView is a view that you want to animate. – Aman Jain Jul 06 '16 at 13:48
Can I animate background(drawable file) changing its alpha? – Azam Rahimjonov Jul 06 '16 at 14:39
Is background drawable dynamic or static ? – Aman Jain Jul 06 '16 at 14:50
Here is my code : ` ` and I'm changing it using `objectanimator.ofFloat(background_drawable, "alpha", 0f, 1f)`. – Azam Rahimjonov Jul 06 '16 at 14:57
It may work, I think you should give a shot. You need to create two background drawable, one with full opacity and other with 0 opacity then you can use this code. `Drawable[] drawables = {ContextCompat.getDrawable(mActivity, R.drawable.firstBck),ContextCompat.getDrawable(mActivity, R.drawable.secndBck)}; TransitionDrawable trans = new TransitionDrawable(drawables); imageID.setBackground(trans); trans.setCrossFadeEnabled(true); trans.startTransition(5000)` – Aman Jain Jul 06 '16 at 15:03
Thank you so much!!! This is really what I wanted. It worked perfect. You saved my life – Azam Rahimjonov Jul 06 '16 at 18:24
Maybe you'll update your answer, then it would be appropriate – Azam Rahimjonov Jul 06 '16 at 18:29
I accepted it. Can I ask you one thing? I think you experienced well with android. Therefore, may I sometime ask some questions about my problems? – Azam Rahimjonov Jul 06 '16 at 18:40
Ya sure, I will try my best. – Aman Jain Jul 06 '16 at 18:44
Thank you. I am very grateful from you – Azam Rahimjonov Jul 06 '16 at 19:36
Hi, I have another question about socket – Azam Rahimjonov Jul 09 '16 at 13:27

Zoe stands with Ukraine · Answer 2 · 2016-07-05T11:06:57.997

1

If it is drawn as a bitmap you can do this:

Paint alphaPaint = new Paint();
alphaPaint.setAlpha(ALPHA);
canvas.drawBitmap(bitmap, x, y, alphaPaint);

For the controlling of the Alpha that is up to you

EDIT:

Based on what you told me:

Paint alphaPaint = new Paint();
alphaPaint.setAlpha(ALPHA);
alphaPaint.setColor(Color.BLACK);
canvas.drawRect(rect, alphaPaint);

edited Jul 05 '16 at 11:06

answered Jul 05 '16 at 10:40

Zoe stands with Ukraine

25,310
18
114
149

Thank you, but I am afraid you misunderstood me, because I want to change background opacity not the image's – Azam Rahimjonov Jul 05 '16 at 11:00
What is the background? – Zoe stands with Ukraine Jul 05 '16 at 11:01
It is just a black to hide other parts of screen except expanded image, firstly it should be transparent, and after clicking an image, alpha level should increase sequentially, until image is full screen. then whole background(except image) will be black (like telegram I think) – Azam Rahimjonov Jul 05 '16 at 11:05
Updated the answer – Zoe stands with Ukraine Jul 05 '16 at 11:07
Sorry, why are you drawing rectangular – Azam Rahimjonov Jul 05 '16 at 11:08
Look, I am trying my best with absolutly no code what so ever. If you want a better answer than this and what Aman Jain and Tony have written, post some code showing **what you have** – Zoe stands with Ukraine Jul 05 '16 at 11:11

score 1 · Answer 3 · answered Jul 05 '16 at 10:45

1

your_image_name.animate().setDuration(300).alpha(0f);

your_image_name= ImageView, could be anything! (Text/Button/Layout)

alpha(0f) = f means float (0 = 0%, 1 = 100%)

alpha(0.5f) = 50% alpha

If you want to change the alpha on the same time as you zoom in/out, then do it the time you start the animation of zoom!

answered Jul 05 '16 at 10:45

Antonios Tsimourtos

1,626
1
11
34

Thank you, but I think it changes the image's alpha level not the background of image. I need to change background alpha level while image is zooming out and in – Azam Rahimjonov Jul 05 '16 at 11:07

changing background opacity (alpha level) sequentially android

3 Answers3