[kotlin] 툴바와 액션바 구현을 위한 Material Components 사용법

20 Dec 2023

kotlin

안녕하세요! 오늘은 안드로이드 앱에서 Material Components를 사용하여 툴바와 액션바를 구현하는 방법에 대해 알아보겠습니다. Material Components를 이용하면 사용자 경험을 향상시키는 멋진 디자인과 인터랙션을 구현할 수 있습니다. Kotlin을 사용하여 새로운 프로젝트에서 Material Components를 통해 툴바와 액션바를 구현하는 방법을 살펴보겠습니다.

Material Components 추가

먼저, build.gradle 파일에 Material Components 라이브러리를 추가합니다.

implementation 'com.google.android.material:material:1.4.0'

그리고 app 테마를 MaterialComponents로 변경합니다.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- 다른 스타일 속성들 -->
</style>

툴바 추가

레이아웃 XML 파일에서 Toolbar 위젯을 추가합니다.

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

그리고 액티비티에서 Toolbar를 설정합니다.

val toolbar: MaterialToolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)

액션바 커스터마이징

액션바를 커스터마이징하여 추가적인 스타일링 및 동작을 구현할 수 있습니다. 예를 들어, 액션바에 메뉴 버튼을 추가하고 클릭 이벤트를 처리하는 방법은 다음과 같습니다.

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.menu_main, menu)
    return true
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when (item.itemId) {
        R.id.action_search -> {
            // 검색 액션 처리
            return true
        }
        // 다른 액션 항목들에 대한 처리
        // ...
    }
    return super.onOptionsItemSelected(item)
}

이제 Material Components를 사용하여 툴바와 액션바를 구현하는 방법에 대해 알아보았습니다. 이를 통해 안드로이드 앱의 디자인과 사용자 경험을 향상시킬 수 있습니다.

더 많은 자세한 내용은 Material Components documentation을 참고하시기 바랍니다.

목차

Material Components 추가

툴바 추가

액션바 커스터마이징