제대로 된 안드로이드 앱만들기라는 강좌에서 메테리얼 맛보기 파트에서 사용된 자료입니다. 주로 Transition Animation과 cardview, recyvlerView맛보기가 있습니다.

1. 메테리얼 디자인 미리 맛보기
v1.0

2. http://blog.naver.com/upleat/220146734178
??

3. 요즘의 트랜드는 Flat Design

4. Android 4.4(kitkat) ~
IOS 7 ~

5. http://designmodo.com/flat-design-principles/
Principles of Flat Design
No Added Effects

6. http://designmodo.com/flat-design-principles/
Principles of Flat Design
Simple Elements

7. http://designmodo.com/flat-design-principles/
Principles of Flat Design
Focus onTypography

8. http://designmodo.com/flat-design-principles/
Principles of Flat Design
Focus on Color

9. http://designmodo.com/flat-design-principles/
Principles of Flat Design
Minimalist Approach

10. http://designmodo.com/flat-design-principles/
Principles of Flat Design
“Almost” Flat Design

11. https://cuzkus.wordpress.com/2014/06/12/플렛-디자인은-왜-대세가-되었을까/
정보 전달에 불필요한 디자인적 요소들의 제거
!
정보 전달에 최적화

12. Material = Flat + 두께, 높이 + (Motion)
https://cuzkus.wordpress.com/2015/01/03/안드로이드-롤리팝과-material-design/
물질의 질감이나 광원 효과, 그림자 효과 등을 통해 깊이감을 더함

14. http://www.youtube.com/watch?v=XOcCOBe8PTc

15. http://www.youtube.com/watch?v=Q8TXgCzxEnw

16. http://www.google.com/design/spec/material-design

17. http://www.slideshare.net/watchncompass/3-material-design

18. 메테리얼용 색상 추천
http://www.materialpalette.com/
http://www.google.com/design/spec/style/color.html

19. 5.0 개발 환경 갖추기

20. 넥서스5이외에도 5.0이 제공되기 시작함!

21. 5.0 디바이스가 없으면…
제니모션을 사용합시다.
www.genymotion.com

22. https://www.virtualbox.org/wiki/Downloads
버츄얼박스가 없으면 버츄얼박스도 설치…

23. 패키지 설치…

24. 제니모션도 복사…

25. 첫 실행시 가상 디바이스를 만들어 줘야 합니다.

26. 로그인 필요… 회원가입은 홈페이지에서

27. 5.0 가상 디바이스를 생성합니다.

28. start를 누르면…

29. 5.0 가상환경에서 개발이 가능합니다!

30. 라이브러리 추가하기
이 자료는 이클립스 기준으로 작성되었습니다.

31. 최신 서포트 라이브러리 업데이트 필요!
(기존 작업 프로젝트를 위해 백업하실분은 백업…)

32. SDK-extras-android-support에 있는
appcompat, cardview, recyclerview 불러오기

33. 최신 빌드 타겟과 IsLibrary체크 확인

34. 적용할 프로젝트도
최신 빌드타겟 + 서포트, 카드뷰, 리사이클러뷰어 라이브러리 추가

35. AppCompat Style 사용하기

36. 예제 맛보기
이 예제는 아래의 코드를 기반으로 만들어 졌습니다.
https://github.com/rdrobinson3/WelcomeToL

37. 만들어 볼 예제

38. 간단한Transition Animation 추가

39. Transition Animation https://youtu.be/4x-4tuZqSxQ

40. 기본 코드 다운 받기
http://bit.ly/14Pofr1

41. 새로 추가된 CardView위젯

42. res - layout - card_row.xml

44. res - layout - activity_main.xml
ListView대신 RecyclerView

45. RecyclerView
ListView보다 유연하고 성능이 향상된 위젯
구조가 ListView에 비해 다양하게 확장 할 수 있도록 되었지만
그만큼 손이 많이 가는 부분이 있음…
주요 클래스
Adapter – 기존의 ListView에서 사용하는 Adapter와 같은 개념으로 데이터와 아이템에 대한View생성
ViewHolder – 재활용View에 대한 모든 서브 뷰를 보유
LayoutManager – 아이템의 항목을 배치
ItemDecoration – 아이템 항목에서 서브뷰에 대한 처리
ItemAnimation – 아이템 항목이 추가, 제거되거나 정렬될때 애니메이션 처리
http://www.kmshack.kr/android-recyclerview

46. List에서는 ClickListener를 달면 간단할 것을
GestureDetector를 사용하여 이벤트 판별

47. 간단한Transition Animation 만들기
이 예제는 아래의 코드를 기반으로 작성되었습니다.
https://github.com/googlesamples/android-ActivitySceneTransitionBasic

48. 액티비티간의 전환시에
뷰가 변화하는 애니메이션이 발생
MainActivity DetailActivity

49. 액티비티간의 전환시에
뷰가 변화하는 애니메이션이 발생

50. 양쪽 액티비티의 뷰에 사용될 공통 이름을 정합니다.
(문자는 아무 문자여도 괜찮습니다.)

51. 변화가 끝나는 액티비티를 먼저 보겠습니다.
MainActivity DetailActivity

52. setTransitionName()을 사용하여 아까 정한 이름을 지정합니다.
이 함수는 롤리팝이상에서 추가되었으므로 분기 처리를 하였습니다.

53. MainActivity DetailActivity
변화가 시작되는 액티비티를 보겠습니다.

54. 싱글탭이 발생 이벤트를 처리하는 곳에
ActivityOprions의 makeSceneTransitionAnimation을 만들어
변화가 시작될 뷰ID와 아까 정한 이름을 지정합니다.

55. 간단? 하게 애니메이션이 적용되었습니다.
https://youtu.be/4x-4tuZqSxQ

56. 덤. Parallex Scroll 라이브러리 적용하기

57. 요즘 자주 보는 레이아웃

58. https://github.com/google/iosched
구글IO 2014

59. https://github.com/flavienlaurent/NotBoringActionBar
NotBoringActionBar

60. https://github.com/nirhart/ParallaxScroll
Parallax Scrolls

61. 예전부터 꾸준히 인기를 모으고 있지만…
시간이 남으면 적용해 보겠습니다…( 간단! )

62. https://github.com/nirhart/ParallaxScroll
라이브러리 다운로드…

63. 라이브러리 프로젝트 임포트 후
프로젝트에 적용…

64. 겉을 ParallaxScrollView로 감싸면…

65. https://youtu.be/astG_dn-hbo

66. 수고하셨습니다^^