在LinearLayout的被弄脏的背景图象

Question

I saw this effect in an app named "Umano" (picture below). The background image is (I assume) loaded from a URL and added as a background to the layout BUT blurred as you can see. How can I change my code (given below) such that i can achieve this effect?

Image Link here

My XML:

<LinearLayout
       android:id="@+id/dragView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#eeeeee"
       android:clickable="true"
       android:focusable="false"
       android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="68dp"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/name"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center_vertical"
                    android:paddingLeft="10dp"
                    android:text="Product Details"
                    android:textSize="14sp" />
             </LinearLayout>
</LinearLayout>

Answer 1

You can obtain blurred images using Renderscript .

Here's an official tutorial.

Answer 2

You need to perform some blurring algorithm over the image and then set it up as your background image in the layout.

You may find very useful the following links:

http://trickyandroid.com/advanced-blurring-techniques/

http://nicolaspomepuy.fr/blur-effect-for-android-design/

Fast Bitmap Blur For Android SDK

Regards, Néstor