Pencere bulanıklaştırma

Android 12'de, arka plan bulanıklaştırma ve arkadakileri bulanıklaştırma gibi pencere bulanıklaştırma efektlerini uygulamak için herkese açık API'ler kullanılabilir.

Pencere bulanıklaştırma veya pencereler arası bulanıklaştırma, 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ıklaştırma, buzlu cam efekti oluşturarak arka planı bulanık pencereler oluşturmanıza olanak tanır.

  • Arkadakileri bulanıklaştır, bir (iletişim) penceresinin arkasındaki ekranın tamamını bulanıklaştırarak alan derinliği efekti oluşturmanıza olanak tanır.

Bu iki efekt, aşağıdaki şekilde gösterildiği gibi ayrı ayrı veya birlikte kullanılabilir:

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

a

 yalnızca arkadakini bulanıklaştır

b

 arka plan bulanıklaştırma ve arka plan bulanıklaştırma

c

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

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

Uygulama

Uygulama geliştiriciler

Uygulama geliştiricilerin, bulanıklık efekti oluşturmak için bir bulanıklık yarıçapı sağlaması gerekir. Bulanıklaştırma yarıçapı, bulanıklaştırmanın ne kadar yoğun olacağını kontrol eder. Yani yarıçap ne kadar yüksek olursa bulanıklık o kadar yoğun olur. 0 piksel bulanıklık, bulanıklık olmadığı anlamına gelir. Arka plan bulanıklaştırma için 20 piksel yarıçapı iyi bir alan derinliği efekti oluştururken 80 piksel yarıçapı iyi bir buzlu cam efekti oluşturur. 150 pikselden yüksek bulanıklık yarıçaplarından kaçının. Aksi takdirde performans önemli ölçüde etkilenir.

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

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

Yerleşik olmayan pencerelerde arka plan bulanıklaştırma özelliğini kullanarak, temel içeriğin bulanık bir resmi olan pencere arka plan efekti oluşturabilirsiniz. Pencerenize bulanıklaştırılmış bir arka plan eklemek için aşağıdakileri yapın:

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

  2. Pencereyi yarı saydam yapmak için R.attr.windowIsTranslucent değerini true olarak ayarlayın. Bulanıklaştırma, pencere yüzeyinin altına çizilir. Bu nedenle, bulanıklaştırmanın görünür olması için pencerenin yarı saydam olması gerekir.

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

  4. Yuvarlatılmış köşeleri olan bir pencere için, pencere arka planı olarak yuvarlatılmış köşeleri olan bir ShapeDrawable ayarlayarak bulanık alanın yuvarlatılmış köşelerini belirleyin.

  5. Bulanıklaştırmanın etkin ve devre dışı durumlarını ele alın. Daha fazla bilgi için Uygulamalarda pencere bulanıklaştırmayı kullanma yönergeleri bölümüne göz atın.

Arka planı bulanıklaştır

Arka bulanıklık, pencerenin arkasındaki ekranın tamamını bulanıklaştırır. Bu efekt, ekranda 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 aşağıdaki adımları uygulayın:

  1. Arka plan bulanıklığını etkinleştirmek için pencere işaretçilerine FLAG_BLUR_BEHIND ekleyin. Alternatif olarak, pencere temasında R.attr.windowBlurBehindEnabled değerini ayarlayın.

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

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

  4. Bulanıklaştırmanın etkin ve devre dışı durumlarını ele alın. Daha fazla bilgi için Uygulamalarda pencere bulanıklaştırmayı kullanma yönergeleri bölümüne göz atın.

Uygulamalarda bulanıklaştırma özelliğini kullanmayla ilgili yönergeler

Pencere bulanıklaştırma desteği aşağıdakilere 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 seçebilir.

  • Sistem durumu: Sistem sunucusu, çalışma zamanında pencere bulanıklıklarını geçici olarak devre dışı bırakabilir (ör. pil tasarrufu modundayken, belirli türde video içerikleri oynatılırken veya geliştirici tarafından geçersiz kılındığında).

Uygulamanızı Android sürümleri, cihazlar ve sistem durumlarıyla uyumlu hale getirmek 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 aracılığıyla bir dinleyici ekleyin. Ayrıca, pencere bulanıklaştırmalarının şu anda etkin olup olmadığını sorgulamak için WindowManager#isCrossWindowBlurEnabled değerini 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ıklık devre dışı bırakıldığında pencere içeriği doğrudan temel pencerenin içeriğiyle örtüşür ve örtüşen pencerenin okunabilirliği azalır. Bu tür bir etkiyi önlemek için, pencere bulanıklaştırma devre dışı bırakıldığında uygulamanın kullanıcı arayüzünü aşağıdaki gibi uyarlayın:

    • Arka plan bulanıklaştırma 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 bir karartma 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ıklaştırma hem de arka plan bulanıklaştırma özelliğini kullanan bir etkinliğin çalışan örneği verilmiştir.

Aşağıdaki MainActivity.java örneğinde, arka plan bulanıklaştırma yarıçapı 20 piksel, arka plan bulanıklaştırma yarıçapı ise 80 piksel olan bir iletişim kutusu gösterilmektedir. Pencere arka planı çizilebilir öğesinde XML'de tanımlanan yuvarlatılmış köşeleri vardır. Farklı Android sürümlerini, farklı cihazları (pencere bulanıklığını desteklemeyen cihazlar olabilir) ve çalışma zamanında bulanıklığın etkinleştirilmesi veya devre dışı bırakılması gibi değişiklikleri doğru şekilde yönetir. Pencere arka planı çizilebilir alfa değerini ve pencere karartma miktarını ayarlayarak iletişim kutusu içeriğinin bu koşullardan herhangi birinde okunabilir olmasını sağlar.

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

Pencere için yuvarlatılmış köşeler oluşturmak amacıyla, res/drawable/window_background.xml içinde pencere arka planını 20 dp yarıçaplı yuvarlatılmış köşeler içeren bir ShapeDrawable olarak aşağıdaki gibi tanımlarız:

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

Pencere bulanıklaştırma, etkinliğin altındaki pencerenin içeriğini bulanıklaştırır. Bulanıklaştırılmış görüntü bu etkinlik penceresinin altına çizilir. Bu nedenle, bulanıklaştırmanın görünür olması için etkinlik penceresinin yarı saydam olması gerekir. Pencereyi yarı saydam yapmak için etkinlik temasında R.attr.windowIsTranslucent değerini aşağıdaki gibi ayarlıyoruz:

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

OEM'ler ve iş ortakları

Bir cihazda pencere bulanıklaştırma özelliğinin olması için OEM'nin cihazın pencere bulanıklaştırmayı desteklediğini belirtmesi gerekir.

Cihazınızın pencere bulanıklaştırma özelliğini destekleyip desteklemediğini kontrol etmek için aşağıdakileri yapın:

  • Cihazın ek GPU yükünü kaldırabildiğinden emin olun. Düşük kaliteli cihazlar ek yükü kaldıramayabilir. Bu da kare atlamalarına neden olabilir. Pencere bulanıklaştırma özelliğini yalnızca yeterli GPU gücüne sahip test edilen cihazlarda etkinleştirin.

  • Özelleştirilmiş bir oluşturma motorunuz varsa oluşturma motorunuzun bulanıklık mantığını uyguladığından emin olun. Varsayılan Android 12 oluşturma motoru, bulanıklık mantığını BlurFilter.cpp içinde uygular.

Cihazınızın pencere bulanıklığını destekleyebildiğinden emin olduktan sonra aşağıdaki yüzey fırlatıcıyı sysprop ayarlayın:

PRODUCT_VENDOR_PROPERTIES += \
       ro.surface_flinger.supports_background_blur=1

Doğrulama

Bulanıklaştırma etkin ve bulanıklık devre dışı durumları arasında geçiş yaparken uygulama pencerenizin uygun şekilde işlendiğini doğrulamak için aşağıdaki adımları uygulayın:

  1. Bulanıklığın 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 bulanık duruma gidip geldiğini ve bu durumdan çıktığını doğrulayın.

Pencere bulanıklaştırmayı açma ve kapatma

Pencere kullanıcı arayüzünün, pencere bulanıklaştırma efektiyle nasıl oluşturulduğunu test etmek için aşağıdaki yöntemlerden birini kullanarak bulanıklaştırmayı 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 ve sonraki sürümleri çalıştıran cihazınızın pencere bulanıklaştırma özelliğini destekleyip desteklemediğini ve bu özelliğin şu anda etkin olup olmadığını kontrol etmek için kök erişimi olan bir cihazda adb shell wm disable-blur dosyasını çalıştırın.

Sorun giderme

Doğrulama sırasında sorun giderme için aşağıdakileri kılavuz olarak kullanın.

Bulanıklaştırma uygulanmaz.

Test cihazı, pencere bulanıklaştırmayı desteklemiyor

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

Yuvarlatılmış köşeler yok

Geliştirici seçeneğini güncellemek bulanıklıkları etkinleştirmez

  • Cihazın pil tasarrufu modunda mı yoksa multimedya tünelleme özelliğini mi kullandığını kontrol edin. Bazı TV cihazlarında, video oynatma sırasında pencere bulanıklaştırma da devre dışı bırakılabilir.

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

Dinleyiciden 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.