2015-07-26 17 views
23

Qual è il modo migliore per sfocare le immagini di sfondo come l'immagine qui sotto? Ho visto alcuni codici e librerie ma sono vecchi di un paio di anni o come la libreria BlurBehind, ma non danno lo stesso effetto. Grazie in anticipo!Come sfocare le immagini di sfondo in Android

enter image description here

+0

La maggior parte delle persone semplicemente rotolare il proprio o utilizzare una libreria esistente. Questo è quello che suggerirei. È possibile trovare le implementazioni di sfocatura a scatola veloce online abbastanza facilmente. Oppure, pre-rendering della tua immagine sfocata se non stai animando la sfocatura. –

+0

Hai visto questo: http://stackoverflow.com/questions/6795483/create-blurry-transparent-background-effect? Ha funzionato come un fascino per me – StephenG

+0

Ci sono due modi per raggiungere. 1) Puoi usare FrameLayout a cui puoi impostare lo sfondo sfocato. 2) Puoi usare l'ultima libreria di Blur che ho! – Piyush

risposta

25

Il modo più semplice per farlo è utilizzare una biblioteca. Date un'occhiata a questo: https://github.com/wasabeef/Blurry

Con la libreria avete solo bisogno di fare questo:

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

Ho visto questa libreria come "Trending in github" ... ma non so se sono solo gli screenshot (non l'ho ancora provato) ma gli screenshot sono un po 'pixelati. – heloisasim

+0

Penso che sia legato al fatto che le immagini di descrizione sono Gif. Dovresti provare, dovrebbe funzionare bene. –

+1

Scusa ma non ho alcun effetto sull'esempio, ho persino modificato i valori, ma non è successo nulla –

2

si può avere una vista con il colore di sfondo in bianco e impostare alpha per la vista come 0,7 o qualsiasi altra cosa come secondo le vostre esigenze.

<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> 
+11

Non ha lo stesso effetto di sfocatura – heloisasim

+0

Inoltre, questo sfoca le visualizzazioni del testo che vengono aggiunte come bambini. – Munib

1

Un overlay è un ulteriore livello che si trova sulla cima di una vista (la "vista host"), che viene disegnata dopo tutti gli altri contenuti in quella vista (compresi i bambini, se la vista è un ViewGroup) . L'interazione con lo strato di sovrapposizione viene eseguita aggiungendo e rimuovendo i drawable. Prova questo, Overlay with User Instructions

0

Questa potrebbe essere una risposta molto tarda, ma spero che aiuti qualcuno.

  1. È possibile utilizzare librerie di terze parti come RenderScript/Blurry/ecc.
  2. Se non si desidera utilizzare librerie di terze parti, è possibile eseguire le seguenti operazioni utilizzando alfa (l'impostazione di alfa su 0 significa sfocatura completa e 1 indica come esistente).

Nota (se si utilizza il punto 2): Durante l'impostazione alfa allo sfondo, sarà offuscare l'intero layout. Per evitare ciò, crea un nuovo xml contenente drawable e imposta alpha qui su 0.5 (o valore del tuo desiderio) e usa questo nome drawable (nome del file) come sfondo.

Ad esempio, utilizzare come qui sotto (dire il nome del file è 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"> 

Usare il seguito nel layout:

<.... 
android:background="@drawable/bgndblur"> 

Spero che questo ha aiutato.

0

questa potrebbe non essere la soluzione più efficiente, ma ho dovuto usarlo dato che la libreria wasabeef/Blurry non ha funzionato per me.questo potrebbe essere utile se avete intenzione di avere un po 'per-sfocate animazione:

1- è necessario avere 2 versioni della foto, una normale e quella sfocata u fare con photoshop o qualsiasi altra cosa

2- set le immagini si inseriscono gli uni sugli altri in xml, poi uno di loro potrebbe essere visto e questo è quello superiore

3 set animazione dissolvenza su quello superiore:

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); 
5

Questo è un modo semplice per offuscare Immagini in modo efficiente con RenderScript di Android che ho trovato su questo article

  1. Creare una classe chiamata 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 qualsiasi immagine nella cartella drawable

  3. Uso BlurBuilder nella vostra attività come questo:

    @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 è incluso in Supporto v8 l'attivazione di questa risposta verso il basso per api 8. Per abilitare utilizzando Gradle includono queste righe nel tuo file di Gradle (da questo answer)

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

enter image description here

+0

grazie per la tua risposta, voglio solo aggiungere che questa soluzione richiede l'API 19, per abilitare la libreria di supporto che supporta l'API 8 vedi questa risposta https://stackoverflow.com/a/22976675/5519369 –

0

Il più semplice il modo per ottenere ciò è indicato di seguito,

I)

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

altro si può seguire il codice seguente ..

II)

1.Creare una classe. (Codice è riportata qui sotto)

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

immagine 2.Set a ImageView utilizzando Glide.

esempio:

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

È possibile utilizzare

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

Prova sottostante Codice .. inserire questo codice in su Crea ..

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);

Creare sotto i metodi .. Basta copiare il passato ..

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; 
 
    }

Problemi correlati