In thelatest release of SC for Android we introduced a new modern design for Android apps based on Google's Material Design. We've also added a new app style editor which allows you to customize the most important aspects of your app design.
In this short tutorial we'll help you decide how to apply this new design language to your app.
For most of the apps customizing your app design will be a simple 2-3 step process:
1) Decide whether your app should have a light or dark theme
2) Choose a primary color
3) Choose an accent color (optional).
Base theme.
For Android you can choose from 3 base themes:
* Light with dark bars - this is the most popular theme and suits most of the apps. It uses light content background with dark text and dark app bars background with light text. App bar colors are usually bright and vivid in this theme helping users to recognize your brand.
* Light - light backgrounds with dark text. Choose this theme if you want to put emphasis on your content.
* Dark - dark backgrounds with light text. Choose this theme if your app has overall a dark look. This will suit for example apps that are mostly used in dark environments: movie apps, music apps of certain genres, etc.
Primary color.
This is the most important color for your app. It allows differentiating from other apps and convey your brand. It is used for large color blocks (such as app bars) and other places where reminding of your brand and style is required.
Choose a slightly muted but vibrant color which is close to your main brand color. For example SeattleCloud previewer uses our signature green as primary color. Here are some examples of good primary colors from Google design spec.
Accent color (optional).
This color is used for prominent action items, buttons, switches, etc. It draws attention of the user to actionable items and important UI elements.
Many apps don't have an accent color and use primary color as their accent color, so this is optional. For example SeattleCloud previewer doesn't specify an accent color and uses the same color for both primary and accent.
If you decide to use the same color for both primary and accent, make sure they are exactly the same. This way we can apply some optimizations and fallbacks to make sure your app looks good and there are no cases when you have an accent color painted over primary color.
If you want a different accent color, you should choose a brighter variant of your primary color or another bright complimentary color which contrasts well with your primary color. Google provides some good examples of accent colors here.
____
That's basically it.
More information about Material Design is available here.
You can find some examples of app styles and more technical explanation of recent changes here.
As a bonus, here's a nice article on how to express your brand with material design.
