Blur background image like yahoo weather app in android

Question

I'm trying to implement a similar kind of UI which yahoo weather app did. I am able to blur the background image with the listview based on this link. http://nicolaspomepuy.fr/?p=18. In the above URL the author is using Listview onScrollListerner. But I have to implement that effect using a scrollview. Inside a scrollview I'll be having 3 pages with 3 views. On scrolling the first view I want the background image to be blurred. I wrote a custom scrollview which extends Scrollview to achieve the onScroll Changed functionality.

But couldn't able to change the alpha values of blured Image based on Scroll positions.

Here I'm attaching my sample code. Please help me to figure it out.

public class MainActivity extends Activity implements ScrollViewListener{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();

        mBlurredImage.setAlpha(alpha);

        DisplayMetrics displaymetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        screenWidth = displaymetrics.widthPixels;

        empty.getLayoutParams().height = (int) (displaymetrics.heightPixels * 0.6);

        // Try to find the blurred image
        final File blurredImage = new File(getFilesDir() + BLURRED_IMG_PATH);
        if (!blurredImage.exists()) {

            new Thread(new Runnable() {

                @Override
                public void run() {

                    // No image found => let's generate it!
                    BitmapFactory.Options options = new BitmapFactory.Options();
                    options.inSampleSize = 2;
                    Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.image, options);
                    Bitmap newImg = Blur.fastblur(MainActivity.this, image, 12);
                    ImageUtils.storeImage(newImg, blurredImage);
                    runOnUiThread(new Runnable() {

                        @Override
                        public void run() {
                            updateView(screenWidth);
                        }
                        });

                    }
                }).start();

            } else {

                // The image has been found. Let's update the view
                updateView(screenWidth);

            }

        }

        private void updateView(final int screenWidth) {
            Bitmap bmpBlurred = BitmapFactory.decodeFile(getFilesDir() + BLURRED_IMG_PATH);
            bmpBlurred = Bitmap.createScaledBitmap(bmpBlurred, screenWidth, (int) (bmpBlurred.getHeight()
                    * ((float) screenWidth) / (float) bmpBlurred.getWidth()), false);

            mBlurredImage.setImageBitmap(bmpBlurred);

        }

        private void initUI() {
            textView = (TextView) findViewById(R.id.textview);
            empty = (LinearLayout) findViewById(R.id.empty);
            scrollView = (ObservableScrollView) findViewById(R.id.customScrollView);
            mBlurredImage = (ImageView) findViewById(R.id.blurred_image);
            normalImage = (ImageView) findViewById(R.id.normal_image);

        }

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }

        @Override
        public void onScrollChanged(ObservableScrollView scrollView, int x, int y,
                int oldx, int oldy) {

            // TODO Auto-generated method stub
            Log.i("Scrolling", "X from ["+oldx+"] to ["+x+"]");


            Toast.makeText(this,"HI welcome ", Toast.LENGTH_SHORT).show();

            alpha = (float) -textView.getTop() / (float) TOP_HEIGHT;
            //      // Apply a ceil
            if (alpha > 1) {
                alpha = 1;
            }



        }
}


public class ObservableScrollView extends ScrollView{

    private ScrollViewListener scrollViewListener = null;

    public ObservableScrollView(Context context) {
        super(context);
    }

    public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public ObservableScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if(scrollViewListener != null) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }

public interface ScrollViewListener {
    void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);

}

Here is the XML file

<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" >

    <com.example.blureffect.TopCenterImageView
        android:id="@+id/normal_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image" />

    <com.example.blureffect.TopCenterImageView
        android:id="@+id/blurred_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0" />

    <com.example.blureffect.ObservableScrollView
        android:id="@+id/customScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

            <LinearLayout 
                android:id="@+id/empty"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                />

            <TextView
                android:id="@+id/textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="It was a good track to bowl on. It had good bounce, the ball was turning sharply as well. We bowled in the right areas. When batsmen bat in partnerships the job is easy. That is the same case with bowlers. Ashwin and I have formed a good partnership. It has been a honour to play with Sachin paaji. I would like to dedicate my five-wicket haul to Sachin paaji. We were all motivated from yesterday and we want to enjoy this occasion." />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="It was a good track to bowl on. It had good bounce, the ball was turning sharply as well. We bowled in the right areas. When batsmen bat in partnerships the job is easy. That is the same case with bowlers. Ashwin and I have formed a good partnership. It has been a honour to play with Sachin paaji. I would like to dedicate my five-wicket haul to Sachin paaji. We were all motivated from yesterday and we want to enjoy this occasion." />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="It was a good track to bowl on. It had good bounce, the ball was turning sharply as well. We bowled in the right areas. When batsmen bat in partnerships the job is easy. That is the same case with bowlers. Ashwin and I have formed a good partnership. It has been a honour to play with Sachin paaji. I would like to dedicate my five-wicket haul to Sachin paaji. We were all motivated from yesterday and we want to enjoy this occasion." />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="It was a good track to bowl on. It had good bounce, the ball was turning sharply as well. We bowled in the right areas. When batsmen bat in partnerships the job is easy. That is the same case with bowlers. Ashwin and I have formed a good partnership. It has been a honour to play with Sachin paaji. I would like to dedicate my five-wicket haul to Sachin paaji. We were all motivated from yesterday and we want to enjoy this occasion." />
        </LinearLayout>
    </com.example.blureffect.ObservableScrollView>

</FrameLayout>

Answer 1

I had to implement something similar not a long time ago - in my case it was a vertical ScrollView that, when scrolled, would affect the blur of the background.

First of all, I implemented ObservableScrollView to expose the onScrollChanged() method and also to be able to set my own listener for it:

public void setScrollViewListener(ObservableScrollViewListener scrollViewListener) {

    this.scrollViewListener = scrollViewListener;
}

@Override
protected void onScrollChanged(int x, int y, int oldX, int oldY) {

    super.onScrollChanged(x, y, oldX, oldY);

    if(scrollViewListener != null) {

        scrollViewListener.onScrollChanged(this, x, y, oldX, oldY);
    }
}

Now, to achieve the blurring effect I basically change the alpha of the blurred background ImageView - shown in this snippet from my class which is responsible for both the ObservableScrollView and the ImageViews:

@Override
public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldX, int oldY) {
    //...
    // Blurring
    float blurredImageAlpha = (float) y / SCROLL_VIEW_INITIAL_OFFSET;

    if (blurredImageAlpha > 1.0) {

        blurredImageAlpha = (float) 1.0;
    }

    imageBackgroundBlurred.setAlpha(blurredImageAlpha);
}

As you can see, I divide the y by a certain value simply not to have the the blur start straight away - this depends on what you exactly need.

As for my XML layout, it looks something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/aboutMainView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:padding="0dp" >

    <ImageView
        android:id="@+id/aboutImageBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/about_back_a" />

    <ImageView
        android:id="@+id/aboutImageBackgroundBlurred"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:alpha="0.0"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/about_back_b" />

    <com.bronzelabs.maa.widgets.ObservableScrollView
        android:id="@+id/aboutObservableScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:orientation="vertical" />

</RelativeLayout>