Android Question Transparent Panel but with Shadow

Mike1970 · Sep 18, 2022

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 · Sep 18, 2022

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

Mike1970 · Sep 19, 2022

TILogistic said:

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?

TILogistic · Sep 19, 2022

?
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)))

Mike1970 · Sep 19, 2022

TILogistic said:
?
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?

TILogistic · Sep 19, 2022

Mike1970 said:
¿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 · Sep 19, 2022

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 · Sep 19, 2022

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

Mike1970 · Sep 19, 2022

TILogistic said:

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):

TILogistic · Sep 19, 2022

Mike1970 said:
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

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

B4X:

XUIViewsUtils.SetAlpha(Panel1, 0.3)

kimstudio · Sep 19, 2022

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.

Android Question Transparent Panel but with Shadow

Mike1970

Well-Known Member

TILogistic

Expert

Mike1970

Well-Known Member

TILogistic

Expert

Mike1970

Well-Known Member

TILogistic

Expert

TILogistic

Expert

Create shadows and clip views | Views | Android Developers

kimstudio

Active Member

Mike1970

Well-Known Member

TILogistic

Expert

kimstudio

Active Member

Similar Threads

Android Question Transparent Panel but with Shadow

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Active Member

Well-Known Member

Expert

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency