Skip to main content
Samsung Developer Program

Edge Screen Design

Design guidelines and specifications for Edge Single Plus panels, Edge Single, Edge Feeds, and Edge Immersive panels.

We recommend that you design your panels and feeds and their items using the layout principles described in this section. 

Device Display

If the user's device has two curved Edges, the user can use Edge settings to configure which side is to activate and display Edge Single and Immersive panels and Edge feeds, and to activate and start the display of Edge Single Plus panels, which take up the entire display screen. We recommend that you support both right and left Edges when designing your Edge panels and feeds.

Samsung S8, S8 Plus, S7, S6, and S6 Plus Edge devices support the display of Edge Single Plus panels and feeds in both of the following display modes:

Standard Display (640-dpi mode)

  • Screen resolution: 1440 x 2560
  • Density: 640 dpi
  • Usable resolution: sw360 dp - xxx hdpi

Condensed Display (560-dpi mode) 

  • Screen resolution: 1440 x 2560
  • Density: 560 dpi
  • Usable resolution: sw411 dp - xxx hdpi

Users can switch between standard and condensed display. We recommend that you support both display modes when designing your Edge panels and feeds.

Note: Standard and condensed display modes are referred to as 640 dpi and 560 dpi.

Edge Single Plus Panels

When implementing an Edge Single Plus panel:

  • Do not specify the title area.  Look Edge generates this area using your app name.
  • Specify the layout and content of the other 3 areas.
Edge Single Plus Screen Areas

Title Area

  • Displays an icon and information that are specified in Edge app source code.
  • Can launch an on-click event (for example, to display a contents settings view or an app).
  • Managed by the Edge framework.

Info Area

  • Text and/or graphic images (such as brand graphics) to explain the purpose and/or features of the panel.
  • Timestamp of last refresh of panel item content and click-event icon to initiate refresh.

Item Area

  • Text and graphics (images or icons) that can launch on-click events.
  • Content is specified by your app, can be fixed or streaming, and can be selected by the user via Edge panel management.

Navigation Area

  • Displays an icon link to Edge configuration settings, and a dot indicator of the selected and available panels.
  • Managed by the Edge framework and cannot be modified.

Title Area and Info Area Layout

The Title Area supports text content, graphic content, and combinations of text and graphic content. Your app can specify an on-click event when the user taps the title area, which results in a right-caret symbol ( > ) being displayed after the title area content. 

The Info Area supports text content, which can provide a description of the purpose features, setup instructions, and the basic operations of the panel. The Info Area does not provide interaction with users.

Note: The design specifications for the title area and info area are the same for 640-dpi and 560-dpi display modes.

Edge Single Plus Panel Title and Info Area Layouts

Item Area Layout

You can freely design the layout of the panel's item area in order to meet the needs of your item content; however, we recommend that you use the following types of layout.

Edge Single Plus panels support a variable-width item area of up to 550 pixels maximum or default width of 71 pixels wide on a 640-dpi display, 82 pixels on a 560-dpi display.

Edge Single Plus Item Area Layout Types

Icon Item Area Layout

This section presents the 640-dpi and 560-dpi specifications for an Item Area that features icons.

640-dpi Layout Specifications

Edge Single Plus Icon Item Area 640dpi Layout

560-dpi Layout Specifications

Edge Single Plus Icon Item Area 560dpi Layout  

Card Item Area Layout

This section presents the 640-dpi and 560-dpi specifications for an Item Area that features text and image cards.

Edge_Single Plus Card Item Area Layout

Full Item Area Layout

This section presents the 640-dpi and 560-dpi specifications for an Item Area that has content that spans the full width of the Item Area.

Edge Single Plus Full Item Area_Layout  

Item Area Font

This section presents the font family, size, alignment, color, and opacity specifications for both 640-dpi and 560-dpi display modes.

Edge Single Plus Item Area Font  

Item Area Detail Layout 

This section presents the 640-dpi and 560-dpi specifications for an Item Area that features icons. Details in this section can be used in one or more types of item areas.

Edge Single Plus Item Area Detail Layout  

Panel Preview Images

Your Edge Single Plus panel app must have panel preview graphic images. After a user downloads your Edge panel app, its preview image for the selected display mode is displayed in the Edge panel page of Edge Settings.

We recommend that you provide two image files to support 640-dpi and 560-dpi display modes.

Edge Single Plus Preview Panels

Preview image files must meet the following specifications:

  • Content: an example Item Area of your Edge panel
  • Image file format: PNG
  • Filename:Panel_preview.png
  • Image size:
    • For 640 dpi: 72 x 325
    • For 560 dpi: 82 x 371

Edge Feeds

When implementing an Edge feed, specify the content of the two areas that make up each Edge feed. 

Edge Feed Screen Areas

Title Area

  • Displays an icon that is specified in Edge app source code.
  • Can launch an on-click event (for example, to display a contents settings view or an associated app).
  • Managed by the Edge framework.
  • Graphic icon that can launch an on-click event .

Item Area

  • Text, graphics (images or icons) that can launch on-click events.
  • Content specified by your app, which can be fixed or moving (for example, when displaying streaming content).

Title Area and Item Area Layout

The Title Area supports graphic icon content. Your app can specify an on-click event via launchOnClick metadata when the user taps the title area. When content exceeds the display, it is ellipsized. After the user initiates item content refresh, the title icon temporarily changes to the refresh icon. For the Item Area, we recommend that you display contents and information that can be checked quickly. For both areas, we recommend a black background, because feeds are displayed only when the display screen is not active.

Edge Feed Layout Specifications  

Feed Preview Images

Your Edge feed app must have feed preview graphic images. After a user downloads your Edge feed app, its preview image for the selected display mode is displayed in the Edge feed page of Edge Settings.

We recommend that you provide two image files to support 640-dpi and 560-dpi display modes.

Edge Feed Preview Panels

Preview image files must meet the following specifications:

  • Content: an example Title Area and Item Area of your Edge feed
  • Image file format: PNG
  • Filename:Panel_preview.png
  • Image size:
    • For 640 dpi:  72 x 325
    • For 560 dpi:  82 x 371

 

  • Was this article helpful?