Android Question Transparent Panel but with Shadow

Mike1970

Well-Known Member
Licensed User
Longtime User
Hi everyone,
I'm experimenting some modern UI techniques... is it possibile to have a panel with transparent color and keeping the shadow?

At the moment i'm achieving the shadow using the "Elevation" but if i put Color to transpartent the shadow disappears.

Is there a better way to apply a shadow?


thanks in advance
 

TILogistic

Expert
Licensed User
Longtime User
Adjust the color of transparency (alpha).

sample;
B4X:
    Panel1.Color = 0x41FFFFFF 'color white with alfa
    SetShadow(Panel1, 8dip, 0xFF757575)

B4X Shadow
B4X:
Public Sub SetShadow (View As B4XView, Offset As Double, Color As Int)
    #if B4J
    Dim DropShadow As JavaObject
    'You might prefer to ignore panels as the shadow is different.
    'If View Is Pane Then Return
    DropShadow.InitializeNewInstance(IIf(View Is Pane, "javafx.scene.effect.InnerShadow", "javafx.scene.effect.DropShadow"), Null)
    DropShadow.RunMethod("setOffsetX", Array(Offset))
    DropShadow.RunMethod("setOffsetY", Array(Offset))
    DropShadow.RunMethod("setRadius", Array(Offset))
    Dim fx As JFX
    DropShadow.RunMethod("setColor", Array(fx.Colors.From32Bit(Color)))
    View.As(JavaObject).RunMethod("setEffect", Array(DropShadow))
    #Else If B4A
    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))
    #Else If B4i
    View.As(View).SetShadow(Color, Offset, Offset, 0.5, False)
    #End If
End Sub

1663532827525.png


1663533070485.png
 
Upvote 0

Mike1970

Well-Known Member
Licensed User
Longtime User
Adjust the color of transparency (alpha).

sample;
B4X:
    Panel1.Color = 0x41FFFFFF 'color white with alfa
    SetShadow(Panel1, 8dip, 0xFF757575)

B4X Shadow
B4X:
Public Sub SetShadow (View As B4XView, Offset As Double, Color As Int)
    #if B4J
    Dim DropShadow As JavaObject
    'You might prefer to ignore panels as the shadow is different.
    'If View Is Pane Then Return
    DropShadow.InitializeNewInstance(IIf(View Is Pane, "javafx.scene.effect.InnerShadow", "javafx.scene.effect.DropShadow"), Null)
    DropShadow.RunMethod("setOffsetX", Array(Offset))
    DropShadow.RunMethod("setOffsetY", Array(Offset))
    DropShadow.RunMethod("setRadius", Array(Offset))
    Dim fx As JFX
    DropShadow.RunMethod("setColor", Array(fx.Colors.From32Bit(Color)))
    View.As(JavaObject).RunMethod("setEffect", Array(DropShadow))
    #Else If B4A
    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))
    #Else If B4i
    View.As(View).SetShadow(Color, Offset, Offset, 0.5, False)
    #End If
End Sub

View attachment 133785

View attachment 133786
oh ok.. I will try doing it by code.

But i already tried by putting 0 where you have 65 (alpha) in the designer and the elevation was ignored, so no shadow.

Maybe doing it with "SetShadow" is different?
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
?
It only changes the alpha color of the panel background.
B4X:
Panel1.Color = 0x41FFFFFF 'color white with alfa
and SetShadow only in B4A changes the elevation of the view or panel
B4X:
    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))
 
Upvote 0

Mike1970

Well-Known Member
Licensed User
Longtime User
?
It only changes the alpha color of the panel background.change the background color of the panel
B4X:
Panel1.Color = 0x41FFFFFF 'color white with alfa
and SetShadow only in B4A changes the elevation of the view or panel
B4X:
    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))
Did you try to put alpha to 0?
 
Upvote 0

kimstudio

Active Member
Licensed User
Longtime User
Put alpha = 1 then you get an almost transparent pane with shadow, not perfect, if your requirement is not that strict.
 
Upvote 0

Mike1970

Well-Known Member
Licensed User
Longtime User
Adjust the color of transparency (alpha).

sample;
B4X:
    Panel1.Color = 0x41FFFFFF 'color white with alfa
    SetShadow(Panel1, 8dip, 0xFF757575)

B4X Shadow
B4X:
Public Sub SetShadow (View As B4XView, Offset As Double, Color As Int)
    #if B4J
    Dim DropShadow As JavaObject
    'You might prefer to ignore panels as the shadow is different.
    'If View Is Pane Then Return
    DropShadow.InitializeNewInstance(IIf(View Is Pane, "javafx.scene.effect.InnerShadow", "javafx.scene.effect.DropShadow"), Null)
    DropShadow.RunMethod("setOffsetX", Array(Offset))
    DropShadow.RunMethod("setOffsetY", Array(Offset))
    DropShadow.RunMethod("setRadius", Array(Offset))
    Dim fx As JFX
    DropShadow.RunMethod("setColor", Array(fx.Colors.From32Bit(Color)))
    View.As(JavaObject).RunMethod("setEffect", Array(DropShadow))
    #Else If B4A
    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))
    #Else If B4i
    View.As(View).SetShadow(Color, Offset, Offset, 0.5, False)
    #End If
End Sub

View attachment 133785

View attachment 133786


Code:
B4X:
    pnlIdentificati.Color = 0x41FFFFFF 'color white with alfa
    General.SetShadow(pnlIdentificati, 8dip, 0xFF757575)

Result (Ignore the border):
Screenshot_20220919_102254_biquadrolab.ecobi55[4548].jpg
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
Code:
B4X:
    pnlIdentificati.Color = 0x41FFFFFF 'color white with alfa
    General.SetShadow(pnlIdentificati, 8dip, 0xFF757575)

Result (Ignore the border):
View attachment 133803
test;
it is what you are looking for?
B4X:
    SetAlpha(Panel1, 0.3)
    SetShadow(Panel1, 8dip, 0xFF757575)
B4X:
'Level between 0 (transparent) to 1 (opaque)
Public Sub SetAlpha (View As B4XView, Level As Float)
    #if B4A
    Dim jo As JavaObject = View
    Dim alpha As Float = Level
    jo.RunMethod("setAlpha", Array(alpha))
    #Else If B4J
    Dim n As Node = View
    n.Alpha = Level
    #else if B4i
    Dim v As View = View
    v.Alpha = Level
    #End If
End Sub

Public Sub SetShadow (View As B4XView, Offset As Double, Color As Int)
    #if B4J
    Dim DropShadow As JavaObject
    'You might prefer to ignore panels as the shadow is different.
    'If View Is Pane Then Return
    DropShadow.InitializeNewInstance(IIf(View Is Pane, "javafx.scene.effect.InnerShadow", "javafx.scene.effect.DropShadow"), Null)
    DropShadow.RunMethod("setOffsetX", Array(Offset))
    DropShadow.RunMethod("setOffsetY", Array(Offset))
    DropShadow.RunMethod("setRadius", Array(Offset))
    Dim fx As JFX
    DropShadow.RunMethod("setColor", Array(fx.Colors.From32Bit(Color)))
    View.As(JavaObject).RunMethod("setEffect", Array(DropShadow))
    #Else If B4A
    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))
    #Else If B4i
    View.As(View).SetShadow(Color, Offset, Offset, 0.5, False)
    #End If
End Sub
1663577466825.png


Pd:
SetAlpha You can also find it in the UI Views library
B4X:
XUIViewsUtils.SetAlpha(Panel1, 0.3)
 
Last edited:
Upvote 0

kimstudio

Active Member
Licensed User
Longtime User
Found my post may lead to misunderstanding, I mean alpha=1 is actually the A in ARGB color format. Indeed in designer set alpha = 1 is actually A=255 in ARGB which is opaque.

As I see we can't input alpha as 1/255=0.004 in designer, better set it in code and it will be almost transparent but still with shadow.

Edit:

Just tried in B4J if set alpha too low then the shadow is also almost not visible, so if a dense shadow is needed then must use other tricks if exists...
Also we can input alpha as 0.004 in designer directly, it just shows 0.0 but seems it works internally.
 
Last edited:
Upvote 0
Top