Share My Creation Blur Effect Demo

Discussion in 'Share Your Creations' started by thedesolatesoul, May 12, 2014.

  1. thedesolatesoul

    thedesolatesoul Expert Licensed User

    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)
     

    Attached Files:

    Last edited: May 20, 2014
  2. NJDude

    NJDude Expert Licensed User

    Nice!
     
  3. LucaMs

    LucaMs Expert Licensed User

    Nice? It is exactly what I see without glasses! :D
     
    carchek, JTmartins and KMatle like this.
  4. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Yes, but this is only part of the layout. Remember you will have all the in-focus views infront of this.
     
  5. JordiCP

    JordiCP Well-Known Member Licensed User

    Nice effect!

    Do you blend different resolution layers to get this?
     
  6. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Yes! (you saw right through it!)
    But it doesnt need to be different resolution, I only downscale to save memory and time.
    It is only blending between two images.
     
    JordiCP likes this.
  7. LucaMs

    LucaMs Expert Licensed User


    I know, I can see my nose in the foreground :D
     
  8. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Added the sample project code and library.
     
    Douglas Farias likes this.
  9. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Attached Files:

    NJDude likes this.
  10. NJDude

    NJDude Expert Licensed User

    Awesome!

    "The Legend" is back I see. :D
     
    thedesolatesoul likes this.
  11. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Thanks :p

    Added source code to first post.
     
  12. susu

    susu Well-Known Member Licensed User

    Hi thedesolatesoul,

    I tried your example code but I got error:
    Code:
    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?
    Code:
    <?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>
     
  13. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Appologies. I have uploaded the library separately again to the first post.
     
    susu likes this.
  14. alexwekell

    alexwekell Member Licensed 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: May 31, 2014
  15. thedesolatesoul

    thedesolatesoul Expert Licensed 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.
     
  16. alexwekell

    alexwekell Member Licensed User

    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.

    Code:
    #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"Activity240dip)

        
    'We add the ListView to our NavigationPanel and set it up
        NavDrawer.NavigationPanel.AddView(LV1, 0100dip100%x100%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 ,0100%x100%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, 
    20dip20dip50%x50%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(1As Object
        
    Dim types(1As 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
     
  17. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Sorry for taking too long to respond to this. Drop me a PM to remind me, but with the current turn of events in my life, it will be a while before I get to this.
     
  18. thedesolatesoul

    thedesolatesoul Expert Licensed 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.
     

    Attached Files:

    alexwekell and NJDude like this.
  19. alexwekell

    alexwekell Member Licensed User

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

    wonder Expert Licensed User

    I see that you used Accelerated Surface. Can this be done with LibGDX? If so, I would like to implement it on my games.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice