B4J Question [ABMaterial] Row With Background Color and Rounded Border

Cableguy

Expert
Licensed User
Longtime User
Hi Alain...

Not sure if I should post this as a BUG or if it is just Something that has not been fully implemented...

I'm using a menu "card" by creating a 3 x 3 grid, and Inside each cell I create a and set a container to compose my card.
I set the container Border to be rounded using the BorderEx method… and the result is as expected, although I once wondered if the border was being applied to the page grid cell, instead of the Container row… but since it rendered as I expected it, I thought of it no more...


But then I decided to also set the background color… and the result is NOT what I was expecting...


Is there Something I can do to solve this? Is it a bug or a "not yet implemented" thing?
 
Sort by date Sort by votes

Cableguy

Expert
Licensed User
Longtime User
Yes, later today I will.
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
Yesterday I went browsing the feedback and saw a "to be implemented" setExtraStyle for both Row and Cell... That would solve it, no?
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
As promised...

all this is in ABMShared

B4X: 
Sub BuildMainMenuItem( page As ABMPage, id As String, BorderColor As String, BorderStyle As String,  MenuItemTitle As String, MenuItemDescription As String, FilePath As String, ThemeName As String) As ABMContainer
    LogError(id & " Theme is : " & ThemeName)
    Dim MainMenuItemContainer As ABMContainer
    MainMenuItemContainer.Initialize(page, id & "MainMenuItemContainer","")
    MainMenuItemContainer.SetFixedHeight("84px")
    MainMenuItemContainer.AddRowsM(1,False,0,0,"").AddCellsOSMP(1,0,0,0,3,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0,9,9,9,0,0,0,0,"")
    MainMenuItemContainer.BuildGrid ' IMPORTANT!
    MainMenuItemContainer.SetBorderEx(BorderColor, ABM.INTENSITY_LIGHTEN4, 2, BorderStyle, "100px")
    MainMenuItemContainer.Row(1).UseTheme(ThemeName & "Container")

    Dim MainMenuItemSubContainer As ABMContainer
    MainMenuItemSubContainer.Initialize(page, "MainMenuItemSubContainer","")
    MainMenuItemSubContainer.AddRowsM(1,False,0,0,"").AddCells12(2,"")
    MainMenuItemSubContainer.BuildGrid ' IMPORTANT!
    
    MainMenuItemContainer.Cell(1,2).AddComponent(MainMenuItemSubContainer)
    
    Dim MenuItemTitleLabel As ABMLabel
    MenuItemTitleLabel.Initialize(page, id & "Title", MenuItemTitle, ABM.SIZE_H5, False, "")
    MainMenuItemSubContainer.Cell(1,1).AddComponent(MenuItemTitleLabel)
    MenuItemTitleLabel.UseTheme( ThemeName & "Title")
    
    Dim MenuItemDescriptionLabel As ABMLabel
    MenuItemDescriptionLabel.Initialize(page, id & "Description", MenuItemDescription, ABM.SIZE_SMALL, False, "")
    MainMenuItemSubContainer.Cell(1,2).AddComponent(MenuItemDescriptionLabel)
    MenuItemDescriptionLabel.UseTheme( ThemeName & "Description")
    
    Dim MenuItemImage As ABMImage
    MenuItemImage.Initialize(page, id, FilePath, 1.0)
    MenuItemImage.SetFixedSize(80,80)
    MenuItemImage.IsCircular = True
    MainMenuItemContainer.Cell(1,1).AddComponent(MenuItemImage)
    
    Return MainMenuItemContainer
End Sub

The Theme...
B4X: 
    'MenuItem
    MyTheme.AddRowTheme("MenuItemContainer")
    MyTheme.Row("MenuItemContainer").VerticalAlign = True
    MyTheme.row("MenuItemContainer").BackColor = "red"
    MyTheme.Row("MenuItemContainer").Clickable = True

and it gets called like this...
B4X: 
page.Cell(1,1).AddComponent(ABMShared.BuildMainMenuItem(page, "MenuItem1", ABMShared.ThemeMainColor, ABM.BORDER_INSET,"This is the Title", "And this is the Title's description", "../images/defaul_profile_image.png","MenuItem"))
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
You are mixing two things: the row and the container.

The theme you created makes the row red, not the container.

So just make this as the theme:
B4X: 
' row make clickable
theme.AddRowTheme("MenuItemRow")
theme.Row("MenuItemRow").VerticalAlign = True
theme.Row("MenuItemRow").Clickable = True

' container make background red   
theme.AddContainerTheme("MenuItemContainer")
theme.Container("MenuItemContainer").BackColor = ABM.COLOR_RED

And in ABMShared:
B4X: 
Sub BuildMainMenuItem( page As ABMPage, id As String, BorderColor As String, BorderStyle As String,  MenuItemTitle As String, MenuItemDescription As String, FilePath As String, ThemeName As String) As ABMContainer
   LogError(id & " Theme is : " & ThemeName)
   Dim MainMenuItemContainer As ABMContainer
   MainMenuItemContainer.Initialize(page, id & "MainMenuItemContainer",ThemeName & "Container") '<--- the container theme to make it red
   MainMenuItemContainer.SetFixedHeight("84px")
   MainMenuItemContainer.AddRowsM(1,False,0,0,"").AddCellsOSMP(1,0,0,0,3,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0,9,9,9,0,0,0,0,"")
   MainMenuItemContainer.BuildGrid ' IMPORTANT!
   MainMenuItemContainer.SetBorderEx(BorderColor, ABM.INTENSITY_LIGHTEN4, 2, BorderStyle, "100px")

   MainMenuItemContainer.Row(1).UseTheme(ThemeName & "Row") '<--- the row theme to make it clickable
   ...

Just an extra thing you can do (not related to the background color):

To align the image (for compensation of the row margin, which is set to -.75rem by the Materialize CSS framework):
B4X: 
MenuItemImage.SetExtraStyle("margin-left: .75rem")

Result:


Alwaysbusy
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
I was sure I was missing something obvious!
Thanks Alain!
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
That is possible. You can solve it like this then:

in Buildtheme()
B4X: 
page.AddExtraCSSString($".imgmargin {margin-left: .75rem}"$)

In BuildMainMenuItem()
B4X: 
Dim MenuItemImage As ABMImage
MenuItemImage.Initialize(page, id, FilePath, 1.0)
MenuItemImage.SetFixedSize(80,80)
MenuItemImage.IsCircular = True
MenuItemImage.HTMLAddClass("imgmargin")
MainMenuItemContainer.Cell(1,1).AddComponent(MenuItemImage)

It is acutally probably a better solution, as a class is mostly better than directly setting the style.
 
Upvote 0

Harris

Expert
Licensed User
Longtime User
alwaysbusy said:
It is acutally probably a better solution, as a class is mostly better than directly setting the style.
Click to expand...

So many tips and tricks. It shall make for an interesting read...
 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Solved
B4J Question [B4X] B4XPages + B4XDrawer -- Setting the "Random Background" Color for the Entire Form [Solved]
2
Replies
28
Views
2K
JGParamo
  • Question
B4J Question [SOLVED][ABMaterial] How set only side borders for a container
Replies
1
Views
639
Cableguy
  • Question
B4J Question Do not understand the layout handling
Replies
1
Views
563
Erel
M
  • Question
Android Question [B4X] Cross platform chat layout - Change B4XFloatTextField proprieties
Replies
3
Views
4K
rraswisak
V
  • Question
B4J Question Drawing lines, circles, and rectangles as views in the internal designer
Replies
3
Views
3K
MarkusR
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…