[Android] Custom App Bar 사용 - Kotlin

Application을 처음 실행 하였을 때, 가장 상단에 나오는 바(Appbar) 를 커스텀하고자 한다.

 

Toolbar는 안드로이드 5.0 이후로 추가된 위젯으로, 상단에 보이는 타이틀이 해당되며, 높은 빈도 혹은 가장 자주 사용되는 액션을 제공하는 Appbar를 만들 때 사용한다. 

 

안드로이드 5.0 이전에는 Actionbar로 불렸으나 이후로 바뀐듯 하다. 이전에는 Appbar를 생성할 때, Actionbar 클래스를 사용해 만들었으나 버전에 따라 다르게 동작하는 등의 문제로 자연스럽게 Actionbar를 대체하게 된 것이 바로 Toolbar라고 보면 될듯하다.

 

이전과 차이점이라고 한다면, 기존의 Actionbar는 고정된 상태였던 것에 반해

Toolbar는 Customizing이 자유로워 사용자가 원하는 디자인을 만들 수 있다는 차이점이 있다 한다.

 

다만, Actionbar가 액티비티 내부에 기본적으로 포함되어있었던 것에 반해 Toolbar는 다른 View 위젯과 다르게 취급되지 않기에 해당 액티비티에 위젯을 추가해야 하고, 기본적으로 제공되는 Actionbar를 disable 처리해야 한다.

 

그렇게 한 뒤, 액티비티에서 setSupportActionBar() 메소드를 호출하여 Toolbar로 해당 액티비티의 Appbar로 사용하는 것이다. 이러한 특징 때문에 고정된 상태였던 Actionbar대신 액티비티마다 다르게 표시할 수 있는 Toolbar가 많이 사용 된다.

 

Set up the Appbar 개발자 문서

[링크]

1. 기존 Native ActionBar 사용 중지

/res/values/themes.xml 에서 parent를 Theme.AppCompat.NoActionBar로 변경한다.
(NoActionBar 종류 중 아무거나 하나 골라도 무방할 것이라고 생각된다)

(다크 모드용이 따로 있을 수 있으므로 themes.xml이 2개인 경우 2개 모두 변경)

 

2. Activity의 Layout에 Toolbar 위젯 추가

<android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Toolbar를 Appbar로 사용하고있기 때문에 상단에 위치한다.

 

3. Activity

사용할 Activity의 Oncreate() 메소드에서 setSupprotActionBar() 메소드를 Call한다.

해당 메소드를 통해 Toolbar가 해당 Activity에서 Appbar로 기능할수 있도록 한다

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_my)
    // Note that the Toolbar defined in the layout has the id "my_toolbar"
    setSupportActionBar(findViewById(R.id.my_toolbar))
}

여기까지 한다면, ActionBar Utility 메소드를 사용할수 있고, 사용하기 위해서는 Activity에서 getSupportActionBar() 를 Call 하면된다. 해당 메소드를 통하여 ActionBar 객체 참조를 반환한다. 이를 통하여 ActionBar의 메소드를 호출하여 Appbar를 숨기기 위해 ActionBar.hide() 등의 행위가 가능하다.

Appbar 커스텀 개발자 문서

이제 Appbar를 만들었다면 이 Appbar를 만든 목적으로 본격적으로 커스텀해야 한다.

기본적으로 Appbar에 우리가 추가하고자 하는 버튼을 만들고자 하는 경우에 대해 먼저 설명하겠다.

Appbar에 추가할 수 있는 공간은 한정되어 있고,
1. 만약 앱이 Appbar에 넣을 수 있는 공간보다 더 많이 추가하는 경우 더보기 메뉴로 버튼들을 보내게 되고,
2. 혹은 공간이 충분히 있더라도 더보기 메뉴에 항상 표시되게 할 수도 있다.

 

1. res/menu/NewAction.XML

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- "Mark Favorite", should appear as action button if possible -->
    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite_black_48dp"
        android:title="@string/action_favorite"
        app:showAsAction="ifRoom"/>

    <!-- Settings, should always be in the overflow -->
    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          app:showAsAction="never"/>

</menu>

Appbar에 포함시킬 Action buttion을 추가하기위해 XML 파일 생성한다.

- app:showAsAction 속성은 Appbar에서 Button으로 표시할지 결정

    -> ifRoom으로 설정 시, 공간이 있는경우 버튼으로 표시하고 충분하지 않으면 더보기 메뉴에서 표시 (1번)

    -> never로 설정하면 Appbar에 표시하지않고 항상 더보기 메뉴에서 표시 (2번) 

 

2. Activity (Action의 Respond 처리)

override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
    R.id.action_settings -> {
        // User chose the "Settings" item, show the app settings UI...
        true
    }

    R.id.action_favorite -> {
        // User chose the "Favorite" action, mark the current item
        // as a favorite...
        true
    }

    else -> {
        // If we got here, the user's action was not recognized.
        // Invoke the superclass to handle it.
        super.onOptionsItemSelected(item)
    }
}

유저가 Appbar 항목 중 하나를 선택하면 앱 활동의 onOptionsItemSelected() 콜백 메소드를 호출한뒤 클릭된 항목을 나타내는 MenuItem 객체를 전달.

 

onOptionsItemSelected() 구현 할 때에는, MenuItem.getItemId() 메소드를 호출하여 어느항목이 확인할 수 있다. 반환된 ID는 <item> 요소의 android:id 속성에서 정의한 값과 일치해야한다.

Action View

Up Button와 Appbar내 에서 검색 텍스트를 입력할 수 있도록 바꾸는 등의 기능(Action View)과 Action Provider은 나중에 필요할 때 서술하도록 하겠다.