Skip to main content
Samsung Developer Program

Develop Your Theme Project

The Parameter Panel contains the theme parameters for the selected theme group, subgroup, and cluster. After navigating to a theme group, subgroup, and cluster or to a linked parameter, theme parameters are displayed in the Parameter Panel. Other parameters may be displayed via the scroll bar. Some theme parameters are related to a key parameter setting and are displayed only after the key setting is made.

Theme Parameter Setting Control

Theme parameter settings are controlled in the following ways:

Fundamental Properties of Theme Parameter Settings

  • To register your theme, you must set some theme parameters:
    • Required parameters that are not set: TS_UG_SettingControl_1.png        
    • Required parameters that are set: TS_UG_SettingControl_2.png                
  • When available:
    • To set the image directory of your local machine, click TS_UG_SettingControl_3.png.
    • To use Common group parameter settings, click the key parameter's Linked to Common setting.
    • To download an image setting, right-click [Image box] and select Download image.
  • Text below an image or color box indicates: recommended image pixel size, color HEX numbers, and settings that are either conditionally applied or apply to a specified area.
    TS_UG_SettingControl_4.png TS_UG_SettingControl_5.png TS_UG_SettingControl_6.png TS_UG_SettingControl_7.png                                                  
  • In a reference theme image box:
    • A checkerboard area indicates a transparent area. 
    • The following indicate the recommended shape. If you set a new color, the shape remains. If you set a new image, the image can fill the entire box area.
      TS_UG_SettingControl_8.png TS_UG_SettingControl_9.png TS_UG_SettingControl_10.png TS_UG_SettingControl_11.png
                         
    • The following indicate which UI aspect, of several similar aspects, is entirely controlled by the setting (for example, you can change the UI calculator buttons 3 and +/- with selected images).
      TS_UG_SettingControl_12.png TS_UG_SettingControl_13.png

Current Theme Parameter Setting

The current setting of a theme parameter is indicated by a selected setting (e.g.,  radio button, slider, selected entry in a list) or by the left-side color or image box, which can be:

  • Not set

    TS_UG_SettingControl_14.png

    Color box

    TS_UG_SettingControl_15.png

    Image box

    TS_UG_SettingControl_16.png

    9-Patch image box

    TS_UG_SettingControl_17.png

    Icon

    TS_UG_SettingControl_18.png

    Conditional

    (with recommended and maximum pixel size)

       
    TS_UG_SettingControl_19.png      
  • Set by the reference theme
    • Set directly by the parameter's setting.

      TS_UG_SettingControl_20.png

      Color box

      TS_UG_SettingControl_21.png

      Image box

      TS_UG_SettingControl_22.png

      Icon

    • Set indirectly by a parent-linked parameter setting (indicated by a figure-8 link icon in the child)
      To display the parent-linked parameter, right-click the child and select Go to linked item.
      Note: After changing a child setting, the link and its link icon are removed.   
  • Set by your theme, either directly or indirectly by a linked parameter.

     TS_UG_SettingControl_25.png

    Color box

    TS_UG_SettingControl_26.png

    Image box

    TS_UG_SettingControl_27.png

    Icon

    TS_UG_SettingControl_28.png

    Child-linked parameter (with parent setting)

Change a Theme Parameter Setting

You can change a parameter setting by the following types of control:

  • Color Controls
    • To set a new color, click [right-side color box]
      (for details, see Color Picker).
      TS_UG_SettingControl_29.png
    • To set a recent or swatch color, right-click [right-side color box] and select [Recent color].
      Note: Recent colors are also swatch colors.
      TS_UG_SettingControl_30.png
    • For linked parameters:
      • To set a child-linked parameter (which removes the link), use recent colors or the Color Picker.
      • To set a parent-linked parameter (which maintains the link), right-click [Child setting], select Go to linked, and set the parent using recent colors or the Color Picker.
        TS_UG_SettingControl_31.png
  • Image Controls
    • Caution: Inserting an image that is smaller than the recommended size may cause distortion.
    • To set an image parameter, click [right-side image box] and import an appropriate image file.
    • To edit a 9-Patch image, click a filled-in, right-side image box, clicking TS_UG_SettingControl_32.png.
      For details, see 9-Patch Editor, below.
    • Animated images
      For some parameters, you can add a series of animated image files and configure how they are displayed. In the parameter: select Animated and click the image box. In the Animated Image Popup: add the image files (for the initial frame and following action frames) and set their configuration. For details, see Animated Image Popup, below.
  • Sound Controls
    • Click TS_UG_SettingControl_33.png to add a sound by selecting its file.
    • Click TS_UG_SettingControl_34.png to play the sound.
    • Click TS_UG_SettingControl_35.png to remove the sound file from Theme Editor.
  • Other Controls
    • Clicking a radio button:
      TS_UG_SettingControl_36.png
    • Clicking and dragging an icon or clicking and typing an entry (such as a slider knob):
      TS_UG_SettingControl_37.png
    • Clicking TS_UG_SettingControl_38.png to open the Font Effect popup (for details, see Font Effect).
    • Clicking and selecting a listed setting:
      TS_UG_SettingControl_39.png

Reset a Theme Parameter Setting

In the Parameter Panel, clicking TS_UG_SettingControl_40.png (Reset) for a parameter causes the parameter setting to go to its reference theme condition, which may or may not be set and may not be the previous setting. The setting prior to reset is lost. Recovery requires reentering the previous setting, reloading the previous image, or re-opening the previously saved theme project without saving the current project.

In the Color Picker popup or in an image upload popup, clicking Cancel stops the changing of the parameter.

Additional Color and Font Control

Color Picker

You can set the color and opacity of UI aspects such as backgrounds, lines, and pre-defined shapes and of Theme Editor UI preference settings such as theme cluster outlines via the Color Picker popup, for example, after clicking a color box parameter setting.

TS_UG_ColorFont_1.png

Color and Opacity Specification

  • Theme Editor supports color specification via:
    • Hex, RGB (Red Green Blue), or HSB (Hue Saturation Brightness) code entry
    • 1- or 2-dimensional color selection
  • Aspect transparency can range from invisible (0% opacity) to completely solid (100% opacity).

Swatch Selection

  • To keep a color as an easy-to-use swatch: 1) specify the color, and 2) click Add to swatches.
  • Swatches (or recent colors) are automatically saved for later use.

Font Effect

You can apply up to four font effects to certain theme parameters (such as Home screen / Weather widget / Clock font effect) by clicking the TS_UG_SettingControl_38.png icon.

TS_UG_ColorFont_2.png

Font Effect Settings

Drop shadow

 

Adds a shadow behind the text

 

Opacity

Percentage of transparency (0% - invisible to 100% solid)

 

Distance

Length (in pixels) the shadow extends from the right side of the text

 

Size

Thickness (in pixels) of the shadow

Stroke

 

Adds a sharp edge border around the text

 

Size

Thickness (in pixels) of the border

 

Color

Color of the border

Outer glow

 

Adds a blurred edge border around the text

 

Size

Thickness (in pixels) of the border

 

Color

Color of the border

Linear gradient

 

Adds 2-color text (black and a gradient color) with vertical shading

 

Gradient

1 or more sliders that control the vertical spacing of the gradient

  1. Click on empty space below the gradient bar to add a slider.
  2. Drag and drop to reposition a slider left/right.

 

Color

Gradient color

 

Location

Vertical location in the text (in percentage: 0% at the bottom, 100% at the top) where the selected slider is currently positioned
This setting provides accurate numerical control of each slider's position.

 

Image Control

Image display depends on the theme image files and the display dpi of the supported device or the local machine monitor. You can add image files in the following image resolution tabs to support the associated device displays:

WQHD

Wide Quad High Definition, 16:9 aspect ratio, progressive scan (QHD or 1440p)

WQHD (Note) Wide Quad HD, 16:9 aspect ratio, progressive scan (used by devices such as Samsung Galaxy Note)
FHD

Full HD, 16:9 aspect ratio, interlaced scan (1080i)

HD

High Definition, 16:9 aspect ratio, progressive scan (720p)

When an adding image files to one or more parameters:

  • An image file must be added in the WQHD tab. Adding image files in other tabs is then possible but is optional.
  • While you can add only some image files of each resolution to be supported, it is recommended that for all added images, you add image files of all resolutions to be supported.

Image files can be added in the WQHD tab and after that, to other tabs. Color, font, sound, and cover app settings are applied identically to all images in each resolution tab. However, the displayed image resolution and size on a supported device depends on the resolution of the image file added to the theme parameter. Additionally, resolution tab behavior depends on the image files added to theme parameters.

You can add image files such as background, 9-patch, widget, and animated image files by dragging and dropping an image to an image box or by clicking an image box, navigating to and selecting the file, and importing the file, for example, by clicking Open.

  • Red tab titles indicate one or more of the selected group/subgroup required parameters have not been set.
  • Black tab titles indicate that none of the selected group/subgroup parameters have been changed.
  • Blue tab title indicates the currently selected tab.
  • Gray-out tab titles indicate inactive tabs.

For source image files (left side):

  • To save a source image, mouse over the image box and right-click Download.
  • To save multiple source images of a parameter, mouse-over image box and right-click Download all.
  • To save image files (but not animated image files), click Menu > Export resource images.
 

Add Image Files to Theme Parameters

When adding image files to theme parameters:

  • Image resolution tab activation:
    • The WQHD tab is always active for every group/subgroup.
    • In order to add an image file in another resolution tab, the tab must be activated.
    • After adding at least one image file in the WQHD tab, the other available image tabs for that parameter's cluster are activated, and it is optional to add image files for optimal display in the associated device displays. FHD and HD tabs are available for all theme clusters. The WQHD tab is available for the theme clusters indicated in the table below.
  • Adding image files:
    • The maximum and recommended image size for each image parameter in each resolution tab is displayed below each image box (height x width in pixels, such as 96x96).
      Caution: Inserting an image that is smaller than the recommended size may cause distortion.
    • Add an image file by drag-and-drop to an image box or clicking the image box to import the file.
    • If a theme parameter has more than four images, you can add multiple image files at one time:
      TS_UG_ImageControl_1.png
      • Ensure the filenames of each image is the same as the source image.
      • Click Add All.
      • Navigate to and select (highlight) the image files.
      • Drag the selected files to where you want to add them.
  • To generate a WQHD APK theme project file and to support WQHD (Note) devices:
    • Image files optimized for 640 dpi display can be added in the WQHD tab to any theme parameter.
    • Image files optimized for 560 dpi display must be added to following parameters in the WQHD (Note) tab:

Parameter

Group / Subgroup / Cluster (and setting if needed)

Action bar background

Common / Action bar / Default

Background

Common / Tab / Default

Background

Phone / Dialer / Default

Tab background

Clock / Alarm / Default

  • Not adding image files:
    • When an image file is not added to a parameter in the FHD or HD tab, the WQHD tab image file for the parameter will be adjusted in size and used for the lower resolution.
    • When an image file is not added to a parameter in the WQHD (Note), the WQHD tab image file for the parameter will be adjusted in aspect ratio and used at the same resolution. 

After Adding Image Files

After adding image files:

  • In each Theme Editor resolution tab:
    • The reset button is active (black icon) for the resolution tab of the added image resolution.
      In other resolution tabs, the reset button is inactive (gray icon).
    • The pixel x pixel image size below the image box is the image size that will be displayed on devices with the same resolution.
    • To edit a 9-patch image, click TS_UG_SettingControl_32.png in the image resolution tab that the file was added in.
      TS_UG_ImageControl_2.png
      For details about editing 9-patch images, see Android™ documentation.
  • Image display:
    • In Theme Editor, the displayed image resolution is established by your local machine monitor.
    • On a supported device, the displayed image resolution is established by the device display.
    • In the To-Be Theme: images are displayed for the currently selected image tab, which are either:
      • At the same image size and aspect ratio of the image file added in the tab.
        or
      • At the image size or aspect ratio adjusted from the WQHD tab image file, when an image file is not added in the tab.
  • In the display of a supported device:
    • Displayed image size will be either:
      • The same size of the added image file, when the image file was added to the parameter in the resolution tab that is the same as the device display resolution.
        or
      • An adjusted image size that depends on the image file resolution added to the theme parameter in the WQHD tab:
        • WQHD displayed image size (100%)
        • WQHD (Note) displayed image size (100%)
        • FHD displayed image size (75%)
        • HD displayed image size (50%)
    • Displayed image aspect ratio will be either:
      • The same aspect ratio of the added image file, when the image file was added to the parameter in the resolution tab that is the same as the device display resolution.
        or
      • An adjusted image aspect ratio that depends on the image file resolution added to the theme parameter in the WQHD tab:
        • WQHD (Note) displayed at its aspect ratio.
        • FHD and HD aspect ratio will be the same as the WQHD image.
  • To save an added image file to your local machine, right-click the image and select Download image.
  • To save all image files added to the theme project, click Menu > Export all resource images.
  • Was this article helpful?