본문 바로가기

유저 인터페이스/Material Design

서포트 라이브러리(v7)로 Material Design 적용하기 - (1) 머티리얼 테마 적용



안드로이드 5.0과 함께, 구글의 새로운 디자인 가이드라인인 'Material Design'(머티리얼 디자인) 도 같이 공개되었습니다.


안드로이드의 경우 3.0 (비운의 버전....)부터 Holo 테마가 적용되어 이전 버전 대비 비약적인 디자인 향상이 있었는데요, 이번에 공개된 머티리얼 디자인은 단순히 한 플랫폼에 한정적인 디자인 가이드라인이 아닌, 웹부터 크롬OS, 모바일, TV 까지 모든 구글 제품에 적용되는 공통적인 디자인 가이드라인이라는 점에서 다소 차이가 있습니다.


머티리얼 디자인에 대한 좀 더 자세한 내용은 구글 디자인 가이드 페이지(http://www.google.com/design/spec/material-design/introduction.html)나 다음 유튜브 영상을 참고하시면 좋을 것 같습니다.


[전반적인 디자인 컨셉]




[디자인 구성 요소에 대한 상세한 설명]




안드로이드 5.0 미만 버전에 머티리얼 테마 적용하기


서포트 라이브러리를 사용하면 안드로이드 5.0 미만 단말기에서도 머티리얼 테마를 사용할 수 있습니다.

한 단계씩 알아보도록 하겠습니다.


프로젝트를 생성한 후, 다음과 같이 애플리케이션 모듈의 depedencies 에 서포트 라이브러리 v7을 추가합니다. 버전은 꼭 21.0.0 이상으로 지정해야 합니다.


최신 버전의 안드로이드 스튜디오를 사용할 경우, 프로젝트를 생성하면서 자동으로 21.0.0 버전으로 지정되어 있을 것입니다.


[build.gradle]

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:21.0.0'

}


서포트 라이브러리 v7을 사용하려면, 타겟 SDK 버전을 21(안드로이드 5.0) 이상으로 지정해야 합니다. 따라서, 다음과 같이 targetSdkVersion 도 21로 변경합니다.


[build.gradle]

defaultConfig {

    applicationId "com.androidhuman.example.supportmaterial"

    minSdkVersion 10

    targetSdkVersion 21

    versionCode 1

    versionName "1.0"

}


다음, 애플리케이션 테마를 확인합니다. 안드로이드 스튜디오를 사용하여 프로젝트를 생성했다면, 일반적으로 애플리케이션 테마로 AppTheme가 지정되어 있을 것입니다.


style.xml 을 확인하여 AppTheme가 서포트 라이브러리의 테마를 상속하고 있는지 확인합니다.


[styles.xml]

<resources>

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

</resources>


머티리얼 테마 적용 확인하기


믿기 힘드시겠지만, 위의 절차만으로도 앱에 머티리얼 테마가 적용됩니다. 적용 결과를 확인하기 위해 예제 애플리케이션에 몇가지 위젯을 추가한 후 실행해 보았습니다.


[Android 5.0]

더 이상 말이 필요없을 정도로(당연히) 머티리얼 디자인이 적용됩니다. 머티리얼 디자인에서 새로 적용된 위젯들의 디자인이 대략 어떤 느낌인지 감이 오실 겁니다.




[Android 4.0 ~]

전반적인 앱 테마와 EditText, CheckBox, RadioButton, Switch(SwitchCompat) 에만 적용됩니다. 다른 위젯에는 기존의 홀로(Holo) 테마가 적용되어 있는 것을 확인할 수 있습니다.



[Android 2.3]

이제는 그만 놓아주고 싶은 버전, 진저브레드에서의 실행 모습입니다. 구글에서도 이제 별 미련이 없는건지, 전반적인 앱 테마와 EditText와 Switch(SwitchCompat)을 제외하고 다른 위젯들은 머티리얼 디자인이 적용되지 않았습니다. 사실상 SwitchCompat은 플랫폼 버전과 상관없이 모든 버전에 동일하게 지원하는 위젯이니, 실질적으로 안드로이드 2.3에선 EditText만 정상적으로 지원된다 볼 수 있겠습니다.




머티리얼 테마의 하위 버전 지원, 아직인가요?


위에서 확인해 봤던 것과 같이, 현제 제공되는 서포트 라이브러리 버전(v7-21.0.0)에서는 머티리얼 테마의 적용 범위가 상당히 한정적입니다.현 시점의 주류 버전인 4.0 버전에서조차 모든 위젯이 지원되지 않고, 특히 다이얼로그 테마도 지원되지 않아 머티리얼 디자인과 홀로 테마가 어중간하게 섞인 느낌이 너무 강하게 듭니다. 


하지만, 전반적인 앱 테마에서 머티리얼 디자인을 제공하고 있고, 아직 첫 버전인 만큼 추후 업데이트를 통해 머티리얼 테마가 적용되는 범위가 늘어날 것으로 예상합니다.


이 글에서 사용한 예제 프로젝트는 아래 위치에서 확인하실 수 있습니다.