iOS 15 tab bar transparent after scrolling to the bottom

Question

How to fix iOS 15 tab bar transparent after scrolling to the bottom:

score 18 · Answer 1 · answered Sep 22 '21 at 15:04

In iOS 15, UIKit has extended the usage of the scrollEdgeAppearance, which by default produces a transparent background.

Since I changed the tab bar color globally in my app, prior to iOS 15, I have added the following code to my AppDelegate:

UITabBar.appearance().barTintColor = "YOUR UITABBAR COLOR"
UITabBar.appearance().tintColor = "YOUR ICONS COLOR"
UITabBar.appearance().isTranslucent = true

To restore the old look, I had adopt the new UITBar appearance APIs, UITabBarAppearance. I changed my code to:

    UITabBar.appearance().barTintColor = "YOUR UITABBAR COLOR"
    UITabBar.appearance().tintColor = "YOUR ICONS COLOR"
    UITabBar.appearance().isTranslucent = true

    if #available(iOS 15.0, *) {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = "YOUR UITABBAR COLOR"
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = UITabBar.appearance().standardAppearance
    }

As a result, I get the original color of my UITabBar

THANK YOU SO MUCH! this helped! I was getting a transparent tab bar without this fix. — Artur Marchetto, Oct 06 '21 at 13:11

score 10 · Accepted Answer · answered Jun 09 '21 at 07:49

With iOS 15, Apple adds the scrollEdgeAppearance property for configuring the appearance of the tab bar while edge scrolling.

https://developer.apple.com/documentation/uikit/uitabbar/3750912-scrolledgeappearance?changes=latest_minor

To fix the transparent tab bar, you should create a custom scroll edge appearance and set it to the tab bar.

if #available(iOS 15.0, *) {
   let appearance = UITabBarAppearance()
   appearance.backgroundEffect = UIBlurEffect(style: .light)
   tabBar.scrollEdgeAppearance = appearance
}

Result:

score 5 · Answer 3 · answered Sep 20 '21 at 16:03

5

init() {
    if #available(iOS 15, *) {
        let tabBarAppearance: UITabBarAppearance = UITabBarAppearance()
           tabBarAppearance.configureWithOpaqueBackground()
            UITabBar.appearance().standardAppearance = tabBarAppearance
            UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
    }
}

answered Sep 20 '21 at 16:03

sandorb

479
1
7
17

2

This answer is useful as it stands. – Peter Smith Sep 21 '21 at 10:22

score 1 · Answer 4 · answered Dec 31 '22 at 07:31

1

As explained by others, you have to enable and setup scrollEdgeAppearance property.

Here is how to do it on storyboard:

it will add an entire section of scroll edge appearance properties:

answered Dec 31 '22 at 07:31

Shaharyar

12,254
4
46
66

iOS 15 tab bar transparent after scrolling to the bottom

4 Answers4

Linked