03. Margins and keylines

One UI defines margins and keylines by considering devices that have screens with rounded corners or edge displays. One UI recommends to allow at minimum 24dp margins on each side and keep placing components to display information within safe area if touch input is required.

Definition

Safe area is being provided in order to prevent undesired input from happening by holding a device. In particular, in a layout where the user is required to press sparsely placed buttons, such as a dialer, allow sufficient margins at the sides of the screen. For edge displays, place on-screen elements before the start of the curved surface to prevent the user’s finger from slipping off when touching an on-screen element. For screens with rounded corners, place on-screen elements before the start of the curve so that the on-screen elements are not obscured.

124dp