Размытие и Unblur изображения в сворачивающейся панели инструментов

В моем CountryImageInfo.java У меня рушится панель инструментов с изображением внутри. Вот как это выглядит:

Я хочу знать, как размыть изображение, когда оно разрушается, и как размыть изображение, если оно снова падает. Как и в панели уведомлений iOS, я не знаю, знакомы ли вы с ней... Я видел подобные вопросы, но разница была в том, что некоторые спрашивали, как размыть изображение, когда оно сваливается (не то, что я Я спрашиваю. Я спрашиваю, как рушится. Постепенное размытие)...

Это мой XML, кстати, все обернуто в CoordinatorLayout:

<android.support.design.widget.AppBarLayout
    android:id="@+id/testeparainfo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/actionBarDivider">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/backgroundcollapsedtoolbarinfo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="exitUntilCollapsed|scroll">


        <ImageView
            android:id="@+id/imgCountryInfoFoto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />

        <ImageView
            android:id="@+id/imgCountryInfoEscuro"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:background="@drawable/background_pais_info"
            android:scaleType="centerInside" />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbaridinfo"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </android.support.v7.widget.Toolbar>

        <TextView
            android:id="@+id/txtNomePaisInfo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginStart="30dp"
            android:layout_marginTop="520dp"
            android:paddingBottom="10dp"
            android:text="TextView"
            android:textColor="@android:color/background_light"
            android:textSize="35sp"
            app:layout_anchor="@+id/testeparainfo"
            app:layout_anchorGravity="left|bottom" />


    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

Обновить:

Дублировать изображение не совсем то, что я хочу, потому что эти изображения немного большие, так есть ли другой способ, кроме дублирования изображений? Я искал некоторые библиотеки, но не смог найти ничего, что соответствовало бы моим потребностям... Я могу выделить все изображение синим цветом, есть ли способ заставить слушателя начать размытие, когда пользователь перетаскивает свернутую полосу вверх? Пожалуйста, помогите, я много чего перепробовал!

Источник

2 ответа

Решение

Я использовал RealtimeBlurView. Чтобы использовать это, внесите изменения в build.gradle вашего модуля приложения.

Добавьте зависимости в ваш build.gradle:

dependencies {
    compile 'com.github.mmin18:realtimeblurview:1.1.2'
}
android {
    buildToolsVersion '24.0.2'                 // Use 23.0.3 or higher
    defaultConfig {
        minSdkVersion 15
        renderscriptTargetApi 19
        renderscriptSupportModeEnabled true    // Enable RS support
    }
}

При необходимости добавьте правила proguard:

-поддержите класс android.support.v8.renderscript.** { *; }

Затем добавьте следующий вид в ваш CollapsingToolbarLayout

<com.github.mmin18.widget.RealtimeBlurView
            android:id="@+id/blurView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:realtimeBlurRadius="20dp"
            app:realtimeOverlayColor="#8000" />

И в вашей деятельности добавьте следующий код.

final AppBarLayout appBar = findViewById(R.id.testeparainfo);
final RealtimeBlurView blurView = findViewById(R.id.blurView);
blurView.setAlpha(1F);
appBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(final AppBarLayout appBarLayout, final int verticalOffset) {
        float offsetAlpha = (appBarLayout.getY() / appBar.getTotalScrollRange());
        blurView.setAlpha(offsetAlpha * -1);
    }
});

Воспользовался этим ответом

Источник

Попробуйте эту библиотеку Android Blurry

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    double percentage = (double) Math.abs(verticalOffset) / collapsingToolbar.getHeight();
    if (percentage > 0.8) {
        collapsingToolbar.setTitle("Collapsed");
    } else {
        collapsingToolbar.setTitle("Expanded");
    }

Blurry.with(context)
  .radius(10 * percentage)
  .sampling(8)
  .color(Color.argb(66, 255, 255, 0))
  .async()
  .animate(500)
  .onto(blurryImage); // imgCountryInfoEscuro
}
Источник
Другие вопросы по тегам