Android Question Transparent Panel but with Shadow

[Mike1970]

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]

Adjust the color of transparency (alpha).

sample;

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

B4X Shadow

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

 

[Mike1970]

Adjust the color of transparency (alpha).

sample;

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

B4X Shadow

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?

 

[TILogistic]

?
It only changes the alpha color of the panel background.

Panel1.Color = 0x41FFFFFF 'color white with alfa

and SetShadow only in B4A changes the elevation of the view or panel

    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))

 

[Mike1970]

?
It only changes the alpha color of the panel background.change the background color of the panel

Panel1.Color = 0x41FFFFFF 'color white with alfa

and SetShadow only in B4A changes the elevation of the view or panel

    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))

Did you try to put alpha to 0?

 

[TILogistic]

¿Intentaste poner alfa a 0?

First you need to know the panel view properties in B4A.
The transparent background color will not show the elevation.

 

[TILogistic]

Note:

Create shadows and clip views | Views | Android Developers

Material design introduces elevation for UI elements. Elevation helps users understand the relative importance of each element and focus their attention to the task at hand. The elevation of a view, represented by the Z property, determines the visual…

developer.android.com

 

[kimstudio]

Put alpha = 1 then you get an almost transparent pane with shadow, not perfect, if your requirement is not that strict.

 

[Mike1970]

Adjust the color of transparency (alpha).

sample;

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

B4X Shadow

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:

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

Result (Ignore the border):

 

[TILogistic]

Code:

    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?

    SetAlpha(Panel1, 0.3)
    SetShadow(Panel1, 8dip, 0xFF757575)

'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

Pd:
SetAlpha You can also find it in the UI Views library

XUIViewsUtils.SetAlpha(Panel1, 0.3)

 

[kimstudio]

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.