Pencere bulanıklaştırma

Android 12'de, arka plan bulanıklığı ve arkadaki bulanıklık gibi pencere bulanıklığı efektlerini uygulamak için herkese açık API'ler kullanılabilir.

Pencere bulanıklıkları veya pencereler arası bulanıklıklar, belirli bir pencerenin arkasındaki ekranı bulanıklaştırmak için kullanılır. Farklı görsel efektler elde etmek için kullanılabilecek iki tür pencere bulanıklığı vardır:

  • Arka plan bulanıklığı, buzlu cam efekti oluşturarak arka planı bulanık pencereler oluşturmanıza olanak tanır.

  • Arka planı bulanıklaştır, bir (iletişim kutusu) pencerenin arkasındaki tüm ekranı bulanıklaştırmanıza olanak tanıyarak alan derinliği efekti oluşturur.

İki efekt ayrı ayrı veya aşağıdaki şekilde gösterildiği gibi birleştirilerek kullanılabilir:

yalnızca arka planı bulanıklaştırma

a

 yalnızca arkadaki bulanıklık

b

 Arka planı bulanıklaştırma

c

1. şekil. Yalnızca arka planı bulanıklaştırma (a), yalnızca arkadaki bulanıklaştırma (b), arka planı bulanıklaştırma ve arkadaki bulanıklaştırma (c)

Pencere bulanıklaştırma özelliği, pencereler arasında çalışır. Bu nedenle, pencerenizin arkasında başka bir uygulama olduğunda da çalışır. Bu efekt, aynı penceredeki içeriği bulanıklaştıran bulanıklaştırma oluşturma efekti ile aynı değildir. Pencere bulanıklıkları; iletişim kutuları, alt sayfalar ve diğer kayan pencereler için kullanışlıdır.

Uygulama

Uygulama geliştiriciler

Uygulama geliştiriciler, bulanıklık efekti oluşturmak için bulanıklık yarıçapı sağlamalıdır. Bulanıklaştırma yarıçapı, bulanıklaştırmanın yoğunluğunu kontrol eder. Yarıçap ne kadar yüksek olursa bulanıklaştırma o kadar yoğun olur. 0 piksel bulanıklık, bulanıklık olmadığı anlamına gelir. Arka planı bulanıklaştırmak için 20 piksel yarıçap iyi bir alan derinliği efekti oluştururken 80 piksel arka plan bulanıklığı yarıçapı iyi bir buzlu cam efekti oluşturur. Performansı önemli ölçüde etkileyeceğinden 150 pikselden yüksek bulanıklık yarıçaplarından kaçının.

İstediğiniz bulanıklık efektini elde etmek ve okunabilirliği artırmak için yarı saydam bir renk katmanıyla desteklenen bir bulanıklık yarıçapı değeri seçin.

Arka planı bulanıklaştırın

Alttaki içeriğin bulanık bir görüntüsü olan pencere arka planı efekti oluşturmak için kayan pencerelerde arka plan bulanıklaştırma özelliğini kullanın. Pencerenize bulanıklaştırılmış arka plan eklemek için aşağıdakileri yapın:

  1. Arka plan bulanıklığı yarıçapını ayarlamak için Window#setBackgroundBlurRadius(int)'u çağırın. Alternatif olarak, pencere temasında R.attr.windowBackgroundBlurRadius'u ayarlayın.

  2. Pencereyi yarı saydam hale getirmek için R.attr.windowIsTranslucent değerini true olarak ayarlayın. Bulanıklık, pencere yüzeyinin altında çizilir. Bu nedenle, bulanıklığın görünür olması için pencerenin yarı saydam olması gerekir.

  3. İsteğe bağlı olarak, yarı saydam renkte dikdörtgen bir pencere arka planı çizilebilir öğesi eklemek için Window#setBackgroundDrawableResource(int) işlevini çağırın. Alternatif olarak, pencere temasında R.attr.windowBackground'u ayarlayın.

  4. Yuvarlak köşeli bir pencere için, pencere arka planı çizilebilir öğesi olarak yuvarlak köşeli bir ShapeDrawable ayarlayarak bulanık alanın yuvarlak köşelerini belirleyin.

  5. Odak bulanıklığı etkin ve devre dışı durumlarını yönetin. Daha fazla bilgi için Uygulamalarda pencere bulanıklığını kullanma yönergeleri bölümüne bakın.

Arka planı bulanıklaştır

Arkadaki bulanıklık, pencerenin arkasındaki ekranın tamamını bulanıklaştırır. Bu efekt, pencerenin arkasındaki her şeyi bulanıklaştırarak kullanıcının dikkatini pencere içeriğine yönlendirmek için kullanılır.

Pencerenizin arkasındaki içeriği bulanıklaştırmak için şu adımları uygulayın:

  1. Arka planda bulanıklığı etkinleştirmek için pencere işaretlerine FLAG_BLUR_BEHIND ekleyin. Alternatif olarak, pencere temasında R.attr.windowBlurBehindEnabled'ı ayarlayın.

  2. Arka plan bulanıklığı yarıçapı ayarlamak için WindowManager.LayoutParams#setBlurBehindRadius işlevini çağırın. Alternatif olarak, pencere temasında R.attr.windowBlurBehindRadius'u ayarlayın.

  3. İsteğe bağlı olarak, tamamlayıcı bir karartma miktarı seçin.

  4. Odak bulanıklığı etkin ve devre dışı durumlarını yönetin. Daha fazla bilgi için Uygulamalarda pencere bulanıklığını kullanma yönergeleri bölümüne bakın.

Uygulamalarda pencere bulanıklığını kullanma yönergeleri

Pencere bulanıklığı desteği şunlara bağlıdır:

  • Android sürümü: Pencere bulanıklaştırma API'leri yalnızca Android 12 ve sonraki sürümlerde kullanılabilir. Android sürümü için cihaz SDK'sını kontrol edin.

  • Grafik performansı: Daha düşük performanslı GPU'lara sahip cihazlar, pencere bulanıklıklarını desteklememeyi tercih edebilir.

  • Sistem durumu: Sistem sunucusu, çalışma zamanında pencere bulanıklaştırmalarını geçici olarak devre dışı bırakabilir. Örneğin, pil tasarrufu modu sırasında, belirli türde video içerikleri oynatılırken veya geliştirici tarafından geçersiz kılma işlemi yapıldığında bu durum yaşanabilir.

Uygulamanızın Android sürümleri, cihazlar ve sistem durumlarıyla uyumlu olması için aşağıdaki yönergeleri uygulayın:

  • Pencere bulanıklıkları etkinleştirildiğinde veya devre dışı bırakıldığında sizi bilgilendirmek için WindowManager#addCrossWindowBlurEnabledListener üzerinden bir işleyici ekleyin. Ayrıca, pencere bulanıklıklarının etkin olup olmadığını sorgulamak için WindowManager#isCrossWindowBlurEnabled kullanın.

  • Pencere bulanıklıklarının etkin veya devre dışı durumuna uyum sağlamak için pencere arka planı için iki sürüm uygulayın.

    Bulanıklaştırma etkinleştirildiğinde, bulanıklaştırmanın görünür olması için pencere arka planı yarı saydam olmalıdır. Bu durumda, bulanıklaştırma devre dışı bırakıldığında pencere içeriği doğrudan temel pencerenin içeriğiyle çakışır ve çakışan pencere daha az okunabilir hale gelir. Bu tür bir efekti önlemek için pencere bulanıklıkları devre dışı bırakıldığında uygulamanın kullanıcı arayüzünü aşağıdaki gibi uyarlayın:

    • Arka plan bulanıklığı için pencere arka planı çizilebilir öğesinin alfa değerini artırarak daha opak hale getirin.

    • Arka planı bulanıklaştırmak için daha yüksek bir karartma miktarına sahip loş bir katman ekleyin.

Arka planı bulanıklaştırma ve arka plan bulanıklaştırma örneği

Bu bölümde, hem arka plan bulanıklığını hem de arka plan bulanıklığını kullanan bir etkinliğin çalışan bir örneği verilmektedir.

Aşağıdaki MainActivity.java örneğinde, 20 piksel bulanıklaştırma yarıçapına sahip bir iletişim kutusu ve 80 piksel bulanıklaştırma yarıçapına sahip bir arka plan yer almaktadır. Pencere arka planı çizilebilir öğesinde XML'de tanımlanan yuvarlak köşeleri vardır. Farklı Android sürümlerini, farklı cihazları (pencere bulanıklıklarını desteklemeyebilecek) ve çalışma zamanı bulanıklığının etkinleştirildiği veya devre dışı bırakıldığı değişiklikleri doğru şekilde işler. Pencere arka planı çizilebilir alfa ve pencere karartma miktarı ayarlanarak iletişim kutusu içeriğinin bu koşulların herhangi birinde okunabilir olması sağlanır.

public class MainActivity extends Activity {

    private final int mBackgroundBlurRadius = 80;
    private final int mBlurBehindRadius = 20;

    // We set a different dim amount depending on whether window blur is enabled or disabled
    private final float mDimAmountWithBlur = 0.1f;
    private final float mDimAmountNoBlur = 0.4f;

    // We set a different alpha depending on whether window blur is enabled or disabled
    private final int mWindowBackgroundAlphaWithBlur = 170;
    private final int mWindowBackgroundAlphaNoBlur = 255;

    // Use a rectangular shape drawable for the window background. The outline of this drawable
    // dictates the shape and rounded corners for the window background blur area.
    private Drawable mWindowBackgroundDrawable;

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

        mWindowBackgroundDrawable = getDrawable(R.drawable.window_background);
        getWindow().setBackgroundDrawable(mWindowBackgroundDrawable);

        if (buildIsAtLeastS()) {
            // Enable blur behind. This can also be done in xml with R.attr#windowBlurBehindEnabled
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND);

            // Register a listener to adjust window UI whenever window blurs are enabled/disabled
            setupWindowBlurListener();
        } else {
            // Window blurs are not available prior to Android S
            updateWindowForBlurs(false /* blursEnabled */);
        }

        // Enable dim. This can also be done in xml, see R.attr#backgroundDimEnabled
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
    }

    /**
     * Set up a window blur listener.
     *
     * Window blurs might be disabled at runtime in response to user preferences or system states
     * (e.g. battery saving mode). WindowManager#addCrossWindowBlurEnabledListener allows to
     * listen for when that happens. In that callback we adjust the UI to account for the
     * added/missing window blurs.
     *
     * For the window background blur we adjust the window background drawable alpha:
     *     - lower when window blurs are enabled to make the blur visible through the window
     *       background drawable
     *     - higher when window blurs are disabled to ensure that the window contents are readable
     *
     * For window blur behind we adjust the dim amount:
     *     - higher when window blurs are disabled - the dim creates a depth of field effect,
     *       bringing the user's attention to the dialog window
     *     - lower when window blurs are enabled - no need for a high alpha, the blur behind is
     *       enough to create a depth of field effect
     */
    @RequiresApi(api = Build.VERSION_CODES.S)
    private void setupWindowBlurListener() {
        Consumer<Boolean> windowBlurEnabledListener = this::updateWindowForBlurs;
        getWindow().getDecorView().addOnAttachStateChangeListener(
                new View.OnAttachStateChangeListener() {
                    @Override
                    public void onViewAttachedToWindow(View v) {
                        getWindowManager().addCrossWindowBlurEnabledListener(
                                windowBlurEnabledListener);
                    }

                    @Override
                    public void onViewDetachedFromWindow(View v) {
                        getWindowManager().removeCrossWindowBlurEnabledListener(
                                windowBlurEnabledListener);
                    }
                });
    }

    private void updateWindowForBlurs(boolean blursEnabled) {
        mWindowBackgroundDrawable.setAlpha(blursEnabled && mBackgroundBlurRadius > 0 ?
                mWindowBackgroundAlphaWithBlur : mWindowBackgroundAlphaNoBlur);
        getWindow().setDimAmount(blursEnabled && mBlurBehindRadius > 0 ?
                mDimAmountWithBlur : mDimAmountNoBlur);

        if (buildIsAtLeastS()) {
            // Set the window background blur and blur behind radii
            getWindow().setBackgroundBlurRadius(mBackgroundBlurRadius);
            getWindow().getAttributes().setBlurBehindRadius(mBlurBehindRadius);
            getWindow().setAttributes(getWindow().getAttributes());
        }
    }

    private static boolean buildIsAtLeastS() {
        return Build.VERSION.SDK_INT >= Build.VERSION_CODES.S;
    }
}

Pencerenin köşelerini yuvarlamak için pencere arka planını res/drawable/window_background.xml içinde ShapeDrawable olarak tanımlarız. Yuvarlak köşeler için yarıçap 20 dp'dir.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners android:radius="20dp"/>
    <solid android:color="#AAAAAA"/>
</shape>

Pencere bulanıklıkları, etkinliğin altındaki pencerenin içeriğini bulanıklaştırır. Bulanıklaştırılmış resim, bu etkinlik penceresinin altında çizilir. Bu nedenle, bulanıklaştırmanın görünür olması için etkinlik penceresinin yarı saydam olması gerekir. Pencereyi yarı saydam hale getirmek için etkinlik temasında R.attr.windowIsTranslucent'i aşağıdaki gibi ayarladık:

<style name="Theme.BlurryDialog" parent="Theme.MaterialComponents.Dialog">
    <item name="android:windowIsTranslucent">true</item>
</style>

OEM'ler ve iş ortakları

Bir cihazda pencere bulanıklığı özelliğinin kullanılabilmesi için OEM'nin cihazın pencere bulanıklığını desteklediğini belirtmesi gerekir.

Cihazınızın pencere bulanıklıklarını destekleyip desteklemediğini kontrol etmek için aşağıdakileri yapın:

  • Cihazın ekstra GPU yükünü kaldırabildiğinden emin olun. Daha düşük özellikli cihazlar ek yükü kaldıramayabilir ve bu durum karelerin düşmesine neden olabilir. Pencere bulanıklıklarını yalnızca yeterli GPU gücüne sahip, test edilmiş cihazlarda etkinleştirin.

  • Özelleştirilmiş bir oluşturma motorunuz varsa oluşturma motorunuzun bulanıklaştırma mantığını uyguladığından emin olun. Varsayılan Android 12 render motoru, BlurFilter.cpp'deki bulanıklaştırma mantığını uygular.

Cihazınızın pencere bulanıklıklarını desteklediğinden emin olduktan sonra aşağıdaki yüzey flinger'ını sysprop ayarlayın:

PRODUCT_VENDOR_PROPERTIES += \
       ro.surface_flinger.supports_background_blur=1

Doğrulama

Uygulama pencerenizin, bulanıklaştırmanın etkin olduğu ve devre dışı bırakıldığı durumlar arasında geçiş yaparken düzgün şekilde işlendiğini doğrulamak için aşağıdaki adımları uygulayın:

  1. Bulanıklaştırma özelliğinin bulunduğu kullanıcı arayüzünü açın.

  2. Pencere bulanıklığını açıp kapatarak pencere bulanıklığını etkinleştirin veya devre dışı bırakın.

  3. Pencere kullanıcı arayüzünün, beklendiği gibi bulanık durumuna geçip geçmediğini doğrulayın.

Pencere bulanıklığını etkinleştirme ve devre dışı bırakma

Pencere bulanıklığı efektiyle pencere kullanıcı arayüzünün nasıl oluşturulduğunu test etmek için aşağıdaki yöntemlerden birini kullanarak bulanıklığı etkinleştirin veya devre dışı bırakın:

  • Geliştirici Seçenekleri'nden:

    Ayarlar -> Sistem -> Geliştirici seçenekleri -> Donanım hızlandırmalı oluşturma -> Pencere düzeyinde bulanıklıklara izin ver

  • Root erişimli bir cihazdaki terminalden:

    adb shell wm disable-blur 1 # 1 disables window blurs, 0 allows them

Android 12 veya sonraki sürümlerdeki cihazınızın pencere bulanıklaştırma özelliğini destekleyip desteklemediğini ve bu özelliğin etkin olup olmadığını kontrol etmek için rootlanmış bir cihazda adb shell wm disable-blur komutunu çalıştırın.

Sorun giderme

Doğrulama sırasında sorun giderme konusunda aşağıdaki bilgileri rehber olarak kullanın.

Bulanıklık çizilmedi

  • Bulanıklaştırma özelliğinin etkin olduğunu ve donanımınızın bu özelliği desteklediğini doğrulayın. Pencere bulanıklığını etkinleştirme ve devre dışı bırakma başlıklı makaleye bakın.

  • Yarı saydam bir pencere arka plan rengi ayarladığınızdan emin olun. Opak pencere arka plan rengi, bulanık alanı gizler.

Test cihazı, pencere bulanıklıklarını desteklemiyor

  • Uygulamanızı Android 12 emülatöründe test edin. Android emülatörü kurmak için Android emülatörü kurma başlıklı makaleyi inceleyin. Emülatörle oluşturduğunuz tüm Android sanal cihazları pencere bulanıklıklarını destekler.

Yuvarlak köşe yok

Geliştirici seçeneğinin güncellenmesi bulanıklaştırmayı etkinleştirmiyor

  • Cihazın pil tasarrufu modunda olup olmadığını veya multimedya tüneli kullanıp kullanmadığını kontrol edin. Bazı TV cihazlarında video oynatma sırasında pencere bulanıklıkları da devre dışı bırakılabilir.

Arka plan bulanıklaştırma, pencere sınırları içinde değil, tam ekran olarak çiziliyor

İşleyiciden gelen güncellemeler ekrana uygulanmıyor

  • Dinleyici güncellemeleri eski bir pencere örneğine uygulanıyor olabilir. Pencerenin doğru dinleyici güncellemesiyle yok edilip yeniden oluşturulup oluşturulmadığını kontrol edin.