Android Code Snippet [B4X] Animated change of theme / layouts


This is an example that demonstrates how Root.Snapshot + 2 BitmapCreators, with the old and new layouts can be used to create a nice transition between two layouts.

Code: Copy 
Private Sub SetNewTheme As ResumableSub
    If bc1.IsInitialized = False Then
        bc1.Initialize(Root.Width, Root.Height)
        bc2.Initialize(Root.Width, Root.Height)
        ImageViewForAnimation.Initialize("")
    End If
    If ImageViewForAnimation.As(B4XView).Parent.IsInitialized Then Return True 'already in progress...
    bc1.CopyPixelsFromBitmap(Root.Snapshot)
    UpdateTheme
    bc2.CopyPixelsFromBitmap(Root.Snapshot)
    Root.AddView(ImageViewForAnimation, 0, 0, Root.Width, Root.Height)
    bc1.SetBitmapToImageView(bc1.Bitmap, ImageViewForAnimation)
    Dim brush As BCBrush = bc1.CreateBrushFromBitmapCreator(bc2)
    brush.BlendBorders = False
    For r = 1 To Max(bc1.mWidth, bc1.mHeight) / 2 * 1.5 Step 20dip
        Dim task As DrawTask = bc1.AsyncDrawCircle(bc1.mWidth / 2, bc1.mHeight / 2, r, brush, True, 0)
        bc1.DrawBitmapCreatorsAsync(Me, "BC", Array(task))
        Wait For BC_BitmapReady (bmp As B4XBitmap)
        If xui.IsB4J Then bmp = bc1.Bitmap
        bc1.SetBitmapToImageView(bc1.Bitmap, ImageViewForAnimation)
        Sleep(16)
    Next
    ImageViewForAnimation.As(B4XView).RemoveViewFromParent
    Return True
End Sub

Test the transition in release mode.
 

Attachments

Last edited:
Click to expand...
I cannot say that this is something that has never been seen before :p

[B4X] [XUI] SD RevealColorView

This XUI library serves to change color to an animation (XUI) panel. RevealColor is a panel and has the same methods as an XUI panel. Required XUI 1.72+ SD_XUI_RevealColorView Author: Star-Dust Version: 0.01 RevealColorView Functions: AddView (View As B4XView, Left As Int, Top As Int, Width...
www.b4x.com www.b4x.com
 
Star-Dust said:
I cannot say that this is something that has never been seen before :p

[B4X] [XUI] SD RevealColorView

This XUI library serves to change color to an animation (XUI) panel. RevealColor is a panel and has the same methods as an XUI panel. Required XUI 1.72+ SD_XUI_RevealColorView Author: Star-Dust Version: 0.01 RevealColorView Functions: AddView (View As B4XView, Left As Int, Top As Int, Width...
www.b4x.com www.b4x.com
Click to expand...
Is not the same thing; it is not changing the color of a panel in a certain way, by an animation. Look at the color of the views.
 
LucaMs said:
Is not the same thing; it is not changing the color of a panel in a certain way, by an animation. Look at the color of the views.
Click to expand...
Yes. They are two different layouts. I was talking about the effect.

Obviously I would have liked to have a similar effect between two B4XPage..Even if I have an idea
 
Star-Dust said:
I cannot say that this is something that has never been seen before :p

[B4X] [XUI] SD RevealColorView

This XUI library serves to change color to an animation (XUI) panel. RevealColor is a panel and has the same methods as an XUI panel. Required XUI 1.72+ SD_XUI_RevealColorView Author: Star-Dust Version: 0.01 RevealColorView Functions: AddView (View As B4XView, Left As Int, Top As Int, Width...
www.b4x.com www.b4x.com
Click to expand...
Thanks for the lead.
 
Another example:

Code: Copy 
Private Sub UpdateTheme
    Dim TextColor As Int = IIf(CurrentThemeIsLight, xui.Color_Black, xui.Color_White)
    Dim Background As Int = IIf(CurrentThemeIsLight, xui.Color_White, xui.Color_Black)
    Dim Background2 As Int = IIf(CurrentThemeIsLight, 0xFFF1F1F1, 0xFF7A7A7A)
    Dim Background3 As Int = IIf(CurrentThemeIsLight, 0xFFC5C0C0, 0xFF969696)
    B4XImageView1.Bitmap = xui.LoadBitmap(File.DirAssets, IIf(CurrentThemeIsLight, "wp2319076-natural-full-hd-wallpapers.jpg", "wp2601997-hd-wallpaper-free-downlod.jpg"))
    Root.Color = Background
    CustomListView1.AsView.Color = IIf(CurrentThemeIsLight, 0x22C5C0C0, 0x22969696)
    For Each button As SwiftButton In SwiftButtons
        button.xLBL.TextColor = TextColor
        button.SetColors(Background2, Background3)
    Next
    For i = 0 To CustomListView1.Size - 1
        CustomListView1.GetPanel(i).GetView(0).TextColor = TextColor
    Next
End Sub

Private Sub UpdateTitle 'b4a code
    Dim cd As ColorDrawable
    cd.Initialize(IIf(CurrentThemeIsLight, xui.Color_White, xui.Color_Black), 0)
    B4XPages.GetManager.ActionBar.RunMethod("setBackgroundDrawable", Array(cd))
    Dim title As CSBuilder
    title.Initialize.Color(IIf(CurrentThemeIsLight, xui.Color_Black, xui.Color_White)).Append("Sweep Example").PopAll
    B4XPages.SetTitle(Me, title)
End Sub
Note that the title is updated at the end of the animation effect.
 
Last one for today:


Code: Copy 
Private Sub SetNewTheme As ResumableSub
    If bc1.IsInitialized = False Then
        bc1.Initialize(Root.Width, Root.Height)
        bc2.Initialize(Root.Width, Root.Height)
        ImageViewForAnimation.Initialize("")
    End If
    If ImageViewForAnimation.As(B4XView).Parent.IsInitialized Then Return True 'already in progress...
    bc1.CopyPixelsFromBitmap(Root.Snapshot)
    UpdateTheme
    bc2.CopyPixelsFromBitmap(Root.Snapshot)
    Root.AddView(ImageViewForAnimation, 0, 0, Root.Width, Root.Height)
    bc1.SetBitmapToImageView(bc1.Bitmap, ImageViewForAnimation)
    Dim brush As BCBrush = bc1.CreateBrushFromBitmapCreator(bc2)
    brush.BlendBorders = False
    If CurrentThemeIsLight Then UpdateTitle
    For y = 0 To bc1.mHeight Step 30dip
        Dim yy As Int = IIf(CurrentThemeIsLight, y, bc1.mHeight - y)
        Dim r As B4XRect
        r.Initialize(0, yy, bc1.mWidth, yy + 30dip)
        Dim task As DrawTask = bc1.AsyncDrawRect(r, brush, True, 0)
        bc1.DrawBitmapCreatorsAsync(Me, "BC", Array(task))
        Wait For BC_BitmapReady (bmp As B4XBitmap)
        If xui.IsB4J Then bmp = bc1.Bitmap
        bc1.SetBitmapToImageView(bc1.Bitmap, ImageViewForAnimation)
        Sleep(10)
    Next
    ImageViewForAnimation.As(B4XView).RemoveViewFromParent
    If CurrentThemeIsLight = False Then UpdateTitle
    Return True
End Sub
 
As I understand, we need to have two or more images of the themes to show in animation.
Now how can we make different images for different phone sizes before hand ?

Can we create the images in the phone itself on first run, say.
 
The "core" of this code is:
Code: Copy 
bc1.CopyPixelsFromBitmap(Root.Snapshot)
    UpdateTheme
    bc2.CopyPixelsFromBitmap(Root.Snapshot)
    Root.AddView(ImageViewForAnimation, 0, 0, Root.Width, Root.Height)
    bc1.SetBitmapToImageView(bc1.Bitmap, ImageViewForAnimation)
It takes a snapshot of the old layout, updates the layout, takes another snapshot and shows the old layout with the image view. The new layout will not be visible at all as the message queue needs to be processed for it to be drawn on the screen.

The next step is to use BitmapCreator (async) drawing methods to draw the new layout over the old one. When it is done, the image view is removed.
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article Article
B4A Library 🚀 [B4X][B4A] B4XDaisyAnimation: Bring Your UI to Life with Hardware-Accelerated Animations & 30 Easing Curves!
Replies
0
Views
1K
Mashiane
Mashiane
Mashiane
  • Article Article
B4A Library [B4X][B4A] B4XDaisyFilter - Beautiful, Animated & Customizable Filter Buttons!
Replies
0
Views
1K
Mashiane
Mashiane
JGParamo
  • Article Article
Share My Creation [B4X] B4XThreePages - Based App UI (Basic, Shaped, Modern, Themed, Borderless or Transparent Style on the Fly)
Replies
9
Views
8K
JGParamo
JGParamo
Erel
  • Locked
  • Article Article
B4A Library [B4X] XUI Views - Cross platform views and dialogs
4 5 6
Replies
102
Views
259K
Erel
Erel
Erel
  • Article Article
B4J Code Snippet [B4X] [BitmapCreator] Layout implode animation
Replies
9
Views
10K
Star-Dust
Star-Dust
Back
Top