New effects for Views

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.


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

Expert
Licensed User
Longtime User
Last edited:

Star-Dust

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

B4J - B4A​
 

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

Expert
Licensed User
Longtime User
thanks, i'll try
 

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)



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

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

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

????
 
Last edited:

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

????
 

Star-Dust

Expert
Licensed User
Longtime User
tried all effects yesterday, but with poor results
 

Star-Dust

Expert
Licensed User
Longtime User
This is similar to the one already made, simply turned to gray level
 

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

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


B4J


B4i

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

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

 
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…