[kotlin] Build Your First Android App in Kotlin 무작정 따라하기 - 4

 

Build Your First Android App in Kotlin  |  Android Developers

앞선 글에서 리소스 스트링 값을 변경하는 방법을 다뤘다면, 이번 글에서는 새로운 color 리소스를 넣고 적용하는 방법을 다룰 것이다.

 

5. Task: Add color resources

Step 1: Add color resources

이전 글에서 다뤘던 strings.xml이 있던 경로에 colors.xml도 있다. 여길 더블클릭하면

이런 식으로 몇 가지 색들이 미리 들어있는 것을 확인할 수 있다. 각 color 왼쪽에 무슨 색인지 친절하게 보여주기까지 한다. 참고하고 있는 튜토리얼 문서에는 3개가 준비되어 있다고 했는데, 안드로이드 스튜디오 버전에 따라서 다른가보다.

 

여기서 fragment_first.xml 파일을 코드 모드로 들어가서 아래 빨간 체크한 두 라인을 직접 입력해보자. 코드가 아니라 디자인이 보인다면, 화면 오른쪽 상단 어딘가에 code/split/design 이라고 되어있는 탭이 있을텐데, 거기에서 code를 선택해주면 된다.

android:background="@color/purple_200" 이라고 되어있는 줄과 android:textColor="@color/white"라고 되어있는 줄을 새로 추가했다. 그 위에 textStyle 줄은 이전 글을 쓸때 볼드 적용하는 걸 했더니 들어갔나보다. purple_200, white라는 색은 방금 전 colors.xml에서 봤던 리소스다.

 

여기까지 되었으면 fragment_first.xml의 코드 모드를 디자인 모드로 돌아가서 확인해보자.

 

Hello World라는 텍스트가 들어있는 textview에 앞서 입력한 색들이 잘 적용되었음을 확인할 수 있다.

 

Step 2: Add a new color to use as the screen background color

앞선 단계에서는 미리 준비되어 있던 색을 뷰에 적용했는데, colors.xml 파일에 색을 직접 입력하고 그걸 위와 같은 방식으로 사용할수 있는 건 어쩌면 당연한 이야기겠다. 이번에는 앱 전체 배경 색을 바꿔보겠다.

디자인 모드에서 component tree쪽에서 ConstraintLayout 뷰를 선택하고 Attributes 패널을 보면

이런 속성들이 보일텐데, background를 찾는다. All Attributes가 접혀있을 수도 있는데, 이걸 펼치면 background를 바로 찾을 수 있다. 거기서 스포이트 아이콘을 누르면,

이런 창이 뜬다. 이 창을 자세히 보면 상단에 Resources랑 Custom 탭으로 나뉘는 걸 볼 수 있는데, 위의 캡쳐는 Custom 탭이 선택되어 있는 상황. 여기에서 원하는 색을 바로 찍는 것도 가능하고, 아니면 Resource 탭으로 가서

기존에 만들어둔 리소스 색을 사용하는 것도 가능하다. 나는 my_color라는 리소스를 만들어서 넣어두었기 때문에 이 리소스가 이 탭에서 보인다. 여기서 my_color를 선택하면,

바로 적용되는 것을 확인할 수 있다.

 

Step 3: Explore width and height properties

튜토리얼에서는 이 layout 연관된 부분을 가지고 실험해보라는 내용이 나오는데... 튜토 내용만으로는 아직 무엇을 어떻게 제어할 수 있는지 잘 모르겠으니 이 글에서도 설명은 생략하도록 하겠다.