Extended CoordinatorLayout, that helps creating background galleries

Overview

BlurZoomGallery

Maven Central Android Arsenal

Extended CoordinatorLayout, that helps creating background galleries.

Illustration of behavior

Features:

  • expandable Collapsing Toolbar Layout, making space for a background view
  • hadling of expand/collapse animation
  • blurring of background view on collapse animation
  • zoom effect on collapse

How to use

Import dependency using Gradle:

compile 'com.github.fafaldo:blur-zoom-gallery:1.0.0'

In order to use BlurZoomGallery you need to implement following view hierarchy in your XML layout file:

|
|-> BlurZoomCoordinatorLayout
	|
	|-> Gallery container layout (id: gallery_coordinator_gallery_container)
	|	|
	|	|-> Gallery view (for example ViewPager; id: gallery_coordinator_gallery)
	|
	|-> AppBarLayout (id: gallery_coordinator_appbarlayout)
	|	|
	|	|-> CollapsingToolbarLayout
	|		|
	|		|-> Toolbar (id: gallery_coordinator_toolbar)
	|
	|-> Scrollable view (for example NestedScrollView; id: gallery_coordinator_scroll)
		|
		|-> Placeholder view that will be expanded, must be first element of view to make it work (id: gallery_coordinator_placeholder)
		...

Remember to assign each element a proper ID. This structure is very similar to structure implemented in Google's Support Design Library, for obvious reasons. Background gallery view should be placed inside a container, the container will be drawn and blurred but only the inner view will receive touch events. Placeholder view should be invisible and is used to expand upper and lower views.

Example implementation:

<com.github.fafaldo.blurzoomgallery.widget.BlurZoomCoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/coordinator">

    <FrameLayout
        android:id="@+id/gallery_coordinator_gallery_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.ViewPager
            android:id="@+id/gallery_coordinator_gallery"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </FrameLayout>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/gallery_coordinator_appbarlayout"
        android:layout_height="300dp"
        android:layout_width="match_parent"
        android:background="@android:color/transparent"
        app:elevation="0dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/MyExpandedTextAppearance"
            app:collapsedTitleTextAppearance="@style/MyCollapsedTextAppearance"
            app:expandedTitleMargin="50dp"
            android:background="@android:color/transparent">

            <android.support.v7.widget.Toolbar
                android:id="@+id/gallery_coordinator_toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>

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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/gallery_coordinator_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:paddingLeft="20dp"
        android:paddingRight="20dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View
                android:id="@+id/gallery_coordinator_placeholder"
                android:layout_width="match_parent"
                android:layout_height="0dp"/>

            ...

        </RelativeLayout>

    </android.support.v4.widget.NestedScrollView>

</com.github.fafaldo.blurzoomgallery.widget.BlurZoomCoordinatorLayout>

Gallery will be automatically expanded on Collapsing Toolbar click. If you want to do it manually use function

expand();

Gallery collapses automatically on scrollable view click. To do it manually call

collapse();

If you want to listen for collapse and expand changes set the OnStateChangedListener. Blurring action takes some time so it's done asynchronously. To listen for success of blurring set OnBlurCompletedListener.

In case of other problems with implementation see example included in this repository.

Animation duration and interpolator

You can control duration and interpolator of the animator used to expand and collapse Toolbar with methods:

setInterpolator(Interpolator interpolator);
setDuration(int duration);

However, Google APIs doesn't allow this kind of customization yet. My implementation uses Java's reflection mechanism, so be aware that this code might stop working in the future.

Blur animation is done using frame by frame animation, with each frame blurred more and more. ImageViews are added dynamically from the code. You can control max blur radius and number of blur steps. Remember, that adding too many ImageView might affect performance. In order to reduce memory consumption images are downscaled before blurring. You can control this downscaling with one of the parameters.

To properly use the selected duration and interpolator you should play expend/collapse animation on AppBarLayout at least once, before trying to open gallery by touching. You should call

appBarLayout.setExpanded(true, true);

By default AppBarLayout is expanded, so call function with first parameter set to 'true', to avoid unwanted animation on start-up. Remember to set second parameter to 'true' too, because only then will the inner fields be properly initiated.

Parameters:

You can control these parameters via XML:

<attr name="collapsedListHeight" format="dimension"/>	//height of the scrollable view that will be left after view expand (in dp), default: 112 px
<attr name="maxBlurRadius" format="float"/>				//maximum radius of blur, default: 4
<attr name="blurSteps" format="integer"/>				//steps of blur animation, default: 5
<attr name="bitmapSizeDivide" format="integer"/>		//how many times are images resized, before blurring, default: 5
<attr name="blurEnable" format="boolean"/>				//enable blur, default: true
<attr name="scaleEnable" format="boolean"/>				//enable scale animation, default: true
<attr name="maxScale" format="float"/>					//maximum zoom of collapsed anim, default: 1.15
<attr name="android:scaleType"/>						//scaleType of blur steps ImageViews, default: CENTER_CROP

Changelog

  • 1.0.0 - initial release

License

FABToolbar for Android

The MIT License (MIT)

Copyright (c) 2015 Rafał Tułaza

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You might also like...
⚙️ Extended gameplay mechanics and brand-new code foundations for Minecraft: Java Edition platforms

⚙️ foundation Extended gameplay mechanics and brand-new code foundations for Minecraft: Java Edition platforms. 🎏 Getting Started You can find inform

A Job Queue specifically written for Android to easily schedule jobs (tasks) that run in the background, improving UX and application stability.

Development in this repository is stopped. Future development continues on https://github.com/yigit/android-priority-jobqueue ========================

A Job Queue specifically written for Android to easily schedule jobs (tasks) that run in the background, improving UX and application stability.

A Job Queue specifically written for Android to easily schedule jobs (tasks) that run in the background, improving UX and application stability.

LiveEdgeDetection is an Android document detection library built on top of OpenCV. It scans documents from camera live mode and allows you to adjust crop using the detected 4 edges and performs perspective transformation of the cropped image.  It works best with a dark background.
📸 A library that allows you to capture images secretly, in background without alerting users.

HiddenCamera A library that allows you to capture images secretly, in background without alerting users. Gradle Dependency Add the dependency to your

[] Easily have blurred and transparent background effect on your Android views.
[] Easily have blurred and transparent background effect on your Android views.

##[DEPRECATED] BlurBehind Easily have blurred and transparent background effect on your Android views. Before API level 14 there was a Window flag cal

Nucleus is an Android library, which utilizes the Model-View-Presenter pattern to properly connect background tasks with visual parts of an application.

Nucleus Deprecation notice Nucleus is not under develpment anymore. It turns out that Redux architecture scales way better than MVP/MVI/MVVM/MVxxx and

Location tracking & geofencing the easy way. Supports background, killed app, rebooted device different update intervals.

Geofencer Convience library to receive user location updates and geofence events with minimal effort. Features: supports Android-Q receive updates on

User onboarding library with smooth animation of objects and background colors
User onboarding library with smooth animation of objects and background colors

SlidingTutorial Cleveroad introduces Sliding Tutorial Library for Flutter Hey guys, hope you haven’t started developing a tutorial for your Flutter ap

A list of most useful resources for designing android apps such as all material colors and dimens, 180 Gradient background + html, social, flat, fluent, metro colors.

Timer UI Login UI Fitness UI Material-Resources-Library A list of most useful resources for designing android apps such as all material colors and dim

A Job Queue specifically written for Android to easily schedule jobs (tasks) that run in the background, improving UX and application stability.

This Project is Deprecated! Thanks to everybody who've used Android Priority JobQueue. It was designed in a world where there was no JobScheduler, RxJ

Nucleus is an Android library, which utilizes the Model-View-Presenter pattern to properly connect background tasks with visual parts of an application.

Nucleus Deprecation notice Nucleus is not under develpment anymore. It turns out that Redux architecture scales way better than MVP/MVI/MVVM/MVxxx and

A Job Queue specifically written for Android to easily schedule jobs (tasks) that run in the background, improving UX and application stability.

Development in this repository is stopped. Future development continues on https://github.com/yigit/android-priority-jobqueue ========================

[] Apply background tinting to the Android system UI when using KitKat translucent modes
[] Apply background tinting to the Android system UI when using KitKat translucent modes

Android System Bar Tint Apply background tinting to the Android system UI when using KitKat translucent modes. Android 4.4 (KitKat) introduced translu

[Deprecated] Sexy way to execute async/background tasks on Android

Groundy library for Android @Deprecated Unfortunatenly this library is no longer maintained, we encourage you to use other widely supported solutions

Utility for detecting and notifying when your Android app goes background / becomes foreground

Foredroid Utility for detecting and notifying when your Android app goes background / becomes foreground. API-level 14+. Usage: Initialise Foreground

[Development stopped in 2014. Unfinished and not stable - not recommended to use.] An easy-to-use ViewPager subclass with parallax background effect for Android apps.

Development stopped in 2014 Not developed since 2014. Unfinished and not stable - not recommended to use. ParallaxViewPager An easy-to-use ViewPager s

Easily upload files (Multipart/Binary/FTP out of the box) in the background with progress notification. Support for persistent upload requests, customizations and custom plugins.
Easily upload files (Multipart/Binary/FTP out of the box) in the background with progress notification. Support for persistent upload requests, customizations and custom plugins.

ℹ️ 🆕 Get started with 4.x 👉 Try it out Get the demo APK Still using 3.x ? It's not maintained or supported. You may have security issues and problem

Android - A layout that arranges its children in relation to a background image
Android - A layout that arranges its children in relation to a background image

ImageLayout A layout that arranges its children in relation to a background image. The layout of each child is specified in image coordinates (pixels)

Owner
Rafał Tułaza
Rafał Tułaza
Extended-Hanoi - Extended Hanoi Tower in Kotlin Tornadofx

Extended-Hanoi Extended Hanoi Tower in Kotlin Tornadofx

null 10 Dec 19, 2022
Android library (AAR). Highly configurable, easily extendable deep zoom view for displaying huge images without loss of detail. Perfect for photo galleries, maps, building plans etc.

Subsampling Scale Image View A custom image view for Android, designed for photo galleries and displaying huge images (e.g. maps and building plans) w

null 7.4k Jan 8, 2023
Realtime, Accurate Background Changer, Portrait Segmentation, Portrait Matting, Background Removal for Android

Realtime Background Changer on Camera Stream Realtime, Accurate Background Changer, Portrait Segmentation, Portrait Matting, Background Removal SDK fo

FaceOnLive 87 Dec 30, 2022
Android library for creating QR-codes with logo, custom pixel/eyes shapes, background image. Powered by ZXing.

custom-qr-generator Android library for creating QR-codes with logo, custom pixel/eyes shapes, background image. Powerd by ZXing. Installation To get

Alexander Zhirkevich 34 Dec 17, 2022
Extended Android Tab Layout with animated indicators that have continuous feedback.

Dachshund Tab Layout Introduction Boosted Android Tab Layout with custom animated indicators including "Dachshund" animation inspired by this. Sample

Andrii 859 Nov 10, 2022
Under the Hood is a flexible and powerful Android debug view library. It uses a modular template system that can be easily extended to your needs, although coming with many useful elements built-in.

Under the Hood - Android App Debug View Library Under the Hood is a flexible and powerful Android debug view library. It uses a modular template syste

Patrick Favre-Bulle 217 Nov 25, 2022
Bringing extended scrolling features to Android's native ListView and ExpandableListView.

About QuickScroll QuickScroll is a library aimed at creating similar scrolling experiences to the native Contacts app's People view. It has the same s

Andras Kindler 461 Nov 11, 2022
Extended SQLite functionality for Android

sqlite-provider A simplification of database access for Android. Description sqlite-provider implements a ContentProvider for you that allows database

Novoda 308 Nov 20, 2022
Androids EditText that animates the typed text. EditText is extended to create AnimatedEditText and a PinEntryEditText.

AnimatedEditText for Android This repository contains AnimatedEditText and TextDrawable all of which extend the behaviour of EditText and implement fe

Ali Muzaffar 439 Nov 29, 2022
Extended SQLite functionality for Android

sqlite-provider A simplification of database access for Android. Description sqlite-provider implements a ContentProvider for you that allows database

Novoda 308 Nov 20, 2022