CODEWITHSUNDEEP
androidandroid-animation
Ayoub
Ayoub

Reputation: 341

Animate background on list scroll

What I'm trying to achieve is a fade in/out animation on a background image.

I have an activity like this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DayOverview"
    xmlns:app="http://schemas.android.com/apk/lib/com.google.ads" >

    <ImageView
        android:id="@+id/dayOverviewBg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/bg_home" />

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_alignParentLeft="true" >

        <android.support.v4.view.ViewPager
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/dayOverview_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginTop="@dimen/px40"
            android:layout_marginRight="@dimen/px20"
            android:layout_marginLeft="@dimen/px20" />

        <com.google.ads.AdView
            xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
            android:id="@+id/dayOverviewAd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:adSize="SMART_BANNER"
            app:adUnitId="xx-xxx-x...xxxxxxxxx" />

    </LinearLayout>

</FrameLayout>

and for each page of the ViewPager a fragment with a ListView, what I want is to change the image in the activity when the ListView scrolls with a fade effect.

I looked around for something like this but all I could find is how to make something like the parallax effect on the home screen of android.

Upvotes: 0

Views: 676

Answers (1)

Saket
Saket

Reputation: 3076

Have you tried looking into the AbsListView.OnScrollListener interface? Basically, it gets triggered everytime your listview is scrolled. You can then get the first visible item in the list using the getFirstVisiblePosition() method, perform your calculations and eventually, change your background.

For achieving a cross-fade effect for switching backgrounds, you may use a TransitionDrawable

Here's an example:

            TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{
                    mLockscreenBg.getDrawable(),    // current background drawable
                    fetchedDrawable                 // new drawable
            });

            mLockscreenBg.setImageDrawable(transitionDrawable);
            mLockscreenBg.setScaleType(ImageView.ScaleType.CENTER_CROP);
            transitionDrawable.setCrossFadeEnabled(true);   // this is optional, but it delivers a better animation
            transitionDrawable.startTransition(mShortAnimDuration);

Upvotes: 1

Related Questions