[TIMOB-14911] iOS7: Add possibility to change color of backButton and window title

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Open
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	n/a
Reporter	Jick Steen
Assignee	Unknown
Created	2013-08-17T14:00:01.000+0000
Updated	2018-02-28T20:03:59.000+0000

Description

Hi, I know this is not available for iOS6 and it is somehow possible to change at least the color of the window title by specifying a custom label as titleControl. However, it is kinda painful (especially handling this across different platforms) and does not really look 100% native. My problem is that I have a red window barColor and it looks pretty fine on iOS6 with a white window title and red backButton. That is exactly how I want it because it is our corporate identity. On iOS7, it does not really look good as the window title is black and the backButton a light blue. QA Link: http://developer.appcelerator.com/question/156059/ios7-change-color-of-backbutton-and-window-title

Attachments

File	Date	Size
ab46.png	2013-08-20T17:12:36.000+0000	18357

Comments

Daniel Sefton 2013-08-19

Hi Jick, A screenshot would be useful so that we can clearly see your issue. (Edit -> Attachment) Thanks!

Jick Steen 2013-08-19

Uploaded screenshot here: [http://img822.imageshack.us/img822/2585/ab46.png] because I do not have the permission to edit. Example Code: Controller:

 
   $.index.open();
   
   setTimeout(function () {
   
       var win = Ti.UI.createWindow({title: 'Red Navbar', barColor: "#CD1628"});
       $.nav.open(win);
   
   }, 2000);

View:

 
   <Window id="index" barColor="#CD1628">
       <NavigationGroup id="nav">
           <Window title="Wait a sec" barColor="#CD1628">
           </Window>
       </NavigationGroup>
   </Window>

Jick Steen 2013-08-25

FYI: I've just noticed it is now possible to change the color of the backButton using navTintColor, see https://github.com/appcelerator/titanium_mobile/commit/b2c30df0282490c4fd340433c473d41f30c746e0 . It remains the possibility to change the color of the window title.
Craig Jones 2013-11-06

Is it correct that we are still stuck in not being able to change the color of the text on a windows title bar? For now, I've used a view/label on the titleControl property but as you mentioned, it's not ideal. I've then used tintColor and navTintColor to change the links on a navigation bar.

Beau Gibson 2014-08-18

You can change the color of the title by using titleAttributes : and navTintColor to change color of buttons (eg back)

   	var window = Ti.UI.createWindow({
   		barColor : "#000000",
   		title : "This is a title",
   		navTintColor : "#FFFFFF",
   		titleAttributes : {
   			color : "#FFFFFF",
   		},
   	});

This will give a black navBar with white text

JSON Source