How can I change the toolbar color in Swift

Question

I'm working on an app and I'm not sure how to change the color of the bottom toolbar in swift. I would like to have it as a custom image to match my navigation bar. Does anyone have a code for that or just to change the color. Thank you

http://stackoverflow.com/questions/26008536/ios-8-navigationbar-bar-tint-and-title-text-color-swift — Adrian, Aug 11 '15 at 02:20

score 23 · Accepted Answer · answered Aug 11 '15 at 02:35

23

Change background color:

self.toolbar.barTintColor = UIColor.redColor()

Change background image:

self.toolbar.setBackgroundImage(UIImage(named: "BackgroundImage"), forToolbarPosition: .Bottom, barMetrics: .Default)

answered Aug 11 '15 at 02:35

Bannings

10,376
7
44
54

let toolBar = UIToolbar() toolBar.barStyle = UIBarStyle.default toolBar.isTranslucent = true toolBar.barTintColor = UIColor.red – MiTal Khandhar Jul 24 '17 at 09:52
May I ask what is different between `toolbar.barTintColor` and `toolbar.backgroundColor`. – Zhou Haibo Dec 10 '20 at 05:16

score 8 · Answer 2 · answered Oct 20 '16 at 17:00

NOTE: All my answers are in Swift 3

In order to change the background color of the toolbar do the following:

self.toolbar.isTranslucent = false
self.toolbar.barTintColor = UIColor.red

This code is similar to @Bannings answer, however his answer is missing the isTranslucent property, which must be set to false first. Otherwise, it won't work.

In order to change the background image do the same as @Bannings suggested:

self.toolbar.setBackgroundImage(UIImage(named: "BackgroundImage"), forToolbarPosition: .bottom, barMetrics: .default)

It should be stated here that the background image is visible due the fact that the isTranslucent property is set to true by default (assuming the background image is not opaque).

It always helps to read the Apple's description on the isTranslucent property for toolbars:

A Boolean value that indicates whether the toolbar is translucent (true) or not (false). The default value is true. If the toolbar has a custom background image, the default is true if any pixel of the image has an alpha value of less than 1.0, and false otherwise. If you set this property to true on a toolbar with an opaque custom background image, the toolbar will apply a system opacity less than 1.0 to the image. If you set this property to false on a toolbar with a translucent custom background image, the toolbar provides an opaque background for the image using black if the toolbar has black style, white if the toolbar has default, or the toolbar’s barTintColor if a custom value is defined.

score 4 · Answer 3 · edited Sep 18 '16 at 02:43

4

If the tool bar is anchored with navigation controller, go to IB to change the color.

1 . go to your navigation controller,

2 . show "document outline"

3 . select "Toolbar" under the navigation controller (usually, it is below Navigation bar)

one the right side, choose your prefered "Bar Tint" / "Translucent"

edited Sep 18 '16 at 02:43

Vinodh

5,262
4
38
68

answered Aug 11 '15 at 02:54

Justus Jianxing Zhang

400
2
11

score 2 · Answer 4 · answered Jul 24 '17 at 09:55

2

This also work on swift 3

let toolBar = UIToolbar()
toolBar.barStyle = UIBarStyle.default
toolBar.isTranslucent = true
toolBar.barTintColor = UIColor.red

Your UIBarStyle should be default.

answered Jul 24 '17 at 09:55

MiTal Khandhar

275
1
4
15

score -2 · Answer 5 · answered Jul 08 '17 at 18:53

-2

This also works on swift 3:

UINavigationBar.appearance().barTintColor = UIColor.red

answered Jul 08 '17 at 18:53

kelvincer

5,929
6
27
32

How can I change the toolbar color in Swift

5 Answers5