Share My Creation Blur Effect Demo

My code is hideous and needs to be cleaned but I thought to post a demo here as many people want to know how to do these effects.
This is a demo that uses some trickery to create blurry effects that look quite good in apps (for e.g. etsy)
Can be used on slideout drawers, scrolling listviews etc.
Thanks to klaus, Informatix to help me figure out scaling issues.

EDIT: Added Sample project and library.
Sorry for the unclean and haphazard coding in the sample.
It uses one of my own libraries UIUtils for the bluronThread function.
It uses AcceleratedSurface library to scale the bitmap.
It uses Reflection library to setAlpha on the imageview.
It uses IME library just to hide the keyboard as I found it annoying.

EDIT2: Added another sample.
Uses the Navigation Drawer to progressively blur the background. Also better looking Drawer.
Second sample uploaded here: https://www.dropbox.com/s/voxlvlw4qx7wox7/NavBarBlur.apk
(Too big for forum)
 

Attachments

  • Sample.apk
    493.2 KB · Views: 1,269
  • Screenshot_2014-05-12-22-54-52.png
    Screenshot_2014-05-12-22-54-52.png
    136.9 KB · Views: 8,493
  • BlurDemo.zip
    363 KB · Views: 2,826
  • NavDrawerBlur.zip
    313.9 KB · Views: 1,705
  • UIUtils.zip
    6.2 KB · Views: 1,020
Last edited:

susu

Well-Known Member
Licensed User
Longtime User
Hi thedesolatesoul,

I tried your example code but I got error:
B4X:
Error description: Unknown type: uiutils
Are you missing a library reference?
Occurred on line: 136
Dim UIUtils As UIUtils

I'm sure I checked on UIUtils on Libs tab.

I open your UIUtils.xml and its content seems not right?
B4X:
<?xml version="1.0" encoding="UTF-8"?>
<root>
    <doclet-version-NOT-library-version>1.02</doclet-version-NOT-library-version>
    <class>
        <name>com.maximussoft.tooleaphelper.TooleapHelper</name>
        <shortname>TooleapHelper</shortname>
        <owner>process</owner>
    </class>
    <version>0.01</version>
    <author>thedesolatesoul</author>
    <dependsOn>tooleap-sdk-0.9.2</dependsOn>
</root>
 

thedesolatesoul

Expert
Licensed User
Longtime User
Hi thedesolatesoul,

I tried your example code but I got error:
B4X:
Error description: Unknown type: uiutils
Are you missing a library reference?
Occurred on line: 136
Dim UIUtils As UIUtils

I'm sure I checked on UIUtils on Libs tab.

I open your UIUtils.xml and its content seems not right?
B4X:
<?xml version="1.0" encoding="UTF-8"?>
<root>
    <doclet-version-NOT-library-version>1.02</doclet-version-NOT-library-version>
    <class>
        <name>com.maximussoft.tooleaphelper.TooleapHelper</name>
        <shortname>TooleapHelper</shortname>
        <owner>process</owner>
    </class>
    <version>0.01</version>
    <author>thedesolatesoul</author>
    <dependsOn>tooleap-sdk-0.9.2</dependsOn>
</root>
Appologies. I have uploaded the library separately again to the first post.
 

alexwekell

Member
Licensed User
Longtime User
So how do I actually interact with things? Using your navbar example, I added a list view to test and realized I can't actually touch it. What do I need to do?

Edit: what do I need to add my list view too for me to be able to scroll it, use the navdrawer, and have it be blurred?
 
Last edited:

thedesolatesoul

Expert
Licensed User
Longtime User
So how do I actually interact with things? Using your navbar example, I added a list view to test and realized I can't actually touch it. What do I need to do?

Edit: what do I need to add my list view too for me to be able to scroll it, use the navdrawer, and have it be blurred?
I guess add your listview to pContent instead of loading the layout.
I have to say i did have issues with the listview, but theoretically it should work. The scrolling should also work as long as you add it to pContent rather than directly.
 

alexwekell

Member
Licensed User
Longtime User
I guess add your listview to pContent instead of loading the layout.
I have to say i did have issues with the listview, but theoretically it should work. The scrolling should also work as long as you add it to pContent rather than directly.

Tried that it only got 2 of the 3 checks I needed, but not the most important one. Attached is the code I tried, really nothing much was modified, but the list view will become blurred and I can still slide out the nav drawer, but no luck being able to interact with the list view.

B4X:
#Region  Project Attributes
    #ApplicationLabel: Nav Drawer Blur
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub


Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Dim listviewtest As ListView
    Dim NavDrawer As AHNavigationDrawer
    'ListView inside Nav Drawer
    Dim LV1 As ListView
    'Panel holds NavDrawer's content
    Dim pContent As Panel 
    'Amount to descend when drawer opens
    Dim descendAmount As Int = 20dip
    'The blur layers!
    Dim iv_layer1, iv_layer2 As ImageView
    'Bitmaps for the blur layers!
    Dim pshot, bshot As Bitmap
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("l1")
    Activity.Title = "Slide out drawer"
    LV1.Initialize("LV1")
    'Initialize the navigation drawer.
    NavDrawer.Initialize("NavDrawer", Activity, 240dip)

    'We add the ListView to our NavigationPanel and set it up
    NavDrawer.NavigationPanel.AddView(LV1, 0, 100dip, 100%x, 100%y)
    NavDrawer.NavigationPanel.Color = Colors.ARGB(88,98,98,98)
    LV1.AddTwoLinesAndBitmap("Load Images","",LoadBitmap(File.DirAssets,"selected_checkbox.png"))
    LV1.AddTwoLinesAndBitmap("Menu Item 2","",LoadBitmap(File.DirAssets,"selected_unselectedpng.png"))
    LV1.TwoLinesAndBitmap.ItemHeight = 96dip
    LV1.TwoLinesAndBitmap.ImageView.Top    = (96dip - 48dip) / 2
    LV1.TwoLinesAndBitmap.ImageView.Width  = 48dip
    LV1.TwoLinesAndBitmap.ImageView.Height = 48dip
    LV1.TwoLinesAndBitmap.ImageView.Left = 20dip
    LV1.TwoLinesAndBitmap.Label.Top = (96dip - 48dip) / 2
    LV1.TwoLinesAndBitmap.Label.Height = 48dip
    LV1.TwoLinesAndBitmap.Label.Left = 20dip + 48dip + 20dip
    LV1.TwoLinesAndBitmap.Label.Gravity = Gravity.CENTER_VERTICAL
   
    'Remove the fade on the background when drawer is open
    SetScrimColor(NavDrawer, Colors.Transparent)

    pContent.Initialize("")
    NavDrawer.ContentPanel.AddView(pContent, 0 ,0, 100%x, 100%y)

    pContent.Color = Colors.Black
   
    'Send behind the drawer
    pContent.SendToBack
   
    'Set up the blur layers
    iv_layer1.Initialize("")
    iv_layer2.Initialize("")
    iv_layer1.Gravity = Gravity.FILL
    iv_layer2.Gravity = Gravity.FILL
   
    'pContent.LoadLayout("1")
   
    listviewtest.Initialize("")
   
    listviewtest.AddSingleLine("monday")
    listviewtest.AddSingleLine("tuesday")
    listviewtest.AddSingleLine("wednesday")
    listviewtest.AddSingleLine("thursday")
    listviewtest.AddSingleLine("friday")
   
    pContent.AddView(listviewtest, 20dip, 20dip, 50%x, 50%y)
   
    pContent.AddView(iv_layer1,0dip,0,pContent.Width,pContent.Height)
    pContent.AddView(iv_layer2,0dip,0,pContent.Width,pContent.Height)
    pContent.Color = Colors.Black
   
End Sub


Sub Activity_Resume
    DoEvents
    DoEvents
    pshot = ScrShotWalter
    Dim UIUtils As UIUtils
    UIUtils.blurOnThread(pshot, 20, "Blur")
    DoEvents
    DoEvents
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub iv_Click
    NavDrawer.OpenDrawer
End Sub

'Animate on sliding the drawer
Sub NavDrawer_DrawerSlide (Position As Float, DrawerGravity As Int)
    Dim Offset As Int = Position * descendAmount
    pContent.Left = Offset
    pContent.top = Offset
    pContent.Width = 100%x - 2 * (Offset)
    pContent.Height = 100%y - 2 * (Offset)
    iv_layer1.Width = pContent.Width
    iv_layer1.Height = pContent.Height
    iv_layer2.Width = pContent.Width
    iv_layer2.Height = pContent.Height
    setAlpha(iv_layer2, Position)
End Sub

'Set up bitmaps once blur is complete
Sub Blur_End(retBitmap As Bitmap)
    Log("blurred")
    bshot = retBitmap
    iv_layer1.Bitmap = pshot
    iv_layer2.Bitmap = bshot
    iv_layer1.Gravity = Gravity.FILL
    iv_layer2.Gravity = Gravity.FILL
    setAlpha(iv_layer2, 0)
End Sub

' HELPER FUNCTIONS -----------------------------------------------------------
Sub setAlpha(v As View, value As Float)
    Dim r As Reflector
    r.Target = v
    r.RunMethod2("setAlpha",value, "java.lang.float")
End Sub

Sub SetScrimColor(Nav As AHNavigationDrawer, Color As Int)
    Dim r As Reflector
    r.Target = Nav
    r.Target = r.GetField("mNavDrawer")
    r.RunMethod4("setScrimColor", Array As Object(Color), Array As String("java.lang.int")) 
End Sub

'Take a screenshot - code provided by Sir Walter 2F
Sub ScrShotWalter As Bitmap
    ' Take a screenshot.
    Dim Obj1, Obj2 As Reflector
    Dim bmp As Bitmap
    Dim c As Canvas
    Dim now, i As Long
    Obj1.Target = Obj1.GetActivityBA
    Obj1.Target = Obj1.GetField("vg")
    bmp.InitializeMutable(Activity.Width, Activity.Height)
    c.Initialize2(bmp)
    Dim args(1) As Object
    Dim types(1) As String
    Obj2.Target = c
    Obj2.Target = Obj2.GetField("canvas")
    args(0) = Obj2.Target
    types(0) = "android.graphics.Canvas"
    Obj1.RunMethod4("draw", args, types)
    Return bmp
End Sub
 

thedesolatesoul

Expert
Licensed User
Longtime User
This sample uses a listview.
It works by making the blur layers visible/invisible.

The issue with this however is, as the content is dynamic, the activity screenshot needs to be taken at the right time i.e. just before the drawer opens. I havent figure out how to do that.
 

Attachments

  • NavBarBlur.zip
    314.1 KB · Views: 740

alexwekell

Member
Licensed User
Longtime User
This sample uses a listview.
It works by making the blur layers visible/invisible.

The issue with this however is, as the content is dynamic, the activity screenshot needs to be taken at the right time i.e. just before the drawer opens. I havent figure out how to do that.

Thanks for this, hopefully someone will figure out how to dynamically update it.
 
Top