New effects for Views

Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
A few months ago looking for some new ideas for UI, I crossed this image on a site and saved it.
1.jpg


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.

1603887083602.png


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
B4X: 
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
 
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
I'm not very good with shadow. This is the best I get

B4J - B4A​
1603905407149.png
1603905519488.png
 
Sandman

Sandman

Expert
Licensed User
Longtime User
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

Star-Dust

Expert
Licensed User
Longtime User
thanks, i'll try
 
Sandman

Sandman

Expert
Licensed User
Longtime User
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)

1603914739417.png


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

Star-Dust

Expert
Licensed User
Longtime User
Sandman said:
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.)
Click to expand...
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

Sandman said:
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.
Click to expand...
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

TILogistic

Expert
Licensed User
Longtime User
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 www.b4x.com

????
 
Last edited:
TILogistic

TILogistic

Expert
Licensed User
Longtime User
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 www.b4x.com

????
 
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
oparra said:
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 www.b4x.com

????
Click to expand...
tried all effects yesterday, but with poor results
 
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
oparra said:
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 www.b4x.com

????
Click to expand...
This is similar to the one already made, simply turned to gray level
 
Sandman

Sandman

Expert
Licensed User
Longtime User
Erel said:
You can let the OS do the job for you.
Click to expand...
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

Star-Dust

Expert
Licensed User
Longtime User
Erel said:
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.
Click to expand...
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:

B4X: 
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
1603963462795.png



B4J
1603963601274.png



B4i
1603964687478.png


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)
 
Last edited:
techknight

techknight

Well-Known Member
Licensed User
Longtime User
May I suggest dark mode? or some tweaks? Because this is completely unreadable to my old eyes:

1604318222785.png
 
You must log in or register to reply here.
Top