Android Question B4XPages menu items spacing

[RB Smissaert]

Experimenting with the B4XPages example Menu Badges:

[B4X] [B4XPages] Menu badges

This is a B4i + B4A example. It adds a dynamic badge to the menu icon. It also shows how to update menu items at runtime. Don't miss: 1. B4A - theme settings in manifest editor. 2. B4i - theme settings in main module. Both are not really needed for this example but are useful.

www.b4x.com

How can I get the menu items closer together?

This is my amended code sofar from that example:

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    
    Dim cs As CSBuilder
    
    cs.Initialize.Color(Colors.Black).Size(16).Append("Menu Icons").PopAll
    
    Root = Root1
    'B4XPages.SetTitle(Me, "Menu Icons")
    B4XPages.SetTitle(Me, cs)
    Root.LoadLayout("MainPage")
    
    'CartBitmap = xui.LoadBitmap(File.DirAssets, "cart.png")
    CartBitmap = TextToB4XBitmap(Chr(0xE854),28,Colors.Black,28,28,Typeface.MATERIALICONS,"CENTER")
        
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 28dip, 28dip)
    IconCanvas.Initialize(p)
    
    UpdateMenuItems
    
End Sub

Sub TextToB4XBitmap(strText As String, fFontSize As Float, iFontColour As Int, _
                     iWidth As Int, iHeight As Int, _
                     TF As Typeface, strAlignment As String) As B4XBitmap
 
    Dim bmp As Bitmap
    Dim cvs As Canvas
     
    bmp.InitializeMutable(iWidth * 100dip / 100, iHeight * 100dip / 100)
    cvs.Initialize2(bmp)
    Dim h As Double = cvs.MeasureStringHeight(strText, TF, fFontSize)
    cvs.DrawText(strText, bmp.Width / 2, bmp.Height / 2 + h / 2, TF, fFontSize, iFontColour, strAlignment)
     
    Return bmp.As(B4XBitmap)
 
End Sub

Private Sub UpdateMenuItems
    
    Dim bmp As B4XBitmap = CreateIconWithBadge(CartBitmap, BadgeNumber)
    #if B4A
    Dim menus As List = B4XPages.GetManager.GetPageInfoFromRoot(Root).Parent.MenuItems
    menus.Clear
    
    'add menu items
    Dim mi As B4AMenuItem = B4XPages.AddMenuItem(Me, "cart")
    mi.AddToBar = True
    mi.Bitmap = bmp
    
    Dim b4xbmp As B4XBitmap = TextToB4XBitmap(Chr(0xF142),24,Colors.Black,24,24,Typeface.FONTAWESOME,"CENTER")
    Dim mi As B4AMenuItem = B4XPages.AddMenuItem(Me, "hamburger")
    mi.AddToBar = True
    mi.Bitmap = b4xbmp
    
    Dim ctxt As JavaObject
    ctxt.InitializeContext
    ctxt.RunMethod("invalidateOptionsMenu", Null)
    
    #else if B4i
    Dim bb As BarButton
    bb.InitializeBitmap(Main.KeepOriginalColors(bmp), "cart")
    B4XPages.GetNativeParent(Me).TopRightButtons = Array(bb)
    #end if
    
End Sub
[CODE]

RBS

 

[Erel]

There is no such thing: B4XPages menu items. It is exactly the same menu as in a non-B4XPages project.

Post a screenshot.

 

[RB Smissaert]

There is no such thing: B4XPages menu items. It is exactly the same menu as in a non-B4XPages project.

Post a screenshot.

Attached the screenshot.

RBS

 

[RB Smissaert]

There is no such thing: B4XPages menu items. It is exactly the same menu as in a non-B4XPages project.

Post a screenshot.

This is how close together I can get the menu icons in my non B4XPages project that uses AppCompat.

RBS

 

[RB Smissaert]

There is no such thing: B4XPages menu items. It is exactly the same menu as in a non-B4XPages project.

Post a screenshot.

This is the project producing the screenshot.

RBS

 

[TILogistic]

change manifest:

'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: https://www.b4x.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="30"/>
<supports-screens android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
'End of default text.

SetApplicationAttribute(android:requestLegacyExternalStorage, true)

SetApplicationAttribute(android:theme, "@style/LightTheme")
CreateResource(values, colors.xml,
<resources>
    <color name="actionbar">#ff039be5</color>
    <color name="statusbar">#ff006db3</color>
    <color name="textColorPrimary">#ffffffff</color>
    <color name="navigationBar">#ff006db3</color>
</resources>
)
CreateResource(values-v20, theme.xml,
<resources>
    <style name="LightTheme" parent="@android:style/Theme.Material.Light">
         <item name="android:colorPrimary">@color/actionbar</item>
         <item name="android:colorPrimaryDark">@color/statusbar</item>
         <item name="android:textColorPrimary">@color/textColorPrimary</item>
         <item name="android:navigationBarColor">@color/navigationBar</item>
         <item name="android:actionBarSize">44dp</item>
         <item name="android:actionButtonStyle">@style/ActionButton</item>
    </style>
    <style name="ActionButton" parent="@android:style/Widget.ActionButton">
        <item name="android:drawablePadding">0dp</item>
        <item name="android:paddingStart">0dp</item>
        <item name="android:paddingEnd">0dp</item>
        <item name="android:minWidth">0dp</item>
   </style>

</resources>
)
CreateResource(values-v14, theme.xml,
<resources>
    <style name="LightTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/CustomActionBarStyle</item>
    </style>
    <style name="CustomActionBarStyle" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/actionbar</item>
    </style>
</resources>
)

 

[RB Smissaert]

change manifest:

'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: https://www.b4x.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="30"/>
<supports-screens android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
'End of default text.

SetApplicationAttribute(android:requestLegacyExternalStorage, true)

SetApplicationAttribute(android:theme, "@style/LightTheme")
CreateResource(values, colors.xml,
<resources>
    <color name="actionbar">#ff039be5</color>
    <color name="statusbar">#ff006db3</color>
    <color name="textColorPrimary">#ffffffff</color>
    <color name="navigationBar">#ff006db3</color>
</resources>
)
CreateResource(values-v20, theme.xml,
<resources>
    <style name="LightTheme" parent="@android:style/Theme.Material.Light">
         <item name="android:colorPrimary">@color/actionbar</item>
         <item name="android:colorPrimaryDark">@color/statusbar</item>
         <item name="android:textColorPrimary">@color/textColorPrimary</item>
         <item name="android:navigationBarColor">@color/navigationBar</item>
         <item name="android:actionBarSize">44dp</item>
         <item name="android:actionButtonStyle">@style/ActionButton</item>
    </style>
    <style name="ActionButton" parent="@android:style/Widget.ActionButton">
        <item name="android:drawablePadding">0dp</item>
        <item name="android:paddingStart">0dp</item>
        <item name="android:paddingEnd">0dp</item>
        <item name="android:minWidth">0dp</item>
   </style>

</resources>
)
CreateResource(values-v14, theme.xml,
<resources>
    <style name="LightTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/CustomActionBarStyle</item>
    </style>
    <style name="CustomActionBarStyle" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/actionbar</item>
    </style>
</resources>
)

View attachment 119172

Thanks, that does work indeed very nicely.

RBS

 

[TILogistic]

take a look at the TextToB4XBitmap routine.

B4X:

Dim bmp As B4XBitmap = SetFontToBitmap(Chr(0xE003), xui.CreateMaterialIcons(32), 32, xui.Color_Black)

Public Sub SetFontToBitmap (FontText As String, FontType As B4XFont , FontSize As Float, FontColor As Int) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 32dip, 32dip)
    Dim cvs1 As B4XCanvas
    cvs1.Initialize(p)
    Dim r As B4XRect = cvs1.MeasureText(FontText, xui.CreateFont2(FontType, FontSize))
    Dim BaseLine As Int = cvs1.TargetRect.CenterY - r.Height / 2 - r.Top
    cvs1.DrawText(FontText, cvs1.TargetRect.CenterX, BaseLine, xui.CreateFont2(FontType, FontSize), FontColor, "CENTER")
    cvs1.Invalidate
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    Return b
End Sub

 

[RB Smissaert]

take a look at the TextToB4XBitmap routine.

B4X:

Public Sub SetFontToBitmap (FontText As String, FontType As B4XFont , FontSize As Float, FontColor As Int) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 32dip, 32dip)
    Dim cvs1 As B4XCanvas
    cvs1.Initialize(p)
    Dim r As B4XRect = cvs1.MeasureText(FontText, xui.CreateFont2(FontType, FontSize))
    Dim BaseLine As Int = cvs1.TargetRect.CenterY - r.Height / 2 - r.Top
    cvs1.DrawText(FontText, cvs1.TargetRect.CenterX, BaseLine, xui.CreateFont2(FontType, FontSize), FontColor, "CENTER")
    cvs1.Invalidate
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    Return b
End Sub

At work now, so can't see my code but this looks very similar to the code I have in the posted project.
Is there any difference/improvement?

RBS