Styles

 

Because the Smart Bulletin displays various pieces of information integrated into one place, it is necessary to make sure that providers have a similar style. To ensure consistency, Smart Bulletin providers are required to follow Smart Bulletin's style guide.

 

Compliance with the style guide is mandatory except in special circumstances.
It is recommended that you develop apps referring to the sample application in the SDK package as the sample application complies with the style guide.

 

In Smart Bulletin, each provider consists of the followings.

 

 

  • Provider body: content layouts, colors, text and images can be provided. See 3.2.1 Layouts, 3.2.2 Typography, 3.2.4 Colors and 3.2.5 Animations.
  • Title text and color: the title color and text can be specified. See 3.2.4 Colors.
  • Ongoing notification icon: a notification icon must be provided if the provider will issue ongoing notifications. See 3.2.3 Iconography.
  • Background color: the background color for the provider can be specified. See 3.2.4 Colors.

Layouts

This section describes the content layouts to be displayed in provider bodies. A provider body is the area left after excluding the header and margin from a whole provider area; the recommended height for a provider body is 175 dp.

 

 

Body Layouts

You can apply the following layouts in the content area.

 

  • Type A

Type A is used when there is only a title or a title and a small amount of body text. The initial screen of Sample Card Provider in sample application applies Type A.

 

Item

Left margin

Top margin

Size

Alignment

Main title

8dp

7dp

22dp

Left

Body text

8dp

11dp

14dp

Left

 

For detailed information about fonts, see Typography.

 

The following is an example of Type A.

 

  • Type B

Type B is used only when there is only body text. Sample Configuration Provider in sample application applies Type B.

 

Item

Left margin

Top margin

Size

Alignment

Body text

8dp

11dp

14dp

Left

 

For detailed information about fonts, see Typography.

 

The following is an example of Type B.

 

  • Type C

Type C is used when it mainly consists of controllers without text.

 

Freely structure Type C layouts with images and so on, but make sure it harmonizes with the other providers.

 

For detailed information about fonts, see Typography.

 

The following is an example of Type C.

 

The Smart Bulletin package provides samples of the three kinds of layout. You can find more detailed information from Sample Resources.

 

Card Layouts

As for providers that use cards, a divider must be added for a newly created card. If necessary, you can add a card removal button in the top right of a card. As for the divider and button layouts, see the following figure and table.

 

 

Item

Right margin

Top margin

Size

Alignment

Divider

none

None

348x1dp

N/A

X Icon

3dp

3dp

23.5x23.5dp

Right

Main text

Any

Any

Any

Left

Sub text

Any

Any

Any

Left

 

The Smart Bulletin package provides card layout and icon sample files. You can find more detailed information from Sample Resources.

 

For detailed information about fonts, see Typography.

 

Background Images

Create a background image that is the same size as the provider body area. For the color of a background image, choose the same color as the provider's background color, so that the body does not look separate from the other parts.

When a background image contains an icon or a photo, align the icon or the picture so that it is centered and position it 54 dp from the right, as shown below.

 

 

Item

Size

Alignment

Distance between the image center and the right border

Background Image

Parent width x 175dp

N/A

N/A

Items on background

Any

Center

54dp

 

The Smart Bulletin package provides background image sample files. You can find more detailed information from Sample Resources.

 

Sample Resources

Design sample files are provided to ease your layout design work when you develop a provider. Layout samples and icon samples are contained in the resources/layouts directory of the Smart Bulletin package

 

List of sample resources

File

Description

bg_smartbulletin_example.png

A sample of a background image that contains an icon

ic_smartbulletin_cancel_normal.png

A sample of a card removal icon in normal state

ic_smartbulletin_cancel_pressed.png

A sample of a card removal icon in pressed state

smartbulletin_provider_layout_sample.psd

Samples of the three kinds of layouts and card layouts

- type A: Type A layout

- type B: Type B layout

- type C: Type C layout

- list: layout that contains a card

Typography

This section describes the basic fonts of Smart Bulletin and formatting for each text type.

 

Fonts

You must use the Android fonts Roboto and Noto Sans for Smart Bulletin providers. Use Roboto for English and Noto Sans for Korean.

 

You can download the fonts at the following links:
- Roboto http://developer.android.com/design/style/typography.html
- Noto Sans https://www.google.co.kr/get/noto/

 

If you change the default font in your device, the new font must be applied to the Smart Bulletin providers as well. However, if you have only changed the font sizes, you do not need to change the font of providers.

 

Sizes

The text in a provider can be divided into two parts, the title and the body text. For more information about the recommended formatting for each text type, see the below figure.

 

 

Item

Font

Size

Alignment

Property

Title

Roboto Light

22dp

Left

android:includeFontPadding=”true”

Body text

Roboto Regular

14dp

Left

android:includeFontPadding=”true”

Card main text

Roboto Regular

Any

Left

N/A

Card sub text

Roboto Regular

Any

Left

N/A

 

Except for the text used for the title and body text, you can freely specify the size of any other text that is used for each provider.

 

Colors

The color of text must be the same as the color of the provider's title. For guidance on title colors, see Colors.

As for providers that contain a card, distinguish the card's text from the body by specifying the opacity of the text on the card. The text on a card can be divided into the main text and the sub-text. For more information about the formatting of each text see the below Table.

Item

Color

Opacity

Card Main text

Same as the title color

80%

Card Sub text

Same as the title color

50%

Iconography

This section describes the characteristics of the ongoing notification icons that are provided by providers.

The ongoing notification icons are circular images with a size of 17.5 dp x 17.5 dp. If you create an icon with a size of 21.5 dp x 21.5 dp as shown in the following figure, then Smart Bulletin displays the icon after cropping the image in a circular shape based on its center.

 

 

Make sure that the color of a notification icon is the same as the color of the provider's title. In addition, notification icons should be simple, single-color 2D icons, and you should not use patterns or photos.

 

The Smart Bulletin package provides ongoing notification icon samples. The sample files can be found in the resources/icons directory of the package.

 

File

Description

ic_smartbulletin_healthbadge_example.png

A sample of an ongoing notification for health

ic_smartbulletin_musicbadge_example.png

A sample of an ongoing notification for music

Colors

This section describes the background color and text color of a provider.

 

Background Colors

We recommend you use one of the colors shown in the following figure for the background color of a provider.

 

 

 

If it is necessary to use a unique color because of the app's nature, use a color with a brightness of 20 or higher and a saturation of 70 or lower.

 

 

 

The color of the provider's overall background, the color of the body's background and the color of the card's background must be the same.

 

Text Colors

The color of the title and the text on the body must harmonize with the background color. If the background color's brightness is less than 90, use white (FFFFFF). If the background color's brightness is 90 or higher, use a color with a brightness of 45 or lower.

 

Animations

When implementing an animation for a provider, be sure to follow the material design guideline.

For example, the animation that plays when a card is created from a provider is as shown in the following figure.

 

 

Dos and Don’ts

This section shows good and bad examples of following the Smart Bulletin style guide.

 

  • Dos

 

 

  • Don’ts

A provider's header and body should not be distinguished by the use of colors or a line. The following figure is an incorrect layout, where an outline has been created with a shadow effect applied to the provider body.

 

 

 

A provider's whole area and its body and card should use the same background color. The following figure is an example of color misapplication; on the left one, the body's color is different from the color of the whole area, and on the right one, the card's color is different from the color of the whole area.

 

Navigation