UI Design Guide
The Quick Circle framework consists of UI components: menu screen, lock screen, settings and apps.
The lock screen is the starting point of the UI flow and it shows the Quick Circle clock. When users presses the power key or Knock On the Quick Circle window of the closed cover, the lock screen is shown. Quick Circle UI provides various lock screens as default and users can select their preferred lock screen.
The menu screen provides access to Quick Circle apps and it appears when users slide the screen in any direction. The menu screen displays up to six Quick Circle apps.
Users can select apps from Settings and selected app icons will be displayed on the menu screen. Users can tap an app icon to launch the corresponding app without opening the cover.
Quick Circle apps have layouts to be shown in the circular window. Quick Circle apps typically use a back button, title area and functional buttons in circular shapes.
- Content Area: Main area that shows content
- Back Button: Button area to close or exit the app
- Title Area: Title area that explains the app or activity
The diameter value is given in pixels. Since Quick Circle feature is used in some models with different screen densities and physical display sizes, the pixel value of the diameter is stored natively in the device software.
The circular background is an outline for the cover view. The diameter of the circular background different depending on the device model. The typical diameter value is based on the LG G3 model.
Circle Diameter (pixel)
The title of the app or the page is placed at the top of the cover view.
The back button exits the app and takes users back to the menu screen. QCircle apps need to provide a software back button allow users to exit the app without opening the cover.
The back button is placed on the cover view. The back button can be designed in either basic or borderless styles. Please give users proper touch feedback to indicate that the button is pressed.
- Basic Style
- Borderless Style
QCircle app needs an app icon to be shown in the menu screen. Having a circular app icon is strongly recommended for achieving a unified look and feel with other QCircle apps. The format and the size of the icon are described as below.
- Format: PNG
- Size: 260 x 260 pixels
1. In the project, create a drawable folder under the res folder.
2. Create a circular icon following the guide above.
3. Place the circular icon in the res/drawable folder.