How do you create a screen wipe effect on the background color in Android

Question

I have a foreground image with a transparent space in the middle so you can see the background color, starting as white, through it. I need to create a wipe effect where the color changes from white to blue moving from left to right across the screen. Not just fading from one to the other. It needs to be like a blue curtain being pulled across the screen, slowly changing the color appearing through the middle of the image.

I currently have it set to a basic fade effect using a ValueAnimator, but the requirement is this wipe effect. How can I create this curtain wipe effect?

To clarify the effect I'm looking for is that of a solid colored curtain being slowly pulled across a white screen, so in the end, all there is is the blue color.

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:foreground="@drawable/loading_page_4"
        android:id="@+id/splash_color_layout" >
    </FrameLayout>

If you mean applying a gradient check this: http://stackoverflow.com/questions/5976805/android-linearlayout-gradient-background — Drilon Blakqori, Jan 08 '16 at 17:10
Thank you for your comment! But I am not looking for a gradient. What I want is to create an effect (I'm new to this and not sure if it needs to be an animation or what) where there is a solid white color. Then a solid blue color comes in from the left, covering the white across the whole screen by the end, leaving only the blue. So imagine a white screen, and a completely blue curtain being slowly pulled across to cover the screen. — Chris Wilson, Jan 08 '16 at 17:46

sddamico · Accepted Answer · 2016-01-08T21:55:05.970

There's a few ways to solve this problem but the easiest and most simple would be to add a child view to your frame.

 <FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:foreground="@drawable/loading_page_4"
    android:id="@+id/splash_color_layout" >

    <View
        android:id="@+id/wipe_animation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/blue"
        android:visibility="invisible" />
</FrameLayout>

Then, when you want to start your animation (must be done after the view is laid-out):

wipeAnimationView.setVisibility(View.VISIBLE);
wipeAnimationView.setTranslationX(-wipeAnimationView.getWidth());
wipeAnimationView.animate().translationX(0.0f).start();

It's important to note that if you're starting the animation before the screen is laid-out, the view's width will be 0 and it will have no effect. You should view.post(() -> runAnimation());

How do you create a screen wipe effect on the background color in Android

1 Answers1