첫 프로젝트 만들기_04_색 바꾸기

색 바꾸는 방법

문자를 strings.xml에서 관리하는 것과 마찬가지로

색은 colors.xml파일에서 관리한다.

value폴더에 있는 colors.xml파일을 더블클릭해서 열어보자.

이 파일 안에는 색의 이름(color name)과 색의 hex코드가 적혀있는 태그( <  > )로 이루어져 있다.

왼쪽에는 해당 색이 나타나 있다.

현재는 default(기본)값으로 3개의 색만 등록되어 있다.

 

먼저 프로젝트에 있는 컴퍼넌트의 색을 바꿔보면서 살펴보자.

activity_main(액티비티_메인).xml에서 TextView(텍스트뷰)의 글자 배경색을 바꿔본다.

TextView를 선택하면 오른쪽에 속성(attribute)창이 나타난다.

background(배경)에 있는 스포이드 아이콘을 클릭하면 색을 바꿀 수 있다.

준비되어 있는 색상표에서 선택하거나

RGB 수치를 입력해서 선택하거나

Hex 코드를 입력해서 선택할 수도 있다.

마음에 드는 색을 고르고 색상표 바깥을 클릭하면 색이 선택된다.

 

색을 선택한 후에 메뉴의 Edit > Undo Set ~를 클릭하면

방금 했던 작업을 취소할 수 있다.

단축키 Ctrl+Z를 기억해 두면 편리하다.

누를 때 마다 이전 작업을 순서대로 취소할 수 있다.

여기서는 일단 배경색 선택을 취소하고

배경색을 text 편집창에서 직접 입력하는 방법도 알아본다.

 

activity_main.xml의 text탭을 클릭한다.

android:textColor~ 줄의 끝에 커서를 두고 엔터키를 누른다.

다음 줄에 글자의 배경색을 바꾸는 코드를 입력해 보자.

 

먼저 an을 입력하면 위 그림처럼 '자동 완성' 창이 나타난다.

android: 을 입력해야 하는데 자동 완성창에 파란색 부분과 일치한다.

글자를 계속 입력하지 않고 위 상태에서 그냥 엔터키를 치면 android:이 자동으로 입력된다.

 

혹시 자동 완성창이 나타나지 않거나 변경하려면 메뉴의 settings에서 설정할 수 있다.

한번 가보자.

File > Settings를 클릭한다.

Code Completion(코드 완성)의 옵션을 위 그림처럼 체크하면 초보자에게 무난하다.

다시 본래 화면으로 돌아와서

android:을 입력한 후 계속해서 background를 입력하기 위해 b만 치면 background이 자동완성창에 보인다.

파란색 상태에서 엔터키를 쳐서 자동완성하자.

계속해서 따옴표("")안에 위에서 선택했던 노란색에 해당하는 #FFC107 를 입력하면 왼쪽에 그 색이 나타난다.

이제 Design탭을 눌러서 확인해 보자.

이렇게 색을 바꾸는 방법도 여러 가지로 해결할 수 있다.

편한대로 작업하면 된다.

 

다시 Text창으로 돌아가자.

노란색의 hex코드를 지우고 흔히 '골뱅이'라고 부르는 @ (at sign, 앳싸인)을 입력해 보자.

자동 완성창에 color와 관련된 3개가 보인다.

이 글 제일 앞에서 봤던 colors.xml에 등록되어 있던 색들이다.

방향키를 움직여 colorPrimaryDark를 선택하면 오른쪽에 해당 색과 hex코드가 나타난다.

엔터키를 쳐서 해당색으로 바꾸자.

 

이번에는 같은 방법으로 배경색 위에 있는 textColor(글자 색)도 흰색으로 바꿔보자.

디자인창으로 돌아가서 확인해보자.

다음 글에서는 색상을 관리하는 colors.xml에 대해 좀 더 알아본다.