디자이너 없이 개발하기 - Material Design Theme

몇일전에 메터리얼 디자인에 적용에 관한 내용을 포스팅 한 적이 있다. (http://storyofdream.tistory.com/119)

그 이후 실제 프로젝트에 적용해 봤고 적용했던 내용을 토대로 메터리얼 디자인에 대해서 작성을 한번 해봐야겠다

우선 Material Design에 가장 큰 특징인 컬러 대비에 대해서 알아봅시다.

1. Color 선택

Material Design에서는 Accent Color라는 것을 지정하여 강조 할 수 있도록 지정 하는데 이와 같은 Color 정보는

https://www.google.com/design/spec/style/color.html

여기가면 볼 수 있다. 

그런데 나는 컬러 감각도 없고, 저건 선택권이 너무 많아! 라고 하시는 분은 http://www.materialpalette.com/ 에서 선택하면 된다. 

그리고 이 사이트의 가장 큰 좋은 점은 color.xml 형식으로 다운 받을 수 있다는 사실!

http://www.materialpalette.com/ 

컬러를 선택하고, xml로 다운로드 받으면 끗!

선택 방법은 몇번 해보면 감이 오겠지만, 처음은 클릭은 기본 컬러, 두번째 클릭은 엑센트 컬러이다. 

나는 인디고 + 핑크 컬러를 이용해서 작성 해 보았다.

2. color.xml 추가

기존에 생성했던 프로젝트에 color.xml을 추가해보자.

안드로이드 스튜디오 단축키는 res/values를 선택 하고 alt+insert(단축키를 외웁시다!)를 누르면 메뉴가 뜬다

Values resource file을 선택하고 color 입력 후 엔터

color가 다음과 같이 추가 되면 color에 아까 다운로드 받은 xml을 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#3F51B5</color>
    <color name="primary_dark">#303F9F</color>
    <color name="primary_light">#C5CAE9</color>
    <color name="accent">#FF4081</color>
    <color name="primary_text">#212121</color>
    <color name="secondary_text">#727272</color>
    <color name="icons">#FFFFFF</color>
    <color name="divider">#B6B6B6</color>
</resources>

3. Theme 설정

이제 color가 만들어 졌으면 theme를 만들어 적용하면 끝!

컬러 정보는 다음과 같다.

http://developer.android.com/training/material/theme.html#ColorPalette

style.xml은 다은과 같이 적용 하면 된다.

<resources>

    <style name="Base.Theme.MaterialDesign" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="android:textColorPrimary">@color/primary_text</item>
        <item name="android:textColorSecondary">@color/secondary_text</item>
        <item name="android:icon">@color/icons</item>
        <item name="android:divider">@color/divider</item>
    </style>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Base.Theme.MaterialDesign">
        <!-- Customize your theme here. -->
    </style>

</resources>

4. 실행 결과

실행을 시켜보면 다음과 같이 나온다.

이제 우리는 디자이너 없이 앱을 개발 할 수 잇는 초석이 마련되었다.

1인기업으로 때돈한번 벌어보자!