Part1_Ch05_05 계산기 UI 꾸미기

이번 시간에는 앱의 UI 를 꾸며보자.

앱의 상단 바를 액션바 라고 부른다.

 

 

 

1. 계산기를 구현할 때는 액션바 가 필요 없으므로 없애고
2. 테마에 따른 색상 설정을 해보자.

Settings (설정) → Display (화면) → Dark theme (야간모드)

---

1) 액션바 없애기

액션바 는 우리가 설정하기 전에도 이미 적용이 되어 있다.

manifest 에서 테마 라는 값이 있다.

 

AndroidManifest.xml

 

cmd+click 또는 ctrl+click 하여

themes.xml 파일을 열어보자.

themes.xml 에서 액션바 를 제거하기 위해서 아래 코드를 수정하자.

 

• 수정 전

<stylename="Theme.Chapter5"parent="Theme.MaterialComponents.DayNight.DarkActionBar">

• 수정 후

<stylename="Theme.Chapter5"parent="Theme.MaterialComponents.DayNight.NoActionBar">

 

 

또, 야간모드에서도 액션바를 없애자.

res > values > themes > themes.xml (night) 수정

 

---

equationTextView 와 resultTextView의

textColor 를 white 로 변경하자.

 

야간모드 (다크모드)일 때는

검정 배경이라 흰 글씨가 잘 보이지만

주간모드 (라이트모드) 이면 글씨가 보이지 않는다.

 

테마에 따라 색 변경이 필요하다.

---

2) 야간모드

야간모드 용 color 값을 추가하자.

 

File name 은 주간모드와 동일하게 “colors” 로 하고

이때, Directory name 에 “-night” 을 붙인다.

 

주간 모드에서는 기본글씨색을 검정으로 지정하고

<color name="defaultTextColor">#FF000000</color>

 

야간 모드에서는 기본글씨색을 흰색으로 지정하자

<color name="defaultTextColor">#FFFFFFFF</color>

 

이후 activity_main.xml 파일에서

equationTextView 와 resultTextView 의

textColor 를 defaultTextColor 로 변경해주자.