Android Material Design Layout-Metrics and keylines

출처 : http://www.google.com/design/spec/layout/metrics-keylines.html

화면의 비율

Touch target size : 

최소크기는 48 x 48dp. 터치 대상의 간격은 8dp 이상

아이콘의 크기는 24dp, 아바타는 40dp

터치 대상은 겹치지 않아야 한다.

평균적으로 48dp의 물리적 길이는 대략 9mm. 손가락으로 터치하기 편한 크기는 7~10mm

터치 대상의 높이는 48dp, 버튼 높이는 36dp

Baseline grids : 기본

모든 compones는 8dp의 사각형 그리드를 기준으로 하고

아이콘은 4dp를 기준으로 한다.

줄간 간격은

글씨가 45sp 일 때, 48pt

글씨가 34sp 일 때, 40pt 처럼 아래 기준은 따른다.

List 일 때,

Item의 좌 우는 16dp의 간격을 준다. 모바일에서 가로 마진은 16dp

Item이 두 개로 이루어진 경우. 특히 icon + Text의 조합일 때, Text의 시작위치는 72dp에 해당한다.

- 방법1 : 바깥쪽 Layout에 좌우여백으로 16dp를 주고 나머지 배치

- 방법2 :  이미지를 72dp 에서 32dp짜리로 만들고 좌우 여백을 16으로, Text는 우측에 16으로

세로 간격

status bar(1) : 24dp

toolbar(2) : 56dp

subtitle(3) : 48dp

list item(4) : 72dp

List with subheading

- 좌우 여백(16dp) 및 Text의 왼쪽여백(72dp)은 List와 동일

세로 간격

status bar(1) : 24dp

toolbar(2) : 56dp

title and list items(3) : 72dp

subtitle(4) : 48dp

space between content areas(5) : 8dp 내용 사이의 간격

Detail view

List의 기본 좌우여백(8dp),  Text의 왼쪽 여백(72)는 동일

floating action button은 56dp

아이콘은 오른쪽에서 32dp떨어진곳에 floating action button과 같은 좌표에 위치시킨다.

 

세로 간격

status bar(1) : 24dp

toolbar(2) : 56dp

space between content areas(3) : 8dp 내용 사이의 간격

list items(4) : 72dp

Mixed content : 위에 정의한 내용 그대로

Navigation drawer

 아이콘이나 아바타, 문장 등 왼쪽정렬한다. 그 외의 아이콘들은 우측끝에 정렬

 폭은 전체 화면 폭 - 56dp

 리스트 아이템의 높이는 48dp