Material Design 적용

도입

이번 포스팅에서는 Material Design 적용 관련 포스팅을 할 예정이다.
Material Design 관련해서는 예전에 적용을 한적이 있다. 

2018/01/03 - [컴퓨터/이론: 디자인] - [2018.01.03] 04. 머티리얼 디자인 - Hero 전환 1

[2018.01.03] 04. 머티리얼 디자인 - Hero 전환 1

2018/01/04 - [컴퓨터/이론: 디자인] - [2018.01.04] 06.머티리얼 디자인 - Hero 전환 2

[2018.01.04] 06.머티리얼 디자인 - Hero 전환 2

---

AS-IS

현재 상관은 디자인에 일관성이 없다. 
아이콘 크기, padding, margin 등에도 일관성이 없다.

지금까지 기능 구현에 집중했고 디자인은 신경쓰지 않았다. 아래 사이트를 기반으로 머티리얼 가이드 적용

• 머티리얼 디자인: https://material.io/
• 머티리얼 아이콘: https://materialdesignicons.com/
• 머티리얼 컬러툴: https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=ceeb6f

인상 깊게 적용한 사항

https://material.io/components/bottom-navigation/#behavior
BottomNavigation에서
Android는 유저 인터렉션은 temporary 상태 / 다시 선택했을 때 원상복귀
iOS는 유저 인터렉션은 last screen / 다시 선택했을 때 마지막 상태 유지

Android	iOS
https://material.io/components/bottom-navigation/#behavior	https://material.io/components/bottom-navigation/#behavior

---

TO-BE

Step1. Dimend.xml 공통 padding, margin 등 설정

<resources>
    <dimen name="common_header_height">56dp</dimen>
    <dimen name="app_bar_height">200dp</dimen>
    <dimen name="simple_media_controller_height">60dp</dimen>
    <!--design_bottom_navigation_height + simple_media_controller_height-->
    <dimen name="fragment_bottom_margin">116dp</dimen>
 
    <dimen name="activity_left_right_margin">8dp</dimen>
    <dimen name="main_recycler_view_left_right_margin">4dp</dimen>
 
    <!-- Album Item-->
    <dimen name="album_card_margin">4dp</dimen>
    <dimen name="card_radius">4dp</dimen>
    <dimen name="card_elevation">2dp</dimen>
    <dimen name="card_height">240dp</dimen>
    <dimen name="card_info_container_margin">16dp</dimen>
    <dimen name="card_info_container_margin_start">8dp</dimen>
    <dimen name="card_info_container_margin_bottom">8dp</dimen>
    <dimen name="component_spacing_margin">8dp</dimen>
 
    <!-- Card Media -->
    <dimen name="media_item_height">96dp</dimen>
    <dimen name="media_item_margin">4dp</dimen>
    <dimen name="media_item_text_margin">4dp</dimen>
 
</resources>

Step2. my_color.xml 에 primaryColor, secondColor 설정

<resources>
    <color name="primaryColor">#ff5722</color>
    <color name="primaryLightColor">#ff8a50</color>
    <color name="primaryDarkColor">#c41c00</color>
    <color name="secondaryColor">#452824</color>
    <color name="secondaryLightColor">#72514c</color>
    <color name="secondaryDarkColor">#210000</color>
    <color name="primaryTextColor">#111111</color>
    <color name="secondaryTextColor">#ffffff</color>
 
    
    <color name="whiteBgColor">#ffffff</color>
    <color name="grayBgColor">#F2F2F4</color>
    <color name="whitePlaceHolderColor">#efefef</color>
</resources>

---

스크린 샷

AS-IS	TO-BE

 

 

#앱개발 #모바일앱개발 #어플개발