Android 기반의 디자인 가이드 작업 시 기본적인 이해를 위해 제작한 자료입니다. 잘못된 부분이나 표현, 개인적인 견해 등이 포함되있을 수 있으니 기초 참고용으로 사용하세요.

1. Android XML / View
Guideline
2016.08.01
HANSOL
solcratez@gmail.com

2. Contents
1. XML Editor
2. Display
3. View
4. Additional Guide
5. Process
6. Design Standard
solcratez@gmail.com

3. 1. XML(Extensive Markup Language) Editor
solcratez@gmail.com

4. 2.1 Display : Screen Resolution / Aspect Ratio
StatusBar 75px
TitleBar 150px
SoftKey 150px
Screen Resolution 1080*1920px
Aspect Ratio ≒ 1.7777
solcratez@gmail.com

5. 2.2 Examples : StatusBar & Aspect Ratio
solcratez@gmail.com

6. 3.1 View
solcratez@gmail.com

7. 3.2 View : Properties
solcratez@gmail.com

8. 3.3 View : LinearLayout
solcratez@gmail.com

9. 3.4 View : FrameLayout
solcratez@gmail.com

10. 3.5 View : RelativeLayout
<MOVE : Best Friend #1><DEFAULT> <REMOVE: Best Friend #1>
solcratez@gmail.com

11. 3.6 View : TextView (1)
Criteria
400px
403px
350px
solcratez@gmail.com

12. 3.7 View : TextView (2)
solcratez@gmail.com

13. 3.8 View : EditText
solcratez@gmail.com

14. 3.9 View : ImageView
solcratez@gmail.com

15. 3.10 View : SeekBar
solcratez@gmail.com

16. 3.11 View : View/Layout Overlay, Hierarchy
solcratez@gmail.com

17. 4.1 Guide : Color Code
99% FC 74% BD 49% 7D 24% 3D
98% FA 73% BA 48% 7A 23% 3B
97% F7 72% B8 47% 78 22% 38
96% F5 71% B5 46% 75 21% 36
95% F2 70% B3 45% 73 20% 33
94% F0 69% B0 44% 70 19% 30
93% ED 68% AD 43% 6E 18% 2E
92% EB 67% AB 42% 6B 17% 2B
91% E8 66% A8 41% 69 16% 29
90% E6 65% A6 40% 66 15% 26
89% E3 64% A3 39% 63 14% 24
88% E0 63% A1 38% 61 13% 21
87% DE 62% 9E 37% 5E 12% 1F
86% DB 61% 9C 36% 5C 11% 1C
85% D9 60% 99 35% 59 10% 1A
84% D6 59% 96 34% 57 9% 17
83% D4 58% 94 33% 54 8% 14
82% D1 57% 91 32% 52 7% 12
81% CF 56% 8F 31% 4F 6% 0F
80% CC 55% 8C 30% 4D 5% 0D
79% C9 54% 8A 29% 4A 4% 0A
78% C7 53% 87 28% 47 3% 8
77% C4 52% 85 27% 45 2% 5
76% C2 51% 82 26% 42 1% 3
75% BF 50% 80 25% 40 0% 0
Opacity
Default Color Code : #000000
Opacity Color Code : #??000000
99% : #FC000000
50% : #80000000
75% : #BF000000
00% : #00000000
25% : #40000000
Opacity Code Table
solcratez@gmail.com

18. 4.2 Guide : Icon Size
XXXHDPI
192px
XXHDPI
144px
XHDPI
96px
HDPI
72px
MDPI
48px
solcratez@gmail.com

19. 4.3 Guide : Source File Name
solcratez@gmail.com

20. 4.4 Guide : Example (1) - View Size
solcratez@gmail.com

21. 4.5 Guide : Example (2) - Touch Area
btn_nxt.png
btn_nxt.png
btn_nxt.png
50px
solcratez@gmail.com

22. 4.6 Guide : Example (3) - ImageView
play_00.png play_01.png play_02.png play.png
bn_stress_off.png bn_stress_on.png
bn_sleep_off.png bn_sleep_on.png
solcratez@gmail.com

23. 4.7 Guide : Example (4) - Resolution / Modularization
solcratez@gmail.com

24. 4.7 Guide : Example (5) - Resolution / Modularization
solcratez@gmail.com

25. TextView
TextView
FrameLayout
Background = #f5f5f5
4.8 Guide : Example (6) - Resolution / Modularization
solcratez@gmail.com

26. 4.9 Guide : Example (7) - Resolution / Modularization
solcratez@gmail.com

27. 4.10 Guide : Example (8) - Properties / Structure icon_(0, 1, 3, 4) (ImageView)
Size = 150*150px
Margin = Left 50px
ll_0 (LinearLayout)
- Size = match_parent*wrap_content
categoryname_0 (TextView)
- Size = 680*150px
- Margin = Left 50px
next_0 (TextView)
- Size = 150px*150px
ll_1 (LinearLayout)
- Size = 1080*150px
categoryname_1 (TextView)
- Size = 360px*wrap_content
- Padding = Left 50px
- Layout_Gravity = center_vertical
next_1 (TextView)
- Size = wrap_content*wrap_content
- Margin = Left 420px
- Layout_gravity = center_vertical
ll_2 (LinearLayout)
- Size = match_parent*150px
icon_2 (ImageView)
- Size = 150*150px
- Margin = Left | Right 50px
categoryname_2 (TextView)
- Size = 310px*wrap_content
Layout_Gravity = center_vertical
next_2 (TextView)
- Size = 150*150px
- Margin = Left 370px
- Layout_gravity = center_vertical
fl_0 (FrameLayout)
- Size = match_parent*150px
categoryname_3 (TextView)
- Size = wrap_content*wrap_content
- Margin = Left 250px
- Layout_Gravity = center_vertical
next_3 (TextView)
- Size = wrap_content*wrap_content
- Layout_gravity = right | center_vertical
rl_0 (RelativeLayout)
- Size = match_parent*wrap_content
categoryname_4 (TextView)
- Size = wrap_content*wrap_content
- Margin = Left 50px
- Layout_Gravity = center_vertical
- Layout_ AlignComponent
= Left | Right icon_4
- Layout_CenterInParent = Vertical
next_4 (TextView)
- Size = wrap_content*wrap_content
- Layout_AlignParent = Right
- Layout_CenterInparent = Vertical
solcratez@gmail.com

28. 4.11 Guide : Example (9) - Properties / Structure
solcratez@gmail.com

29. 5.1 Process (1)
solcratez@gmail.com

30. 5.2 Process (2)
Dev.Design
1st : Screen Design & Dummy Design
2nd : GUI Design
solcratez@gmail.com

31. 5.3 Process (3) : Waterfall vs. Agile
Waterfall Agile
solcratez@gmail.com

32. 6.1 Simplify : UI/UX Design Standard
solcratez@gmail.com

33. 6.2 Simplify : UI/UX Design Standard
https://material.google.com/
solcratez@gmail.com

34. 0. Conclusion : Complexity
solcratez@gmail.com