Android 4.

0
&
Android design Android 4.0 Android2.3 app
Android 4.0 10

1. ( PATTERNS> Navigation)

4 3

Translated by CDC |

Android Design

action overflow

action overflow

Translated by CDC |

Android Design

2. ( PATTERNS> Action bar)

app
1 2 Spinner3 4

Spinner
action overflow

1 2 3
tabsaction overflow

Translated by CDC |

Android Design

3. ( PATTERNS> Multi-pane layouts)

iPad

4. ( PATTERNS> Selection)
Android4.0 Android2.3
4

Translated by CDC |

Android Design

Android4.0

Android2.3

Android4.0

Translated by CDC |

Android Design

5. ( PATTERNS> Navigation with Back and Up)

Translated by CDC |

Android Design

6. ( STYLE> Themes)
Holo Holo Holo + app
app
STYLE BUILDING BLOCKS

7. Widgets ( GET STARTED>UI UI Overview)

apps tabs widgets widget
widgets app widget

Translated by CDC |

Android Design

8. ( PATTERNS> Compatibility)
Android 4.0
Android2.3 apps

android4.0 action
overflow

Translated by CDC |

Android Design

android2.3 app
action overflow

android4.0 action overflow

9. Android ( PATTERNS> Android)

Android4.0 app Android Android app
5
1 android
2
3 tabs
4
5

Translated by CDC |

Android Design

Android tabs ios

10.

2 4.0
3 writing style wording

-----------------------------------------------------------------------------------------------------------------------------------
10

Translated by CDC |

Android Design

GET STARTED .........................................................................................................................13

................................................................................................................................13
....................................................................................................................................14
UI ........................................................................................................................................20
STYLE .................................................................................................................................23
................................................................................................................................23
....................................................................................................................................24
....................................................................................................................................25
................................................................................................................................26
............................................................................................................................................28
............................................................................................................................................30
............................................................................................................................................30
....................................................................................................................................35
PATTERNS ..................................................................................................................................36
Android 4.0.........................................................................................................................36
............................................................................................................................................37
....................................................................................................................................40
............................................................................................................................................48
........................................................................................................................................54
................................................................................................................................61
....................................................................................................................................64
............................................................................................................................................66
............................................................................................................................................68
........................................................................................................................................73
Android Android.................................................................................................................76
/ BUILDING BLOCKS .............................................................................................................79
Tabs ................................................................................................................................79
............................................................................................................................................80
....................................................................................................................................81
............................................................................................................................................83
Spinners...............................................................................................................84
............................................................................................................................................85
....................................................................................................................................86
............................................................................................................................................87
............................................................................................................................................88
....................................................................................................................................90
........................................................................................................................................91
........................................................................................................................................93
http://developer.android.com/design/index.html
12

Translated by CDC |

Android Design

GET STARTED
Android Design Android Apps

----------------------------------------------------------------------------------------------------------------Android 4.0 Android

Roboto

apps Android apps

1.
Android apps
App
app
2.
Android apps app
Android apps

13

Translated by CDC |

Android Design

3.
App Android apps
appAndroid app apps
app

-------------------------------------------------------------------------------------------------------------------- Android

1.

2.
app

3.

14

Translated by CDC |

Android Design

4.

1.

2.

15

Translated by CDC |

Android Design

3.

4.

16

Translated by CDC |

Android Design

5.
app

6.

17

Translated by CDC |

Android Design

1.
Android apps
app

2.
app

18

Translated by CDC |

Android Design

3.

4.

5.
app

19

Translated by CDC |

Android Design

UI -----------------------------------------------------------------------------------------------------------------------Android UI Home

app Android
app
Android
Home app

1. Home
Home app home

home
app

app
2. app
app
app Home
3.
app

app

20

Translated by CDC |

Android Design

UI ---------------------------------------------------------------------------------------------------------------------------UI UI
app app UI

1.

2.
Android 4.0
Home Android2.3
3.

----------------------------------------------------------------------------------------------------------------------------

app

21

Translated by CDC |

Android Design

App UI---------------------------------------------------------------------------------------------------------------------------

Android app
1.
app app
2.
app
3.

4.

22

Translated by CDC |

Android Design

STYLE
apps

----------------------------------------------------------------------------------------------------------------Android
Android apps

23

Translated by CDC |

Android Design

app

MDPI

-------------------------------------------------------------------------------------------------------------------- Android app

app
Android app 3
* Holo
* Holo
* Holo +
app Android
app

24

Translated by CDC |

Android Design

--------------------------------------------------------------------------------------------------------------------
app

Android UI

25

Translated by CDC |

Android Design

home
Android UI

----------------------------------------------------------------------------------------------------------------DPIdots per inch

600DP 600dp LDPIMDPI

HDPIXHDPI
app

48dp
48dp UI

26

Translated by CDC |

Android Design

48dp
48dp 9 7-10

48dp
1. 7mm
2.

UI 8pd

27

Translated by CDC |

Android Design

----------------------------------------------------------------------------------------------------------------------------

Android
Android
Roboto UI TextView

28

Translated by CDC |

Android Design

Android UI textColorPrimary textColorSecondary

textColorPrimaryInverse textColorSecondaryInverse.

Android

app

29

Translated by CDC |

Android Design

---------------------------------------------------------------------------------------------------------------------------

android

----------------------------------------------------------------------------------------------------------------------------

app

home app app home

30

Translated by CDC |

Android Design

48x48dp
512x512dp

48x48dp

31

Translated by CDC |

Android Design

app

32x32dp

32x32dp
24X24dp

45 2dp

: #333333
60%
: 30%

: #FFFFFF
: 80%
: 30%

32

Translated by CDC |

Android Design

/
app Gmail app

16x16dp

16x16dp
12X12dp

Gmail

app

33

Translated by CDC |

Android Design

24x24dp

24x24dp
22X22dp

34

Translated by CDC |

Android Design

-------------------------------------------------------------------------------------------------------------------- app
1. 30

2.

3.

4. 11

5.

6.

35

Translated by CDC |

Android Design

PATTERNS
Android 4.0-------------------------------------------------------------------------------------------------------
Android 4.0 Home

android 3.0 menu apps

android app
app

app android

app

36

Translated by CDC |

Android Design

--------------------------------------------------------------------------------------------------------------------------- app android

37

Translated by CDC |

Android Design

Home

38

Translated by CDC |

Android Design

Pinch open

39

Translated by CDC |

Android Design

Pinch close

--------------------------------------------------------------------------------------------------------------------app
app
* app
* app
* Gmail app
app

androidapp /

40

Translated by CDC |

Android Design

1.
App
app
2.

3. /

app

app

41

Translated by CDC |

Android Design

app

1.
app

2.
app

* app
*

* app
*

42

Translated by CDC |

Android Design

App

3. app
app app

3D app

app
app
43

Translated by CDC |

Android Design

app
1. tabs

scrolling tabs

5-7

44

Translated by CDC |

Android Design

YouTube

2.

45

Translated by CDC |

Android Design

3.

app

app

1.

Google app

46

Translated by CDC |

Android Design

Peopleapp

2.

Gmail

47

Translated by CDC |

Android Design

Gallery

*
*
*
*
*

---------------------------------------------------------------------------------------------------------------------------

Android 3.0

app
Android 2.3 app android 3.0
app

app A
B B

48

Translated by CDC |

Android Design

B A
app

app app

*
*
*
app
1.
app
app

2.
app

* tabs
*
*
49

Translated by CDC |

Android Design

*
*
3.
app
Gmail

apps

50

Translated by CDC |

Android Design

51

Translated by CDC |

Android Design

app
app app app
* app
* app
Gmail app
app Gmail
app

1. app
app app

Gmail
52

Translated by CDC |

Android Design

app

2. app
app
app

app app
app
Gmail Home
Home

53

Translated by CDC |

Android Design

-------------------------------------------------------------------------------------------------------------------------

android app
app

*
* app
*
* app
android app
app android app

app

1. app
app app logo
app app

app

2.
app

app app

3.
54

Translated by CDC |

Android Design

app

4.

app

1.
2.
3.

tabs spinner app

55

Translated by CDC |

Android Design

CAB
CAB app CABs

Gmail

CAB
56

Translated by CDC |

Android Design

*
*

1. tabs
app

holo holo

57

Translated by CDC |

Android Design

2. Spinners
Spinner app

*
* app

Calendar app spinner

3.
app

Gmail

FIT
F-
*
*
*
I-
*
*
T-
* apps
*
58

Translated by CDC |

Android Design

F, I T
4. action overflow
app
menu

* 50
*
* 360dp2
* 360499dp3
* 500599dp4
* 600dp5

5.
app

spinner

59

Translated by CDC |

Android Design

Gallery spinner

1.
app tabs spinners.
2. app
FIT

3.
app

60

Translated by CDC |

Android Design

--------------------------------------------------------------------------------------------------------------- Android Androiod

61

Translated by CDC |

Android Design

/
62

Translated by CDC |

Android Design

63

Translated by CDC |

Android Design

*
*
*
*

-------------------------------------------------------------------------------------------------------------------- app app

64

Translated by CDC |

Android Design

app /

pogo-sticking
pogo-sticking
/

65

Translated by CDC |

Android Design

tabs
app tabs

* tabs
*
* /
*

---------------------------------------------------------------------------------------------------------------------------Android 3.0
app

Android
Android 3.0
(contextual action bar, CAB)

66

Translated by CDC |

Android Design

(CAB)
CAB app

*
* CAB CAB
* CAB (checkmark) CAB CAB

67

Translated by CDC |

Android Design

CAB
CAB

CAB
CAB

CAB

* app (CAB)
*
*
* app CAB

---------------------------------------------------------------------------------------------------------------------------app
app app
app

68

Translated by CDC |

Android Design

Android

app

* app UI

*
app
* app

*
*

Home

69

Translated by CDC |

Android Design

1.

app app

2.
app

70

Translated by CDC |

Android Design

app app

3.
Android

email

4.
app

app

71

Translated by CDC |

Android Design

ticker

app

Android app

app

72

Translated by CDC |

Android Design

toasts
app

------------------------------------------------------------------------------------------------------------------------
Android 3.0
*

*
73

Translated by CDC |

Android Design

Android 4.0
Android4.0 app
1.
Android3.0 Android app

2.
Android
menu

74

Translated by CDC |

Android Design

3. apps
Android2.3 app

Android

75

Translated by CDC |

Android Design

Android Android---------------------------------------------------------------------------------------------- app Android app

UI
UI

Android app UI
/ Android UI
Android app app
UI

AndroidiOS Windows Phone7 UI

app android Android

Android SDK app

AndroidiOS Windows7

76

Translated by CDC |

Android Design

Android
Android apps
Android app

Android iOS

Android

Android
iOS
77

Translated by CDC |

Android Design

Android

Android iOS

app
UI

78

Translated by CDC |

Android Design

/ BUILDING BLOCKS
app

Tabs--------------------------------------------------------------------------------------------------------------- app

Android

79

Translated by CDC |

Android Design

Youtube

app

---------------------------------------------------------------------------------------------------------------------------
1.

2.

80

Translated by CDC |

Android Design

--------------------------------------------------------------------------------------------------------------------

81

Translated by CDC |

Android Design

1.

2.

82

Translated by CDC |

Android Design

---------------------------------------------------------------------------------------------------------------------------

83

Translated by CDC |

Android Design

Spinners-----------------------------------------------------------------------------------------------Spinner

84

Translated by CDC |

Android Design

gmaiL
app

---------------------------------------------------------------------------------------------------------------------------Android

Android

UI

85

Translated by CDC |

Android Design

-------------------------------------------------------------------------------------------------------------------

1.

3.

86

Translated by CDC |

Android Design

3.

1.
CAB app

2.

---------------------------------------------------------------------------------------------------------------------------

87

Translated by CDC |

Android Design

---------------------------------------------------------------------------------------------------------------------------

88

Translated by CDC |

Android Design

0 100

1.

2.
Gmailapp

89

Translated by CDC |

Android Design

--------------------------------------------------------------------------------------------------------------------

90

Translated by CDC |

Android Design

------------------------------------------------------------------------------------------------------------------------ app

1.

2.
app

91

Translated by CDC |

Android Design

3.

Android

1.

2.

usb

92

Translated by CDC |

Android Design

Toasts

------------------------------------------------------------------------------------------------------------------------

93

Translated by CDC |

Android Design

Android
/
app

94