¿Cómo hacer para desenfocar imagen de fondo en Android?

publicado por: Anonymous

Quería saber cómo puedo lograr un efecto desenfocado en . No lo hago con Photoshop o software similar porque es el perfil del usuario y la foto que tiene de perfil es esa la foto que se desenfoca de fondo.

Por ese motivo debe ser dinámico.

Esta es la imagen de ejemplo.

introducir la descripción de la imagen aquí

solución

Primero la colocas de fondo igual que la colocas como principal, para hacer el efecto puedes usar la libreria Blurry, simplemente hay que agregarla a tu proyecto por medio de Graddle.

Blurry:

Solo agrega esto en tu archivo Graddle app y podrás utilizar la librería.

    dependencies {
       compile 'jp.wasabeef:blurry:2.0.2'
    }

Agrega esta actividad de ejemplo a tu aplicación, en ella puedes ver el funcionamiento de la librería.

activity_example.xml

Agrega un drawable a las vistas, para que puedas ver el efecto.

<RelativeLayout
    android:id="@+id/content"
    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=".activities.ExampleActivity">

    <View
        android:id="@+id/spacer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true"/>

    <ImageView
        android:id="@+id/right_top"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/spacer"
        android:layout_alignLeft="@id/spacer"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/serv"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/spacer"
        android:layout_alignRight="@id/spacer"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/serv"/>

    <ImageView
        android:id="@+id/right_bottom"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignLeft="@id/spacer"
        android:layout_below="@id/spacer"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/serv"/>

    <ImageView
        android:id="@+id/left_bottom"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignRight="@id/spacer"
        android:layout_below="@id/spacer"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/serv"/>

    <ImageView
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_centerInParent="true"
        android:text="@string/app_name"
        android:elevation="10dp"
        android:textColor="@android:color/black"
        android:textSize="88sp"
        android:textStyle="bold"/>

</RelativeLayout>

ExampleActivity.java

public class ExampleActivity extends AppCompatActivity {

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_example);

        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {

                long startMs = System.currentTimeMillis();
                Blurry.with(getApplicationContext())
                        .radius(25)
                        .sampling(1)
                        .color(Color.argb(66, 0, 255, 255))
                        .async()
                        .capture(findViewById(R.id.right_top))
                        .into((ImageView) findViewById(R.id.right_top));

                Blurry.with(getApplicationContext())
                        .radius(10)
                        .sampling(8)
                        .async()
                        .capture(findViewById(R.id.right_bottom))
                        .into((ImageView) findViewById(R.id.right_bottom));

                Blurry.with(getApplicationContext())
                        .radius(25)
                        .sampling(1)
                        .color(Color.argb(66, 255, 255, 0))
                        .async()
                        .capture(findViewById(R.id.left_bottom))
                        .into((ImageView) findViewById(R.id.left_bottom));

                Log.d(getString(R.string.app_name),
                        "TIME " + String.valueOf(System.currentTimeMillis() - startMs) + "ms");
            }
        });

        findViewById(R.id.button).setOnLongClickListener(new View.OnLongClickListener() {

            private boolean blurred = false;

            @Override public boolean onLongClick(View v) {
                if (blurred) {
                    Blurry.delete((ViewGroup) findViewById(R.id.content));
                } else {
                    long startMs = System.currentTimeMillis();
                    Blurry.with(getApplicationContext())
                            .radius(25)
                            .sampling(2)
                            .async()
                            .animate(500)
                            .onto((ViewGroup) findViewById(R.id.content));
                    Log.d(getString(R.string.app_name),
                            "TIME " + String.valueOf(System.currentTimeMillis() - startMs) + "ms");
                }

                blurred = !blurred;
                return true;
            }
        });
    }
}

introducir la descripción de la imagen aquí

Iniciar en onCreate:

Dado que es un cambio visual en tiempo de ejecución, es necesario manejar la transformación dentro de un thread.

Primero tu imagen debe estar contenida dentro de una View(Layout) y a este se aplicara el cambio.

activity_example.xml:

<RelativeLayout
    android:id="@+id/content"
    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=".activities.ExampleActivity">


    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/serv"/>


</RelativeLayout>

ExampleActivity.java:

public class ExampleActivity extends AppCompatActivity {

    private View rootView;

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_blurry);

        rootView = (View) findViewById(R.id.content);

        rootView.post(new Runnable() {
            @Override
            public void run() {
                Blurry.with(getApplicationContext()).radius(25).sampling(2).onto((ViewGroup) rootView);
            }
        });

    }
}

introducir la descripción de la imagen aquí

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *