App Style    
This topic is assigned to Victor

Jul 21, 2014 11:33 PM

APP STYLE

In case you want to make an app memorable I suggest you to take advantage of App Style SeattleCloud provides with. It is an easy way to modify navigation bar or the accent colours to make your application for iOS or Android unique. To apply these changes please access the Application Dashboard -> App Style section.



You will notice that the App Style section for Android and iOS are different and have different ways pf customization.


App Style Elements

  • iOS


Select the color you want/need for each section and get an original and impressive theme inside your application.


To see these changes you can use either the simulator provided on the website or the previewer application. If you choose to review the application using the previewer you will have to sync each time you make a change. 


1. Base Theme (Light/Dark) - determines all base app color(such as window background, content text, default primary and accent color)



Base Theme


2. Primary Color - it is used for large color blocks and other places where reminding of your brand and style is required.

3. Accent Color - Used for prominent action items, buttons and switches etc.



Navigation Bar


4. Accent Color - Action buttons(icons and text) and back button color

5. Title Text Color - Should generally correspond to base theme(white or black)



Tab Bar


6. Background color - It is recommended to be the same as your primary color; however, you can vary it

7. Accent Color - Tab text and icon color



  • Android

The Android application can be also customized as an iOS application. You can also create a great felling of your application with such options available without the implementation of the custom codes.



1. Base Theme - Determine the base theme, it can be Light with Dark Bars, Light or Dark. 


Light

Light with Dark Bars

Dark


2. Primary Color - It is used for large blocks within the application

3. Accent Color - Used for prominent action items, buttons, switches etc.



App Bar


4. Accent Color - Accent color for widgets placed in the app bar.

5. Item Color - Action buttons, up-button, overflow button color.

6. Title Text Color - App name color



Tab Bar


7. Accent Color - Active tab indicator color

8. Item Color - Tab text and icon color



Below you may find some examples of colors combination. The app looks fresh without a big effort. You just have to find the right colors combination.






Jun 25, 2016 11:50 AM
How can we add a menu trigger to navigation - top bar?


Jun 27, 2016 07:00 AM
Hello Geoff,

it is not possible to add additional items in the top Navigation bar (Action Bar).


Victor,
SC team.


Nov 25, 2016 11:47 PM
,

    1