안드로이드 개발 팁 #20 - 툴바 정의 방법 (1) 타이틀 및 배경색 설정

dorian-mobileapp (65)in kr-dev 커뮤니티 • 2 years ago

이번 포스트에서는 앱 화면 상단에 액션 바 대신 툴바를 정의 및 배치하는 방법에 대해 정리해 봅니다. 여러 번 걸쳐서 작성할 예정이구요. 1번째에는 화면에 배치하고 타이틀 내용, 타이틀 색, 배경색 설정하는 방법을 정리합니다.

액션바와 툴바

안드로이드 프로젝트 생성 후 기본으로 생성된 메인 화면의 상단에는 보라색(2022. 10. 11 기준)의 바가 있습니다. 이것은 액션 바(action bar)라 부르구요. 화면의 타이틀, 좌측에 0~1개의, 우측에 0개 이상의 버튼들을 설정할 수 있습니다. 그런데 액션바는 안드로이드 버전이 올라가면서 외형과 기능이 바뀌어 왔구요. 같은 앱이라도 안드로이드 OS의 버전에 따라서 다르게 보이거나 다르게 작동하는 문제가 있습니다. 액션 바는 툴바로 대체할 수 있구요. 전자와 달리 후자는 안드로이드 버전에 관계 없이 일관적인 외형과 기능이 제공됩니다. 게다가 액션 바에서는 할 수 없는 UI 커스터마이징도 일부 가능합니다.

사전 작업 - 액션 바 제거

기본적으로 생성된 메인 화면에는 액션 바가 있지요. 툴바를 추가하기 전에 그것을 먼저 제거해야 합니다.

{모듈}/src/main/res/values/themes.xml 파일을 여세요.
Base application theme로 정의된 style 태그의 parent 속성을 변경하세요.
- as-is: Theme.MaterialComponents.DayNight.DarkActionBar
- to-be: Theme.MaterialComponents.DayNight.NoActionBar

참고로 액션 바의 테마 중 NoActionBar로 끝나는 테마는 액션 바가 없음을 의미합니다.

dependency 확인

모듈의 build.gradle 파일을 여시고요. 그것의 dependencies 블록에서 appcompat 라이브러리가 포함되어 있는지 확인해 보세요. 이제는 프로젝트 생성 후 기본적으로 그것이 포함됩니다.

dependencies {
    // ...
    implementation 'androidx.appcompat:appcompat:1.5.1'
    // ...
}

레이아웃 파일에 Toolbar 태그 추가

이제 레이아웃 파일에 Toolbar 태그를 추가하면 됩니다. 예를 들면, 다음과 같습니다.

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:title="메인 화면"
    app:titleTextColor="#FFFFFF" />

title: 툴바의 타이틀 내용입니다.
background: 툴바의 배경색입니다.
titleTextColor: 툴바의 타이틀 색입니다.

툴바를 액션바로 설정

위에서 정의한 툴바를 액티비티의 액션바로 설정합니다. 아래 코드는 MainActivity 클래스에서 이를 적용한 예입니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setSupportActionBar(findViewById<Toolbar>(R.id.toolbar))
    }
}

참고 사이트

안드로이드 - 햇갈리는 Toolbar와 ActionBar 정리
- 개념 파악에 참고했습니다.
- 여기서 설명하는 툴바는 androidx가 아닌 예전 support library를 활용했습니다.

마치며...

이번 포스트에서는 툴바를 정의하는 방법에 대해 알아 보았습니다. 메뉴 버튼을 추가하는 방법에 대해서는 다음에 정리할 예정인데요. 이번 포스트를 작성하기 위해 만든 샘플 소스에는 툴바에 다크 모드도 적용해 보았습니다. 다음 진도 나가기 전에 다크 모드에 대해서도 간단히 정리를 해보고 넘어갈까 합니다.