carloscj6 / blurrylayout

Simple to use blurry background layout library android.

BlurryLayout

Create a beautiful blurry background with simple code and less work.

Use this layout to place views above it while keeping the background awesome. Use your image and colors to come up with a cool layout that matches your needs

Screenshot

Setup

First include the library in your project with:

dependencies {
    implementation 'com.revosleap.layout:blurrylayout:2.0.0'
}

In your layout.xml file, set the parent layout as:

<com.revosleap.blurrylayout.BlurryLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/blurLayout"
    tools:context=".Blurry">
</com.revosleap.blurrylayout.BlurryLayout>

Xml Attributes

You can set xml atttributes to your layout as follows:

create namespace declaration xmlns:app="http://schemas.android.com/apk/res-auto" then add attributes as:

    app:blurColor="@android:color/white" <!--takes Color value int-->
    app:blurOpacity=".4" <!--takes value float-->
    app:blurImage="@drawable/together" <!--takes image drawable-->
    app:blurRadius="13" <!--takes value int-->

Sample

<com.revosleap.blurrylayout.BlurryLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/blurLayout"
    tools:context=".Blurry"
    app:blurColor="@android:color/white"
    app:blurOpacity=".4"
    app:blurImage="@drawable/together"
    app:blurRadius="13" >

Programatically

In your activity class you need to pass the image to be used as background;

Create an instance of the class like:

Java

BlurryLayout blurLayout = findViewById(R.id.blurLayout);

or

Kotlin

val blurLayout = findViewById(R.id.blurLayout) as BlurryLayout

Image blur

Set image and blur radius as:

Java

blurLayout.setBitmapBlur(bitmap);

Kotlin

blurLayout.setBitmapBlurry(bitmap);

Note: radius takes int. It determines the radius of the blur effect on the image.

Note: blurPercentage takes int. It determines the the percentage of the blur.

Blur color

Set as:

Java

blurLayout.blurColor(Color.WHITE);

or

Kotlin

blurLayout.blurColor = Color.WHITE

This is the color of the background blur.

Can be determined by the color of views above it. Example, textviews with light color will need a darker blur color and vice versa.

Note: blur color takes int.

Blur opacity

set as:

Java

blurLayout.blurOpacity(0.3f);

or

Kotlin

blurLayout.blurOpacity = 0.3F

Determines the opacity of the blurry backgroud. Higher values mean the blur color is more visible and vice versa. It takes float

Contributions

Feel free to fork and create pull requests

Thanks to @kevin-kip for improving readme and kotlin guide.

License

Copyright 2019 Revosleap

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Coded with 💙 by revosleap.

blurrylayout's Issues

Not found

it's saying inside xml:
Class referenced in the layout file, com.revosleap.blurrylayout.BlurryLayout, was not found in the project or the libraries
Cannot resolve class com.revosleap.blurrylayout.BlurryLayout