Cum să estompați imaginile de fundal în Android (Programare, Java, Android)

heloisasim a intrebat.

Care este cel mai bun mod de a estompa imaginile de fundal ca în imaginea de mai jos? Am văzut unele coduri și biblioteci, dar ale lor sunt vechi de câțiva ani sau ca biblioteca BlurBehind, dar nu dă același efect. Mulțumesc în avans!

Comentarii

  • Cei mai mulți oameni își rostogolesc singuri sau folosesc o bibliotecă existentă. Asta este ceea ce aș sugera eu. Puteți găsi implementări rapide de blur box blur online destul de ușor. Sau, pur și simplu, preîntoarceți imaginea blurată dacă nu animați blur-ul. –  > Por William Morrison.
  • V-ați uitat la acest lucru: stackoverflow.com/questions/6795483/…? A funcționat ca un farmec pentru mine –  > Por StephenG.
  • Există două moduri de a realiza. 1) Puteți utiliza FrameLayout la care puteți seta fundalul blur. 2) Puteți utiliza cea mai recentă bibliotecă Blur pe care o am ! –  > Por Piyush.
  • Mulțumesc @StephenG acest răspuns m-a ajutat foarte mult. –  > Por heloisasim.
  • Versiunea Kotlin pentru persoanele care ar putea avea nevoie: verificați acest depozit pe Github –  > Por Hamed Jaliliani.
10 răspunsuri
Sandro Machado

Cel mai simplu mod de a face acest lucru este să folosiți o bibliotecă. Aruncați o privire la aceasta: https://github.com/wasabeef/Blurry

Cu biblioteca trebuie doar să faci asta:

Blurry.with(context)
  .radius(10)
  .sampling(8)
  .color(Color.argb(66, 255, 255, 0))
  .async()
  .onto(rootView);

Comentarii

  • Am văzut că această bibliotecă ca „Trending in github”… dar nu știu dacă este doar din cauza capturilor de ecran (nu am încercat-o încă) dar capturile de ecran sunt puțin pixelate. –  > Por heloisasim.
  • Cred că are legătură cu faptul că imaginile din descriere sunt Gifs. Ar trebui să încerci, ar trebui să funcționeze bine. –  > Por Sandro Machado.
  • Îmi pare rău, dar nu obțin nici un efect folosind exemplul tău, chiar m-am jucat cu valorile, dar nu s-a întâmplat nimic –  > Por El Jazouli.
  • frate, ce este rootView… când îmi setez ImageView la onto, apare o eroare – user9822291
  • Nu funcționează. Acest eșantion nu a funcționat deloc (ciudat). Apoi am încercat eșantionul din repo-ul lor și există doar o imagine albă… 🙁 –  > Por p2lem8dev.
Jorge Casariego

Aceasta este o modalitate ușoară de a estompa imaginile în mod eficient cu RenderScript de Android pe care am găsit-o pe acest lucru articol

  1. Creați o clasă numită BlurBuilder

    public class BlurBuilder {
      private static final float BITMAP_SCALE = 0.4f;
      private static final float BLUR_RADIUS = 7.5f;
    
      public static Bitmap blur(Context context, Bitmap image) {
        int width = Math.round(image.getWidth() * BITMAP_SCALE);
        int height = Math.round(image.getHeight() * BITMAP_SCALE);
    
        Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);
        Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap);
    
        RenderScript rs = RenderScript.create(context);
        ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap);
        Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap);
        theIntrinsic.setRadius(BLUR_RADIUS);
        theIntrinsic.setInput(tmpIn);
        theIntrinsic.forEach(tmpOut);
        tmpOut.copyTo(outputBitmap);
    
        return outputBitmap;
      }
    }
    
  2. Copiați orice imagine în folderul drawable

  3. Utilizați BlurBuilder în activitatea dvs. astfel:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_login);
    
        mContainerView = (LinearLayout) findViewById(R.id.container);
        Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.background);
        Bitmap blurredBitmap = BlurBuilder.blur( this, originalBitmap );
        mContainerView.setBackground(new BitmapDrawable(getResources(), blurredBitmap));
    
  4. Renderscript este inclus în suportul v8 care permite acest răspuns până la api 8. Pentru a-l activa folosind gradle, includeți aceste linii în fișierul gradle (din acest răspuns)

    defaultConfig {
        ...
        renderscriptTargetApi *your target api*
        renderscriptSupportModeEnabled true
    }
    
  5. Rezultat

Comentarii

  • mulțumesc pentru răspuns, vreau doar să adaug că această soluție necesită API 19, pentru a activa biblioteca de suport care acceptă API 8, consultați acest răspuns stackoverflow.com/a/22976675/5519369 –  > Por Mohammed Elrashied.
  • și dacă vrem să creștem puterea de estompare? ce să schimbăm –  > Por Sam.
  • @Sam Set BLUR_RADIUS la valoarea pe care o doriți. –  > Por Mr.Yeah.
  • ce se întâmplă dacă schimb BITMAP_SCALE valoare? –  > Por amețit și confuz.
luttu android

Puteți utiliza

    Glide.with(getContext()).load(R.mipmap.bg)
            .apply(bitmapTransform(new BlurTransformation(22)))
            .into((ImageView) view.findViewById(R.id.imBg));

Comentarii

  • Pentru cei care au primit o eroare de referință nerezolvată pentru BlurTransformation trebuie să adăugați acest implementation 'jp.wasabeef:glide-transformations:4.0.0 la Gradle –  > Por Ayazmon.
  • Funcționează, dar acesta nu pare curat. Utilizați alt modul dacă doriți un sentiment de ceață. Acesta arată margini puternice. Doar partea interioară este neclară. –  > Por c-an.
  • Dependența de biblioteca a treia parte ar trebui să fie adăugată în răspuns în loc de comentariu. –  > Por Chandler.
Sachin Varma

Cel mai simplu mod de a realiza acest lucru este dat mai jos,

I)

Glide.with(context.getApplicationContext())
                        .load(Your Path)   
                        .override(15, 15) // (change according to your wish)
                        .error(R.drawable.placeholder)
                        .into(image.score);

altfel puteți urma codul de mai jos…

II)

1.Creați o clasă.(Codul este dat mai jos)

public class BlurTransformation extends BitmapTransformation {

    private RenderScript rs;

    public BlurTransformation(Context context) {
        super( context );

        rs = RenderScript.create( context );
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        Bitmap blurredBitmap = toTransform.copy( Bitmap.Config.ARGB_8888, true );

        // Allocate memory for Renderscript to work with
        Allocation input = Allocation.createFromBitmap(
            rs, 
            blurredBitmap, 
            Allocation.MipmapControl.MIPMAP_FULL, 
            Allocation.USAGE_SHARED
        );
        Allocation output = Allocation.createTyped(rs, input.getType());

        // Load up an instance of the specific script that we want to use.
        ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        script.setInput(input);

        // Set the blur radius
        script.setRadius(10);

        // Start the ScriptIntrinisicBlur
        script.forEach(output);

        // Copy the output to the blurred bitmap
        output.copyTo(blurredBitmap);

        toTransform.recycle();

        return blurredBitmap;
    }

    @Override
    public String getId() {
        return "blur";
    }
}

2.Setați imaginea în ImageView folosind Glide.

de ex:

Glide.with(this)
     .load(expertViewDetailsModel.expert.image)
     .asBitmap()
     .transform(new BlurTransformation(this))
     .into(ivBackground);

navid

aceasta ar putea să nu fie cea mai eficientă soluție, dar a trebuit să o folosesc deoarece biblioteca wasabeef/Blurry nu a funcționat pentru mine. aceasta ar putea fi utilă dacă intenționați să aveți o animație de obținere-blurire:

1- trebuie să ai 2 versiuni ale imaginii, una normală și una neclară, pe care o faci cu photoshop sau orice altceva.

2- setați imaginile să se potrivească una peste alta în xml-ul dvs., apoi una dintre ele ar putea fi văzută și aceea este cea de sus

3- setați animația fadeout pe cea de sus:

final Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator());
        fadeOut.setDuration(1000);


        fadeOut.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {}

            @Override
            public void onAnimationEnd(Animation animation) {upperone.setVisibility(View.GONE);}

            @Override
            public void onAnimationRepeat(Animation animation) {}
        });

        upperone.startAnimation(fadeOut);

Parth Prajapati

puteți folosi Glide pentru încărcare și transformare în imagine neclară,1) pentru o singură vizualizare,

val requestOptions = RequestOptions()
                requestOptions.transform(BlurTransformation(50)) // 0-100
Glide.with(applicationContext).setDefaultRequestOptions(requestOptions)
                        .load(imageUrl).into(view)

2) dacă utilizați adaptorul pentru a încărca o imagine în element, ar trebui să scrieți codul în blocul if-else, altfel, va face ca toate imaginile să fie neclare.

 if(isBlure){
  val requestOptions = RequestOptions()
                requestOptions.transform(BlurTransformation(50))
                Glide.with(applicationContext).setDefaultRequestOptions(requestOptions)
                        .load(imageUrl).into(view )
}else{
 val requestOptions = RequestOptions()
            Glide.with(applicationContext).setDefaultRequestOptions(requestOptions).load(imageUrl).into(view)
}

Anil Makwana

Încercați codul de mai jos… Puneți acest cod în On Create…

 if (android.os.Build.VERSION.SDK_INT > 9) {
            StrictMode.ThreadPolicy policy =
                    new StrictMode.ThreadPolicy.Builder().permitAll().build();
            StrictMode.setThreadPolicy(policy);
        }
       Url="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIur0ueOsmVmFVmAA-SxcCT7bTodZb3eCNbiShIiP9qWCWk3mDfw";
//        Picasso.with(getContext()).load(Url).into(img_profile);
//        Picasso.with(getContext()).load(Url).into(img_c_profile);

        bitmap=getBitmapFromURL(Url);
        Bitmap blurred = blurRenderScript(bitmap, 12);//second parametre is radius
        img_profile.setImageBitmap(blurred);

Creați metodele de mai jos… Doar copiați trecutul…

 public static Bitmap getBitmapFromURL(String src) {
        try {
            URL url = new URL(src);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap myBitmap = BitmapFactory.decodeStream(input);
            return myBitmap;
        } catch (IOException e) {
            // Log exception
            return null;
        }
    }
    @SuppressLint("NewApi")
    private Bitmap blurRenderScript(Bitmap smallBitmap, int radius) {

        try {
            smallBitmap = RGB565toARGB888(smallBitmap);
        } catch (Exception e) {
            e.printStackTrace();
        }


        Bitmap bitmap = Bitmap.createBitmap(
                smallBitmap.getWidth(), smallBitmap.getHeight(),
                Bitmap.Config.ARGB_8888);

        RenderScript renderScript = RenderScript.create(getActivity());

        Allocation blurInput = Allocation.createFromBitmap(renderScript, smallBitmap);
        Allocation blurOutput = Allocation.createFromBitmap(renderScript, bitmap);

        ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(renderScript,
                Element.U8_4(renderScript));
        blur.setInput(blurInput);
        blur.setRadius(radius); // radius must be 0 < r <= 25
        blur.forEach(blurOutput);

        blurOutput.copyTo(bitmap);
        renderScript.destroy();

        return bitmap;

    }

    private Bitmap RGB565toARGB888(Bitmap img) throws Exception {
        int numPixels = img.getWidth() * img.getHeight();
        int[] pixels = new int[numPixels];

        //Get JPEG pixels.  Each int is the color values for one pixel.
        img.getPixels(pixels, 0, img.getWidth(), 0, 0, img.getWidth(), img.getHeight());

        //Create a Bitmap of the appropriate format.
        Bitmap result = Bitmap.createBitmap(img.getWidth(), img.getHeight(), Bitmap.Config.ARGB_8888);

        //Set RGB pixels.
        result.setPixels(pixels, 0, result.getWidth(), 0, 0, result.getWidth(), result.getHeight());
        return result;
    }

Geetha

Puteți avea o vizualizare cu culoarea de fundal negru și setați alfa pentru vizualizare ca 0,7 sau orice altceva în funcție de cerințele dumneavoastră.

<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    android_orientation="vertical"
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_background="@drawable/onboardingimg1">
    <View
        android_id="@+id/opacityFilter"
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_background="@android:color/black"
        android_layout_alignParentBottom="true"
        android_alpha="0.7">
    </View>


</RelativeLayout>

Comentarii

    16

  • Nu oferă același efect ca și blur –  > Por heloisasim.
  • De asemenea, acest lucru estompează vizualizările de text care sunt adăugate ca și copii. –  > Por Munib.
  • Efectul de blur este diferit de efectul de opacitate. –  > Por mdikici.
Nosiku Minyoi

Puteți ajunge rapid la efectul de blur făcând următoarele.

// Adăugați acest lucru la aplicația build.gradle //

Compile ' com.github.jgabrielfreitas:BlurImageView:1.0.1 '

// Adăugați la XML

<com.jgbrielfreitas.core.BlurImageView
    android_id="@+id/iv_blur_image"
    android_layout_width="match_parent"
    android_layout_height="match_parent"
/>

//Add this to java

Import com.jgabrielfreitas.core.BlueImageView;

// Sub clasa publică * nume de activitate * // Sub clasa publică * nume de activitate * //

BlurImageView myBlurImage;

// Sub Oncreate //

myBlurImage = (ImageView) findViewById(R.id.iv_blur_image)
MyBlurImage.setBlue(5)

Sper că ajută pe cineva

Aparna Venkata

Acesta ar putea fi un răspuns foarte târziu, dar sper că ajută pe cineva.

  1. Puteți utiliza librării terțe, cum ar fi RenderScript/Blurry/etc.
  2. Dacă nu doriți să folosiți nicio librărie terță parte, puteți face ceea ce urmează folosind alpha (setarea alpha la 0 înseamnă blur complet și 1 înseamnă același lucru ca și cel existent).

Notă (dacă utilizați punctul 2) : În timp ce setați alpha la fundal, se va estompa întregul aspect. Pentru a evita acest lucru, creați un nou xml care să conțină un drawable și setați alpha aici la 0,5 (sau la valoarea dorită) și utilizați acest nume de drawable (numele fișierului) ca fundal.

De exemplu, utilizați-l ca mai jos (să spunem că numele fișierului este bgndblur.xml):

<bitmap xmlns_android="http://schemas.android.com/apk/res/android"
android_layout_width="match_parent"
android_layout_height="match_parent"
android_shape="rectangle"
android_src="@drawable/registerscreenbackground" 
android_alpha="0.5">

Folosiți următorul text în layout-ul dvs:

<....
 android_background="@drawable/bgndblur">

Sper că v-a ajutat.

Comentarii

  • Aceasta nu este o estompare. –  > Por Tom.