Navigation Bar – Xojo Programming Blog

4 Setting the Badge Color for Tabs on iOS

Javier Menendez — Wed, 20 Aug 2025 14:00:00 +0000

This is the final article in our series on customizing the appearance of the NavigationBar and TabBar. In this post, we’ll go a step further and show how to change the default color of the tab badge which is red by default.

As you might expect, we’ll need a few more Declares to accomplish this. Continue reading to learn how!

Since we’re building on the example project from the first blog post in this series, I strongly recommend completing that post if you haven’t already, then continuing with the second and third articles before proceeding here.

Select the “DeclaresForiOS” module and add a new method to it, using the following values for its signature in the Inspector Panel:

Method Name: TabBarBadgeColor
Parameters: Extends tab As iOSTabBar, Assigns value As ColorGroup
Scope: Global

And put the following snippet of code in the associated Code Editor:

Var tabController As Ptr = tab.ViewControllerHandle

If value = Nil Then Return

Declare Function GetTabBar Lib "UIKit" Selector "tabBar" (obj As Ptr) As Ptr
Var tabBar As Ptr = GetTabBar(tabController)

Var colorPtr As Ptr = ColorGroupToUIColor(value)

Declare Function BarAppearance Lib "UIKit" Selector "standardAppearance" (obj As Ptr) As Ptr
Declare Sub SetAppearance Lib "UIKit" Selector "setStandardAppearance:" (obj As Ptr, value As Ptr)

Var appearance As Ptr = BarAppearance(tabBar)

Declare Function StackedLayout Lib "UIKit" Selector "stackedLayoutAppearance" (obj As Ptr) As Ptr
Declare Function InlineLayout Lib "UIKit" Selector "compactInlineLayoutAppearance" (obj As Ptr) As Ptr
Declare Function NormalState Lib "UIKit" Selector "normal" (obj As Ptr) As Ptr

Var stackLayout As Ptr = StackedLayout(appearance)
Var inLayout As Ptr = InlineLayout(appearance)
Var normalState As Ptr = NormalState(stackLayout)
Var normalInlineState As Ptr = NormalState(inLayout)

Declare Sub SetBadgeColor Lib "UIKit" Selector "setBadgeBackgroundColor:" (obj As Ptr, value As Ptr)

SetBadgeColor(normalState, colorPtr)
SetBadgeColor(normalInlineState, colorPtr)

SetAppearance(tabBar, appearance)

If System.Version.MajorVersion >= 15 Then
  Declare Sub SetScrollEdgeAppearance Lib "UIKit" Selector "setScrollEdgeAppearance:" (obj As Ptr, value As Ptr)
  SetScrollEdgeAppearance(tabBar, appearance)
End If

Next, select the Screen1 item in the Navigator and add a new property to it using the following values in the Inspector Panel:

Name: MyTabBadgeColor
Type: ColorGroup
Scope: Protected

Setting the Badge Text Color

What’s next? I’m sure you guessed it! Now that we can customize the badge color, the default white text color on the badge may not always provide the best contrast.

Let’s add a new method to our “DeclaresForiOS” module with the following signature values in the Inspector Panel:

Name: TabBarBadgeTextColor
Parameters: Extends tab As iOSTabBar, Assigns value As ColorGroup
Scope: Global

And type (or paste) the following snippet of code in the associated Code Editor:

Var tabController As Ptr = tab.ViewControllerHandle

If value = Nil Then Return

Declare Function GetTabBar Lib "UIKit" Selector "tabBar" (obj As Ptr) As Ptr
Var tabBar As Ptr = GetTabBar(tabController)

Var colorPtr As Ptr = ColorGroupToUIColor(value)

Declare Function BarAppearance Lib "UIKit" Selector "standardAppearance" (obj As Ptr) As Ptr
Declare Sub SetAppearance Lib "UIKit" Selector "setStandardAppearance:" (obj As Ptr, value As Ptr)

Var appearance As Ptr = BarAppearance(tabBar)

Declare Function StackedLayout Lib "UIKit" Selector "stackedLayoutAppearance" (obj As Ptr) As Ptr
Declare Function InlineLayout Lib "UIKit" Selector "compactInlineLayoutAppearance" (obj As Ptr) As Ptr
Declare Function NormalState Lib "UIKit" Selector "normal" (obj As Ptr) As Ptr

Var stackLayout As Ptr = StackedLayout(appearance)
Var inLayout As Ptr = InlineLayout(appearance)

Var normalState As Ptr = NormalState(stackLayout)
Var normalInlineState As Ptr = NormalState(inLayout)

Declare Sub SetBadgeTextAttr Lib "UIKit" Selector "setBadgeTextAttributes:" (obj As Ptr, value As Ptr)

Declare Function NSClassFromString Lib "Foundation" (name As CFStringRef) As Ptr
Declare Function DictionaryWithObjectForKey Lib "UIKit" Selector "dictionaryWithObject:forKey:" (obj As Ptr, value As Ptr, key As CFStringRef) As Ptr

Var dict As Ptr = DictionaryWithObjectForKey( NSClassFromString("NSMutableDictionary") , colorPtr, "NSColor")

SetBadgeTextAttr(normalState, dict)
SetBadgeTextAttr(normalInlineState, dict)

SetAppearance(tabBar, appearance)

If System.Version.MajorVersion >= 15 Then
  Declare Sub SetScrollEdgeAppearance Lib "UIKit" Selector "setScrollEdgeAppearance:" (obj As Ptr, value As Ptr)
  SetScrollEdgeAppearance(tabBar, appearance)
End If

Next, select the Screen1 item in the Navigator and add a new property to it using the following values in the Inspector Panel:

Name: MyTabBadgeTextColor
Type: ColorGroup
Scope: Protected

Then, select the Screen1.Opening event handler and add these lines of code to it:

MyTabBadgeColor = New ColorGroup(Color.Green, Color.Blue)
MyTabBadgeTextColor = New ColorGroup(Color.Black, Color.Yellow)

Me.ParentTabBar.BadgeAt(0) = "33"
Me.ParentTabBar.BadgeAt(1) = "42"

Lastly, select the Screen1.AppearanceChanged event handler and add this line of code at the end:

Me.ParentTabBar.TabBarBadgeColor = MyTabBadgeColor
Me.ParentTabBar.TabBarBadgeTextColor = MyTabBadgeTextColor

Testing the App

Everything is set! Run the app on your iPhone or in the Simulator, and you’ll see each tab in the TabBar displaying its own badge with the custom background and text colors we configured in the Opening Event.

Download the example project from this link.

Happy Xojo Coding!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

3 Coloring the Tab Bar on iOS

Javier Menendez — Tue, 19 Aug 2025 15:37:37 +0000

In the first two blog posts, we saw how important it is to customize the NavigationBar when theming your iOS app. However, that’s only part of the equation, especially if your app also uses a TabBar. In that case, you’ll likely want to customize not only the background color of the TabBar, but also the text color of the selected tab and the color used for the unselected tabs.

Continue reading to learn how to do all of this thanks to the powerful flexibility of Declares!

Before we dive in, keep in mind that we’re building on the example project introduced in the first blog post of this series. If you haven’t read it yet, I encourage you to start there. Then, follow up with the second post to make sure you’re fully up to speed and ready to continue adding even more color customization to your iOS screens!

Background Color for the TabBar

In order to colorize the TabBar background, we need to add a new method to the “DeclaresForiOS” Module using the following values:

Method Name: TabBarBackgroundColor
Parameters: Extends tab As iOSTabBar, Assigns value As ColorGroup
Scope: Global

Add the following snippet of code in the associated Code Editor:

Var tabController As Ptr = tab.ViewControllerHandle

If value = Nil Then Return

Declare Function GetTabBar Lib "UIKit" Selector "tabBar" (obj As Ptr) As Ptr
Var tabBar As Ptr = GetTabBar(tabController)

Var colorPtr As Ptr = ColorGroupToUIColor(value)

Declare Function BarAppearance Lib "UIKit" Selector "standardAppearance" (obj As Ptr) As Ptr
Declare Sub ConfigureWithOpaqueBackground Lib "UIKit" Selector "configureWithOpaqueBackground" (obj As Ptr)
Declare Sub SetBackgroundColor Lib "UIKit" Selector "setBackgroundColor:" (obj As Ptr, value As Ptr)
Declare Sub SetAppearance Lib "UIKit" Selector "setStandardAppearance:" (obj As Ptr, value As Ptr)

Var appearance As Ptr = BarAppearance(tabBar)
SetBackgroundColor(appearance, colorPtr)

SetAppearance(tabBar, appearance)

If System.Version.MajorVersion >= 15 Then
  Declare Sub SetScrollEdgeAppearance Lib "UIKit" Selector "setScrollEdgeAppearance:" (obj As Ptr, value As Ptr)
  SetScrollEdgeAppearance(tabBar, appearance)
End If

Essentially, we’re setting the color by assigning it to the backgroundColor property of the appearance object associated with the TabBar.

Setting the Text Color

Now let’s add the code responsible for setting the text color of the selected tab in the TabBar. To do this, we just need to set the tintColor property. So, go ahead and add a new method to the “DeclaresForiOS” module with the following values:

Method Name: TabBarTextColor
Parameters: Extends tab As iOSTabBar, Assigns value As ColorGroup
Scope: Global

And put the following snippet of code in the associated Code Editor:

Var tabController As Ptr = tab.ViewControllerHandle

If value = Nil Then Return

Declare Function GetTabBar Lib "UIKit" Selector "tabBar" (obj As Ptr) As Ptr
Var tabBar As Ptr = GetTabBar(tabController)

Var colorPtr As Ptr = ColorGroupToUIColor(value)

Declare Sub SetTintColor Lib "UIKit" Selector "setTintColor:" (obj As Ptr, value As Ptr)

SetTintColor(tabBar, colorPtr)

Setting Unselected Tabs Text Color

To set the text color for unselected tabs, we’ll need to use a few additional Declares. This is because the color must be applied to the normal state of the stackedLayoutAppearance object from the TabBar’s appearance. Additionally, we need to set the same value for the compactInlineLayoutAppearance, which is used when the device is in landscape orientation.

Add a new method to the “DeclaresForiOS” Module using the following values for its signature:

Method Name: TabBarUnselectedTextColor
Parameters: Extends tab As iOSTabBar, Assigns value As ColorGroup
Scope: Global

And add the following snippet of code in the associated Code Editor:

Var tabController As Ptr = tab.ViewControllerHandle

If value = Nil Then Return

Declare Function GetTabBar Lib "UIKit" Selector "tabBar" (obj As Ptr) As Ptr
Var tabBar As Ptr = GetTabBar(tabController)

Var colorPtr As Ptr = ColorGroupToUIColor(value)

Declare Function BarAppearance Lib "UIKit" Selector "standardAppearance" (obj As Ptr) As Ptr
Declare Sub SetAppearance Lib "UIKit" Selector "setStandardAppearance:" (obj As Ptr, value As Ptr)

Declare Function StackedLayout Lib "UIKit" Selector "stackedLayoutAppearance" (obj As Ptr) As Ptr
Declare Function InlineLayout Lib "UIKit" Selector "compactInlineLayoutAppearance" (obj As Ptr) As Ptr
Declare Function NormalState Lib "UIKit" Selector "normal" (obj As Ptr) As Ptr

Var appearance As Ptr = BarAppearance(tabBar)
Var stackLayout As Ptr = StackedLayout(appearance)
Var inLayout As Ptr = InlineLayout(appearance)

Var normalState As Ptr = normalState(stackLayout)
Var normalInlineState As Ptr = NormalState(inLayout)

Declare Function NSClassFromString Lib "Foundation" (name As CFStringRef) As Ptr
Declare Function DictionaryWithObjectForKey Lib "UIKit" Selector "dictionaryWithObject:forKey:" (obj As Ptr, value As Ptr, key As CFStringRef) As Ptr

Var dict As Ptr = DictionaryWithObjectForKey( NSClassFromString("NSMutableDictionary") , colorPtr, "NSColor")

Declare Sub SetTextAttributes Lib "UIKit" Selector "setTitleTextAttributes:" (obj As Ptr, value As Ptr)

SetTextAttributes(normalState, dict)
SetTextAttributes(normalInlineState, dict)
SetAppearance(tabBar, appearance)

If System.Version.MajorVersion >= 15 Then
  Declare Sub SetScrollEdgeAppearance Lib "UIKit" Selector "setScrollEdgeAppearance:" (obj As Ptr, value As Ptr)
  SetScrollEdgeAppearance(tabBar, appearance)
End If

Testing the TabBar Color

Add a new screen to the project so that our example app includes at least two screens. You can do this by selecting Insert > Screen from the IDE toolbar.

To test the new methods, we need the app to use a TabBar. To enable that, select the iPhoneLayout item in the Navigator. Then, in the Inspector Panel, locate the Content label and choose Tabs from the associated popup menu. Finally, set Screen1 as the content for Tab 0 using the “Tab 0 Content” popup menu.

Next, with Screen1 still selected in the Navigator, click on the “Tab 1” label in the Layout Editor. Then, in the Inspector Panel, use the popup menu next to the “Tab 1 Content” label to select Screen2.

With Screen1 still selected in the Navigator, add a new property to it using the following values:

Name: MyTabBarUnselectedTextColor
Type: ColorGroup
Scope: Protected

Now select the Screen1.Opening event handler and add this line of code:

MyTabBarUnselectedTextColor = New ColorGroup(Color.White, Color.LightGray)

As the last step, select the Screen1.AppearanceChanged event handler and add this line of code:

Me.ParentTabBar.TabBarBackgroundColor = mNavigationBarColor
Me.ParentTabBar.TabBarTextColor = MyNavigationBarTextColor
Me.ParentTabBar.TabBarUnselectedTextColor = MyTabBarUnselectedTextColor

All set! Now it’s time to run the example project in the Simulator or on your iPhone. You’ll see that the TabBar background color matches the one set for the NavigationBar, and the selected tab text color is consistent as well. The unselected tab text appears white in Light Mode and light gray in Dark Mode, reflecting the ColorGroup settings.

As we’ve seen, Declares are a powerful way to tap into native iOS framework functions and routines. The most challenging part is often figuring out which ones to use since that requires digging into Apple’s developer documentation.

Download the example project from this link.

Happy Xojo coding!

2 Coloring the Navigation Bar Text on iOS

Javier Menendez — Mon, 18 Aug 2025 21:53:11 +0000

In a previous blog post, we covered how to set the color of the NavigationBar on a MobileScreen in iOS projects. However, if you’re customizing the Navigation Bar’s background, you’ll likely want control over the title text color and the color of any buttons added to it as well.

Continue reading to learn how to customize those elements too.

Just like in the previous blog post, we’ll need to use several Declares to access the necessary iOS framework functions and retrieve the underlying objects we want to modify.

If you haven’t followed the previous post yet, be sure to check it out first—we’ll be building on the same example project to add these new customizations.

Let’s add a new method to our previously created “DeclaresForiOS” Module using the following values:

Method Name: NavigationBarTextColor
Parameters: Extends screen As MobileScreen, Assigns value As ColorGroup
Scope: Global

And add the following snippet of code in the associated Code Editor:

If value = Nil Then Return

Var controller As Ptr = screen.ViewControllerHandle

Declare Function NavigationController Lib "UIKit" Selector "navigationController" (controller As Ptr) As Ptr
Declare Function NavigationBar Lib "UIKit" Selector "navigationBar" (controller As Ptr) As Ptr

Var nc As Ptr = NavigationController(controller)
Var nv As Ptr = NavigationBar(nc)

Var colPtr As Ptr
colPtr = ColorGroupToUIColor(value)

Declare Function DictionaryWithObjectForKey Lib "UIKit" Selector "dictionaryWithObject:forKey:" (obj As Ptr, value As Ptr, key As CFStringRef) As Ptr

// https://developer.apple.com/documentation/foundation/nsclassfromstring(_:)?language=objc
Declare Function NSClassFromString Lib "Foundation" (name As CFStringRef) As Ptr

Declare Function StandardAppearance Lib "UIKit" Selector "standardAppearance" (obj As Ptr) As Ptr
Declare Sub SetStandardAppearance Lib "UIKit" Selector "setStandardAppearance:" (obj As Ptr, value As Ptr)
Declare Sub SetScrollEdgeAppearance Lib "UIKit" Selector "setScrollEdgeAppearance:" (obj As Ptr, value As Ptr)

Declare Sub SetTitleTextAttributedText Lib "UIKit" Selector "setTitleTextAttributes:" (obj As Ptr, value As Ptr)
Declare Sub SetLargeTitleTextAttributedText Lib "UIKit" Selector "setLargeTitleTextAttributes:" (obj As Ptr, value As Ptr)

Declare Sub SetTintColor Lib "UIKit" Selector "setTintColor:" (obj As Ptr, value As Ptr)

// We need to create a NSDictionary with the attribute we want to set on text for the NavigationBar Appearance
Var dict As Ptr = DictionaryWithObjectForKey(NSClassFromString("NSMutableDictionary"), colPtr, "NSColor")

Var appear As Ptr = StandardAppearance(nv)

// Setting the new appearance settings both for the regular-sized title
// and the Large one
SetTitleTextAttributedText(appear, dict)
SetLargeTitleTextAttributedText(appear, dict)

// And we apply the modified appearance to the StandardAppearance
SetStandardAppearance(nv, appear)

// And to the scrollEdgeAppearance if the app is run on iOS 15+
If (System.Version.MajorVersion >= 15.0) Then
   SetScrollEdgeAppearance(nv, appear)
End If

// The TintColor is applied on the text of the added buttons to the NavigationBar
// So we need to use the same color for them!
SetTintColor(nv, colPtr)

And that’s all the code we need.

Colorizing!

Select the Screen1 item in the Navigator and add a new property to it using the following values:

Name: MyNavigationBarTextColor
Type: ColorGroup
Scope: Protected

Now select the Screen1.Opening event and add the following line of code:

MyNavigationBarTextColor = New ColorGroup(Color.Yellow, Color.Red)

Finally, select the Screen1.AppearanceChanged event handler and add the following line:

Me.NavigationBarTextColor = MyNavigationBarTextColor

Run the example project, and you’ll see that the title text remains correctly displayed, even when switching between Light and Dark modes.

Download the example project from this link.

1 Coloring Your iOS App Navigation Bar

Javier Menendez — Mon, 11 Aug 2025 18:08:31 +0000

This is the first of a series of 4 posts about customizing the Navigation and Tab Bars. One of the best ways to give your iOS app a custom look is by theming the Navigation Bar. While it’s possible to do this using a ContainerControl or a Rectangle with carefully applied constraints, there’s a better and more direct approach—using Declares.

Keep reading to learn how to style your Navigation Bar.

Declares in Xojo allow you to access functions and constants from compiled libraries and system frameworks such as those provided by iOS or third-party developers. They’re a powerful way to extend your app’s capabilities beyond what is available in the Xojo framework.

In this case, we’ll use Declares to tap into the native iOS APIs and customize the appearance of a MobileScreen‘s NavigationBar, specifically to set its background color.

Start by adding a new module to your existing or empty iOS project. I’ve named this DeclaresForiOS. Within this module, add a new method using the following values:

Method Name: NavigationBarColor
Parameters: Extends Screen As MobileScreen, Assigns Value As ColorGroup
Scope: Global

Add the following snippet of code in the Associated Code Editor:

// Getting the ViewController for the received Screen
Var controller As Ptr = Screen.ViewControllerHandle

// https://developer.apple.com/documentation/uikit/uiviewcontroller/navigationcontroller?language=objc
Declare Function NavigationController Lib "UIKit" Selector "navigationController" (controller As Ptr) As Ptr

// https://developer.apple.com/documentation/uikit/uinavigationcontroller/navigationbar?language=objc
Declare Function NavigationBar Lib "UIKit" Selector "navigationBar" (controller As Ptr) As Ptr

// Getting the NavigationBarController associated with the ViewController
Var nc As Ptr = NavigationController(controller)

// …and the NavigationBar itself from the NavigationBarController
Var nv As Ptr = NavigationBar(nc)

Var colPtr As Ptr
If value <> Nil Then
  colPtr = ColorGroupToUIColor(value)
End If

// https://developer.apple.com/documentation/uikit/uinavigationbar/standardappearance?language=objc
Declare Function StandardAppearance Lib "UIKit" Selector "standardAppearance" (obj As Ptr) As Ptr
Declare Sub SetStandardAppearance Lib "UIKit" Selector "setStandardAppearance:" (obj As Ptr, value As Ptr)

// https://developer.apple.com/documentation/uikit/uinavigationbar/scrolledgeappearance?language=objc
Declare Sub SetScrollEdgeAppearance Lib "UIKit" Selector "setScrollEdgeAppearance:" (obj As Ptr, value As Ptr)

// https://developer.apple.com/documentation/uikit/uibarappearance/backgroundcolor?language=objc
Declare Sub SetBackgroundColor Lib "UIKit" Selector "setBackgroundColor:" (obj As Ptr, value As Ptr)

// Getting the StandardAppearance object from the NavigationBar
Var appear As Ptr = StandardAppearance(nv)

// Setting the BackgroundColor to the StandardAppearance…
SetBackgroundColor(appear, colPtr)

// …and assigning the Standard Appearance again to the NavigationBar
SetStandardAppearance(nv, appear)

// If our app is running on iOS >= 15.0, then we need to set
// the same appearance to the scrollEdgeAppearance attribute on the NavigationBar
if (System.Version.MajorVersion >= 15.0) then
  SetScrollEdgeAppearance(nv, appear)
end if

As shown in the previous code, we’re calling the ColorGroupToUIColor method to convert a ColorGroup instance into a pointer to a valid UIColor. To support this, let’s add that helper method to our DeclaresForiOS module using the following values:

Method Name: ColorGroupToUIColor
Parameters: value As ColorGroup
Return Type: Ptr
Scope: Global

And type (or paste) the following snippet of code:

Var colorPtr As Ptr
Var c As Color

Select Case value.Mode
  
Case ColorGroup.Modes.Dual
  Var valueColors() As Color = value.Values
  If Color.IsDarkMode And valueColors.LastIndex > 0 Then
    c = valueColors(1)
  Else
    c = valueColors(0)
  End If
Case ColorGroup.Modes.Single
  Var valueColors() As Color = value.Values
  c = valueColors(0)
End Select

If colorPtr = Nil Then
  
  // https://developer.apple.com/documentation/foundation/nsclassfromstring(_:)?language=objc
  Declare Function NSClassFromString Lib "Foundation" (name As CFStringRef) As Ptr
  
  // https://developer.apple.com/documentation/uikit/uicolor/1621930-colorwithred
  Declare Function RGBA Lib "UIKit" selector "colorWithRed:green:blue:alpha:" (cls As Ptr, r As Double, g As Double, b As Double, a As Double) As Ptr
  
  colorPtr = RGBA(NSClassFromString("UIColor"), c.Red/255, c.Green/255, c.Blue/255, 1-(c.Alpha/255))
  
End If

return colorPtr

Let’s Color That!

And that is all the code we need! Now select the Screen1 item in the Navigator for the iOS project and add the following property to it:

Name: MyNavigationBarColor
Type: ColorGroup
Scope: Protected

With the Screen1 still selected in the Navigator, add the Opening event to it and add the following line of code:

MyNavigationBarColor = New ColorGroup( color.Red, color.Yellow )

As the last step, add the AppearanceChanged event to the Screen1 item; and add the following line of code to it:

me.NavigationBarColor = MyNavigationBarColor

Make sure the “Has Navigation Bar” attribute is enabled in the Inspector for Screen1, then run the project. If your Simulator or device is set to Light Mode, the Navigation Bar will appear red; if it’s in Dark Mode, it will appear yellow. You can switch between Light and Dark modes to see the Navigation Bar color transition between the two colors defined in your ColorGroup.

Download the example project from this link.

Happy coding!