CODEWITHSUNDEEP
androidanimation
Chris Wilson
Chris Wilson

Reputation: 248

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

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>

Upvotes: 3

Views: 460

Answers (1)

sddamico
sddamico

Reputation: 2130

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());

Upvotes: 1

Related Questions