New effects for Views

[Star-Dust]

A few months ago looking for some new ideas for UI, I crossed this image on a site and saved it.

I thought it would be useful if you could set a similar background in XUI views without major problems, since with BitmapCreator you can get many effects.
Maybe a class that would facilitate everything, make it quick to develop but also improve the user experience. (UX +)

Today I started working on it, since I had some time and I was able to do this.

I have created a new XUI class that allows you to set the background to any view (they are not panel or imageview) with b4J, B4i, B4A. Still working on it to add more effects.

Code example

MainForm = Form1
    MainForm.RootPane.LoadLayout("Layout1")
    MainForm.Show
  
Dim G1 As ColorGradient
G1.Initialize
G1.GradientToView(Pane1,G1.PatternColor(0),"BL_TR",xui.Color_Black,0dip,20dip)
G1.GradientToView(Pane2,G1.PatternColor(1),"BL_TR",xui.Color_Black,0dip,20dip)
G1.GradientToView(Pane3,G1.PatternColor(4),"BL_TR",xui.Color_Black,0dip,20dip)
G1.GradientToView(Label11,G1.PatternColor(5),"BL_TR",xui.Color_Black,0dip,20dip)
G1.GradientToView(Label12,Array As Int(0xFFFEAC00,0xFFF3FD00),"BL_TR",xui.Color_Black,0dip,20dip)

Sleep(3000)
G1.GradientToView(Pane1,G1.PatternColor(7),"RADIAL",xui.Color_Black,0dip,20dip)

Update: Besides "TL_BR" etc ... I also added "RADIAL" as fill

 

[TILogistic]

and add
shadow a view....

 

[Star-Dust]

and add
shadow a view....

yes, the most unpleasant part

 

[Star-Dust]

I'm not very good with shadow. This is the best I get

B4J - B4A​

 

[Sandman]

Judging by the look of your shadow, it seems like you're trying to create it by doing a fade. That's not really how shadows look. Instead try using a combination of black box, blur and transparency. (There's more to it, but if you get those things working you're 80% there.)

 

[Star-Dust]

thanks, i'll try

 

[Sandman]

I found a picture from some image editor that kind of show how to make the shadow. I realize it's not from the B4X world, but it shows the remaining 20%:

• Angle
• Size
• Distance
• Opacity
• Color

Strangely it doesn't show a value for softness (=how much blur to apply)

Let me know if you need a more help with the concepts, that I can do. I don't really have a grasp on how to make it a reality in B4X though.

 

[Star-Dust]

Judging by the look of your shadow, it seems like you're trying to create it by doing a fade. That's not really how shadows look. Instead try using a combination of black box, blur and transparency. (There's more to it, but if you get those things working you're 80% there.)

I have made many attempts with Blur and Pixelate, only on a single color background it did not give satisfactory results but they got worse

I found a picture from some image editor that kind of show how to make the shadow. I realize it's not from the B4X world, but it shows the remaining 20%:

• Angle
• Size
• Distance
• Opacity
• Color

Strangely it doesn't show a value for softness (=how much blur to apply)

View attachment 102151

Let me know if you need a more help with the concepts, that I can do. I don't really have a grasp on how to make it a reality in B4X though.

I should create a special function that creates a grayscale with a certain degree of opacity but not uniform (I don't know how to do it) with a displacement effect that is indicated here with the distance and angle value.
All this for a shadow? I put myself under a tree and shade me without much calculation.

Well we have to study a little. Maybe I get an enlightenment

 

[TILogistic]

Can be useful?

as orientation fade bordes:

[B4X] BitmapCreator Effects

BitmapCreatorEffects class includes all kinds of very simple to use image effects. The class is cross platform and compatible with B4J (v6.3+), B4A (v8.3+) and B4i (v5.0+). Example: 'Greyscale an image: Dim GreyImage As B4XBitmap = effects.GreyScale(ExistingBmp) 'Blur an image: Dim BlurImage As...

www.b4x.com

 

[TILogistic]

Come on! You can do it!!

[B4X] [XUI] Shadows

I have created a very simple little code to create the shadow to the images in the views, it can also be used to transform colors into shades of gray. (Attached source code) N.B.: Use B4XCreator B4A B4J

www.b4x.com

 

[Star-Dust]

Can be useful?

as orientation fade bordes:

[B4X] BitmapCreator Effects

BitmapCreatorEffects class includes all kinds of very simple to use image effects. The class is cross platform and compatible with B4J (v6.3+), B4A (v8.3+) and B4i (v5.0+). Example: 'Greyscale an image: Dim GreyImage As B4XBitmap = effects.GreyScale(ExistingBmp) 'Blur an image: Dim BlurImage As...

www.b4x.com

tried all effects yesterday, but with poor results

 

[Star-Dust]

Come on! You can do it!!

[B4X] [XUI] Shadows

I have created a very simple little code to create the shadow to the images in the views, it can also be used to transform colors into shades of gray. (Attached source code) N.B.: Use B4XCreator B4A B4J

www.b4x.com

This is similar to the one already made, simply turned to gray level

 

[Erel]

You can let the OS do the job for you.

In B4A it is done by setting the panel's elevation.
In B4J:

(can also be done programmatically if needed)

B4i: View.SetShadow.

 

[Sandman]

You can let the OS do the job for you.

Looking at your screenshot, it seems to have most things that would be required, but I'm missing size, opacity and amount of blur to make a generic shadow function. Not having them as values might make the shadows conform more to the OS standard, though. So perhaps it's a reasonable compromise.

 

[Star-Dust]

You can let the OS do the job for you.

In B4A it is done by setting the panel's elevation.
In B4J:

View attachment 102164

(can also be done programmatically if needed)

B4i: View.SetShadow.

Even if i get mad at the idea of generating a shadow from code i accepted your suggestion.
In the future I will study it again, I want to create it from code.

Here's how I did it:

Public Sub ShadowToView(Vw As B4XView, ShadowsWidth As Float)
    #If B4a
        Dim jo As JavaObject
        jo.InitializeStatic("android.os.Build.VERSION")
        If 21<=jo.GetField("SDK_INT") Then
            Dim jo As JavaObject = Vw
            jo.RunMethod("setElevation", Array As Object(ShadowsWidth))
        End If
    #else If B4J
        Dim Native As Node = Vw
        Dim m As Matcher = Regex.Matcher($"-fx-effect: innershadow:[^;]+;"$, Native.Style)
        If m.Find Then
            Native.Style=$"${Native.Style.SubString2(0, m.GetStart(0))} -fx-effect: innershadow( gaussian , rgba(100,100,100,0.3) , 5,0,$1.0{-ShadowsWidth},$1.0{-ShadowsWidth} );${Native.Style.SubString(m.GetEnd(0))}"$
        Else
            Native.Style = $"${Native.style} -fx-effect: innershadow( gaussian , rgba(100,100,100,0.3) , 5,0,$1.0{-ShadowsWidth},$1.0{-ShadowsWidth} );"$
        End If    
    #else if b4i
        Dim Native As View = Vw
        Native.SetShadow(xui.Color_LightGray,ShadowsWidth,ShadowsWidth,0.5,True)
    #End If
End Sub

B4A

B4J

B4i

Spoiler: Class SD_ColorGradient

SD_ColorGradient

Author: Star-Dust
Version: 0.01

• ColorGradient
  • Functions:
    • Generate (Width As Int, Height As Int, TintColor As Int, Fill As String, BorderColor As Int, BorderWidth As Float) As B4XBitmap
      es. ColorGradient.Generate(array as int(xui.Color_Black,xui.Color_White),ColorGradient.Fill_Radial)
      Fill = RADIAL, TR_BL , TL_BR, BL_TR , BR_TL
      TOP_BOTTOM, BOTTOM_TOP, RIGHT_LEFT, LEFT_RIGHT
    • GenerateRounded (Width As Int, Height As Int, TintColor As Int, Fill As String, BorderColor As Int, BorderWidth As Float, CornerRadius As Float) As B4XBitmap
      es. ColorGradient.GenerateRounded(array as int(xui.Color_Black,xui.Color_White),ColorGradient.Fill_Radial,10Dip)
      Fill = RADIAL, TR_BL , TL_BR, BL_TR , BR_TL
      TOP_BOTTOM, BOTTOM_TOP, RIGHT_LEFT, LEFT_RIGHT
    • GradientToView (Vw As B4XView, TintColor As Int, Fill As String, BorderColor As Int, BorderWidth As Float, CornerRadius As Float)
      es ColorGradient.Initialize2(MyImageView,Array As Int(0xFF9F26E7,0xFFD287DA),"radial",xui.Color_Black,0dip,20dip)
    • Initialize
      Initializes the object. You can add parameters to this method if needed.
    • PatternColor (PatternNumber As Int) As Int()
      PatternNumber (0..20)
    • ShadowToView (Vw As B4XView, ShadowsWidth As Float, CornerRadius As Float)

 

[Erel]

- (There is really no reason to consider Android 4 devices. They are no longer relevant)
- Better to use CSSUtils.SetStyleProperty.

 

[techknight]

May I suggest dark mode? or some tweaks? Because this is completely unreadable to my old eyes:

 

[Star-Dust]

May I suggest dark mode? or some tweaks? Because this is completely unreadable to my old eyes:

View attachment 102367

sure, this is just an experiment to prove the effects. But the colors can be changed