woong's

Android 머티리얼 디자인 색상 변경 하기 본문

Develop/Android

Android 머티리얼 디자인 색상 변경 하기

dlsdnd345 2016. 2. 13. 22:38

Android 머티리얼 디자인 색상 변경 하기 


​ android 머티리언 디자인 적용에 대해서 전에 포스트를 섰습니다.

정말 간단하게 적용 해서 사용했었는데 이번에는 적용된 머티리얼 디자인 색상을 변경해 보려 합니다.

이또한 간단히 퀄리티 있는 앱을 만들수 있는것 같습니다.



1. Style 옵션 설명


  1. colorPrimary: 아플리케이션의 대표 색상입니다.
  2. colorPrimaryDark: 대표 색상 중에 조금 더 어두운 색상입니다. 상태바 설정을 하지 않을시 colorPrimaryDark 로 적용됩니다.
  3. colorAccent: 강조 색상 , 주 색상과 대비되는 색상을 지정합니다. 
  4. colorControlNormal: 컨트롤러(EditText, 체크박스, 라디오버튼, 프로그레스 바 등)에 사용합니다. 비활성 상태/선택한 상태 등이 아닌 '일반적인' 상태에 적용됩니다.
  5. colorControlHighlight: 위젯을 터치 하거나 액션이 일어날때 나타나는 색상 입니다
  6. android:navigationBarColor: 네비게이션 바 색상입니다. (API 21 에서부터 사용 가능 합니다.)

 


2. 적용 위치 



3. 샘플 코드


style.xml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorAccent">#33B5E5</item>
        <item name="colorPrimary">#73D3BC</item>
        <item name="colorPrimaryDark">#99D3BC</item>
        <item name="colorControlHighlight">#FF8800</item>
        <item name="colorControlNormal">#0099CC</item>
 
    </style>
 
</resources>
 
 

cs


layout.xml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
 
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
 
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New CheckBox"
        android:id="@+id/checkBox" />
 
    <RadioButton
        android:id="@+id/radioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New RadioButton" />
 
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar" />
 
    <RatingBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/ratingBar" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button" />
 
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Switch"
        android:id="@+id/switch1" />
 
    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New ToggleButton"
        android:id="@+id/toggleButton" />
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView" />
 
    <ProgressBar
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar" />
 
    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:id="@+id/progressBar2" />
 
 
</LinearLayout>
 
cs



이와 같이 Style.xml  에 색깔을 적용하면 해당위치에 적용이 됩니다.

이와같이 애니메이션도 나타나고 멋진 머티리얼 디자인 위젯을 사용 할수 있습니다.


Comments