Increase visibility of full screen view with animation

Question

I am writing an view where I need to display another full screen overlay view from bottom to top.

View State:

• Initially state of overlay view is hide,
• Then 10% of view will visible
• Then 20 % and so on up to 100%.

So it's only visibility of view not to push view from bottom to top. I am using following for same:

<translate
        android:duration="500"
        android:fillAfter="true"
        android:fromYDelta="75%p"
        android:toYDelta="0%p" />

but it push view instead to display.

EDIT Added layout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fmParent"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/txtGameLevel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/fake_percentage"
        android:textColor="@color/theme_blue"
        android:textSize="@dimen/txt_header_size" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="@dimen/txt_bottom_margin"
        android:text="@string/connecting"
        android:textColor="@color/theme_blue" />

    <FrameLayout
        android:id="@+id/fmOverlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/theme_blue"
        android:clipToPadding="true"
        android:visibility="invisible" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/fake_percentage"
            android:textColor="@color/theme_white"
            android:textSize="@dimen/txt_header_size" />
    </FrameLayout>

</FrameLayout>

Solved: Vikarm solution work great for me https://stackoverflow.com/a/25436139/2624806 :)

Answer 1

I can't say that I fully understand what your are looking for. Do you want to reveal 'main content' from bottom-to-top? Like this?

If this is what you have in mind, use an ObjectAnimator to animate bottom property of the overlay layout container. You can leave a comment if you need more help.

Edit:

Whenever you want to animate-reveal, call this method:

public void animateReveal() {
    // We need this value to reset framelayout's bottom value once 
    // the animation is done running - in case we need to run the 
    // animation again
    final int originalBottomValue = fmOverlay.getBottom();

    // Animator - animated the bottom property of the FrameLayout
    ObjectAnimator anim = ObjectAnimator.ofInt(fmOverlay, "bottom", 
                                               fmOverlay.getBottom(), 0);

    // Duration is currently set to 3000ms - 3 seconds
    anim.setDuration(3000L);

    // Add a listener to the animation
    anim.addListener(new AnimatorListenerAdapter() {

        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);

            // Set framelayout to be invisible
            fmOverlay.setVisibility(View.INVISIBLE);

            // Restore the `bottom` value
            fmOverlay.setBottom(originalBottomValue);
        }
    });

    // Start animation
    anim.start();
}

Answer 2

You can use alpha tag in XML file like

<alpha android:fromAlpha="0.0" 
   android:toAlpha="1.0"  
   android:duration="1500"/>

or in your Java file you can use

AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
alphaAnimation.setDuration(1500);
view.startAnimation(alphaAnimation);

where view is the View which you want to make visible.

Make sure you are using the View that you want to make visible is above the other View

Answer 3

I had a similar problem a while ago.

I will explain my solution - hoping you can manipulate it to your needs.

It is all about manipulating other views on top of yours. Over my main View, I created two white-filled Rectangles covering the whole view. One Rec was alpha=1 at the bottom and 0 at the top (a gradient). The second Rec was the opposite - alpha=1 at the top to 0% at the bottom.

You can create the Gradient effects like so:

Create file: res/drawable/gradient_shape1.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
            android:startColor="#00FFFFFF"
            android:endColor="#FFFFFFFF"
            android:type="linear" />
</shape>

Create file: res/drawable/gradient_shape2.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
            android:startColor="#FFFFFFFF"
            android:endColor="#00FFFFFF"
            android:type="linear" />
</shape>

Now, you have 3 layers - layer 1 is your view, layer 2 is one Rec, layer 3 is the second Rec. So when both Recs are shown at full alpha - you can see a full white rec over your view (seeing they overlap).

So, what I did now, using AlphaAnimation and postDelayed - I set the Alpha of the first Rec down to 0 (for example, duration was 2000ms), and after that duration (set by postDelayed) I started to fade the second Rec down to 0 alpha.

I did not achive the exact effect you are looking for but I got a nice effect that pleased me. I'm sure if you play around more with the gradients and timers you might get what you want.