태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

서포트 라이브러리(v7)로 Material Design 적용하기 - (2) 색상 테마 적용

2014.11.19 22:52

이전 글 (2014/11/13 - 서포트 라이브러리(v7)로 Material Design 적용하기 - (1) 머티리얼 테마 적용)에선 서포트 라이브러리를 사용하여 애플리케이션에 머티리얼 디자인을 적용하는 방법에 대해 알아보았습니다. 


이번 글에서는 머티리얼 테마와 함께 색상 테마를 적용함으로써 일관된 느낌을 유지하면서 각 애플리케이션 고유의 느낌을 낼 수 있는 방법에 대해 다루겠습니다.


적용 가능한 색상 테마 종류


기존과 동일하게 style.xml 에 테마를 정의하여 머리티얼 테마를 적용할 수 있습니다. 서포트 라이브러리를 사용할 경우 지정할 수 있는 항목은 다음과 같습니다.

  • colorPrimary: 아플리케이션의 주 색상입니다. 대표적으로 지메일이나 유튜브의 빨간색, 구글 뮤직의 주황색을 들 수 있습니다.
  • colorPrimaryDark: 주 색상 계통에서 조금 더 어두운 색상입니다. 상태바 색상을 별도로 지정하지 않을 경우 상태바 색상으로 사용됩니다.
  • colorAccent: 강조 색상으로, 보통 주 색상과 대비되는 색상을 지정합니다. 중요한 역할을 하는 UI 요소에 주로 사용합니다.
  • colorControlNormal: 컨트롤러(EditText, 체크박스, 라디오버튼, 프로그레스 바 등)에 사용합니다. 비활성 상태/선택한 상태 등이 아닌 '일반적인' 상태에 적용됩니다.
  • colorControlHighlight: 컨트롤러를 터치하거나 선택되었을 때 표시할 색상입니다.
아래 항목은 서포트 라이브러리에서 지원하지 않는 항목으로, API Level 21(Android 5.0) 이상에서만 사용 가능합니다.
  • android:navigationBarColor: 네비게이션 바 색상입니다.


테마로 지정한 색상이 적용되는 위치는?


뒤에서 작성할 예제의 모습들입니다. 색상이 어디에 적용되는지 직접 확인해보세요~

EditText 위젯은 적용되는 API Level에 따라 적용되는 모습이 약간 상이합니다. API Level 21(Android 5.0) 에선 윗 부분에 colorControlNormal 색상, 아랫 부분에 colorAccent 색상으로 적용되지만, 하위 버전에선 colorAccent 색상 하나만 표시됩니다.



Overscroll시 나오는 물결 무늬의 색상과 스크롤바 모습의 모습입니다. 각각 colorPrimary, colorControlNormal 색상이 적용됩니다.



멀티태스킹 창에 표시되는 앱 제목 표시줄 색상은 colorPrimary 색상으로 표시됩니다.


사용자가 직접 위젯을 컨트롤할 때는 colorAccent 색상이 표시됩니다.

위젯에 대한 터치 피드백은 colorControlHighlight 로 표시합니다. 아쉽게도 이 효과는 API Level 21 이상에서만 표시됩니다.



테마 적용해보기


위에서 살펴본 예제를 직접 만들어 보겠습니다. 아마 지금까지 작성한 강좌 중 가장 쉬운 에제 중 하나일 것 같네요 -_-


우선, 새 프로젝트를 생성합니다. 액티비티 한 개가 있는 프로젝트를 생성한 후, 애플리케이션 모듈의 build.gradle의 dependency 에 다음과 같이 appcompat-v7 라이브러리가 추가되었는지 확인합니다.


[build.gradle]

dependencies {

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

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

}


위에서 주의할 점은, 액티비티가 ActionBarActivity를 상속하는지 확인해야 합니다. 만약 액티비티가 ActionBarActivity를 상속하지 않을 경우 테마가 제대로 적용되지 않습니다.


다음으로, 두 가지 버전의 styles.xml 파일을 준비합니다.

  • values/styles.xml: API Level 21 미만에서 사용하는 테마
  • values-v21/styles.xml:  API Level 21 이상에서 사용하는 테마
리소스 파일 생성이 완료되었다면 프로젝트 탭에 파일이 다음과 같이 표시됩니다.


이제 각 파일을 다음과 같이 수정합니다.

[values/styles.xml]
<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorAccent">#FF4081</item>
        <item name="colorPrimary">#3F51B5</item>
        <item name="colorPrimaryDark">#303F9F</item>
        <item name="colorControlHighlight">#00CC55</item>
        <item name="colorControlNormal">#FF0000</item>
    </style>

</resources>

안드로이드 5.0을 위한 테마에서는 네비게이션 바 색상도 변경하기 위해 android:navigationBarColor 를 추가했습니다.

[values-v21/styles.xml]
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorAccent">#FF4081</item>
        <item name="colorPrimary">#3F51B5</item>
        <item name="colorPrimaryDark">#303F9F</item>
        <item name="android:navigationBarColor">#303F9F</item>
        <item name="colorControlHighlight">#00CC55</item>
        <item name="colorControlNormal">#FF0000</item>
    </style>
</resources>


테마 설정은 이것으로 모두 완료되었습니다. 마지막으로 아래 레이아웃을 메인 액티비티의 레이아웃에 적용합니다.


[activity_main.xml]

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Edit text" />

        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Checkbox" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Radio" />

        <android.support.v7.widget.SwitchCompat
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:gravity="center"
            android:text="Long\nLong\nLong\nLong\nLong\nLong\nLong\nLong\nLong\nLong\nLong\nText" />

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:indeterminate="true" />

        <RatingBar
            android:id="@+id/ratingBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_alert_dialog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Alert dialog" />

    </LinearLayout>
</ScrollView>


완성된 예제를 실행하면 다음과 같이 테마가 적용된 모습을 확인할 수 있습니다. 아직 서포트 라이브러리의 지원 범위가 제한적인지라, 안드로이드 5.0 이전 버전의 단말기에서는 일부 위젯에만 머리티얼 테마 및 색상이 적용됩니다.





이 포스트에서 사용한 예제는 아래 링크에서 확인할 수 있습니다.




저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

커니 유저 인터페이스/Material Design , , , , , , , , , , ,

  1. 젤리빈이라 안되는 걸까요?
    똑같이 했는데 안되네요 ㅠㅅㅜ

  2. 어느 부분이 적용되지 않으시나요? 예제 프로젝트를 그대로 실행했을 때는 제대로 적용 되는지 확인 부탁드려요~

  3. Blog Icon
    라인

    툴바를 적용했는데 일부분이 적용이 안되네요...

  4. Blog Icon
    라인

    아아...전강좌에 있었떤 statusColor인가.. 그속성이 있어서 안된거였네요

  5. Blog Icon
    이정욱

    서포트 라이브러리(v7) 사용하지 않고, ActionBarActivity 사용하지 않고, API 11 부터 지원한다면,
    NavigationDrawer 와 ActionBar, ViewPager 를 사용하는 예제는 없을까요 ? ^^

  6. Blog Icon
    초보

    저는 프로젝트를 만들면 ActionBarActivity가 상속이 안되는데 상속하려면 어떻게 해야되나요?
    상속 하려고해도 오류만나고 ㅠㅠ

  7. appcompat-v7 라이브러리가 프로젝트 Dependency로 추가 되어있는지 확인해보세요~

  8. Blog Icon
    이동인

    항상 감사합니다.
    글 하나하나가 큰 도움이 되는군요.

  9. Blog Icon
    전수빈

    죄송하지만 질문한가지만 드리겠습니다.
    colorAccent를 white로 적용을 하고 app을 실행을했는데요.
    색상이 바뀌기는하는데 editText쪽 커서도 흰색으로 바뀌어서 커서가 안보입니다.
    checkBox부분만 white로 변경하고싶은데 어떻게 해야하나요?

  10. 머티리얼 디자인에 관련하여 정말 자세하게 설명해주셔서 감사합니다.
    이해하는데 많은 도움이 되었습니다.
    정말로 감사합니다.

  11. FragmentActivity썻다가 ActionBarActivity로 바꿔구현했는데 Viewpager가 사용이안되요..따로 설정하는방법이잇는건가요

  12. 물러 뷰페이저 구현은 fragment에서 해줬고요 어댑터에서 연결시켜주도록되어있는데 안되요,

  13. Blog Icon
    민이

    안녕하세요~~

    인사드립니당