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, alan derinliği efekti oluşturarak bir (iletişim kutusu) penceresinin arkasındaki tüm ekranı bulanıklaştırmanıza olanak tanır.

İki efekt ayrı ayrı veya aşağıdaki şekilde gösterildiği gibi birlikte 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

Şekil 1. Yalnızca arka planı bulanıklaştırma (a), yalnızca arkadaki alanı bulanıklaştırma (b), arka planı ve arkadaki alanı 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 da o kadar yoğun olur. 0 piksel bulanıklık, bulanıklık olmadığını gösterir. 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ıklaştırma 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 bulanıklaştırma

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 değerini ayarlayın.

  2. Pencereyi yarı saydam hale getirmek için R.attr.windowIsTranslucent değerini doğru 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 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ırma

Arka plandaki bulanıklık, pencerenin arkasındaki tüm ekranı 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 plan bulanıklığını etkinleştirmek için pencere işaretlerine FLAG_BLUR_BEHIND ekleyin. Alternatif olarak, pencere temasında R.attr.windowBlurBehindEnabled'ı ayarlayın.

  2. Bulanıklaştırma yarıçapı ayarlamak için WindowManager.LayoutParams#setBlurBehindRadius numaralı telefonu arayı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 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 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 oluşabilir.

Uygulamanızın Android sürümleri, cihazlar ve sistem durumları arasında 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 aracılığıyla bir dinleyici 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 alttaki 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 tutarına sahip karartma katmanı ekleyin.

Arka plan bulanıklaştırma ve arkadaki bulanıklık örneği

Bu bölümde, hem arka planı bulanıklaştırma hem de arka planı bulanıklaştırma efektini 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ında bulanıklığı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ını ayarlayarak iletişim kutusu içeriğinin bu koşulların 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;
    }
}

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ış görüntü, 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 özelliğini 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ı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ırma etkin ve devre dışı durumları arasında geçiş yaparken uygun ş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 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 kullanıcı arayüzünün pencere bulanıklığı efektiyle nasıl oluşturulduğunu test etmek için aşağıdaki yöntemlerden birini kullanarak bulanıklıkları 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ıklıklarını destekleyip desteklemediğini ve pencere bulanıklıklarının 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 kılavuz 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.