Android Toolbar 적용하기(deprecated된 ActionBar 대신 적용하기)

 Android Actionbar가 deprecated 되었습니다. 초기 Android service가 비 정상적인 동작으로 ActionBar를 사용하는 경우 다운되기도 하였습니다. 현재는 그 강제 종료되는 증상은 사라졌지만 deprecated 되었으니 새로운 Toolbar를 사용해야 합니다. Toolbar 사용법을 살펴보겠습니다.

API 21에 추가된 Toolbar 및 v7.widget.Toolbar

 API 21 Toolbar API 문서 : https://developer.android.com/reference/android/widget/Toolbar.html

 v7.widget.Toolbar API 문서 : https://developer.android.com/reference/android/support/v7/widget/Toolbar.html

하위 호환성을 위해서는 v7 widget의 Toolbar를 사용하는게 좋겠습니다.

이 툴바는 support.v7에 추가되었는데 21이상부터 사용이 가능합니다. 현재는 support.v7은 22입니다.

 구글 블로그 : http://android-developers.blogspot.kr/2014/10/appcompat-v21-material-design-for-pre.html

Toolbar가 적용 화면

 Toolbar가 적용된걸 확연하게 확인할 수 있는 부분은 바로 Google launcher와 Play store 입니다. 아래와 같이  최상단의 검색 부분입니다. 이 검색 부분은 커스텀 UI가 아닌 Toolbar를 활용한 모습입니다. 레이아웃의 마진을 줄 수 있고, 기존 Drawable 메뉴도 그대로 노출되어 있습니다. 

 - Toolbar를 활용하여 layout에 20dp의 margen이 들어간 레이어를 구현해보겠습니다.

 

진행 과정

- Android studio gradle에 dependencies 확인하기

 - No ActionBar 스타일 적용.

 - Toolbar layout 생성

 - Activity에 사용할 layout에 toolbar layout 적용

 - setSupportActionBar() 함수를 사용하여 적용하기

Android studio gradle에 dependencies 확인하기

 이번 글은 Android Studio 를 기반으로 설명합니다. 이클립스에서는 최신의 v7 라이브러리를 다운로드 받으시면 됩니다.

 생성한 프로젝트의 app.gradle(처음 프로젝트를 생성하면 app 디렉토리 아래에 app.gradle을 찾으시면 됩니다. 

dependencies {
    compile 'com.android.support:appcompat-v7:22.1.1'
}

위와 같이 추가되어 있는지 확인해주시면 됩니다. 21.0.0 이상이어야 v7.widget.Toolbar를 사용할 수 있습니다.

NoActionBar 스타일로 변경

 사용 중인 또는 신규 생성한 프로젝트에서 /res/values/styles.xml을 찾아갑니다. 기본적으로 생성된 프로젝트에는 AppCompat. NoActionBar가 아닌 다른 것으로 들어가있을 겁니다. 아래와 같이 NoActionBar 스타일로 변경해줍니다. 어떤 스타일이든 NoActionBar 스타일로 정의만 해주시면 됩니다.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

Toolbar layout 생성

저는 별도의 layout 파일인 toolbar.xml을 생성하였습니다. android.support.v7.widget.Toolbar가 있어야 하며, 꼭 appcompat-v7:21.0.0 이상의 Appcompat 버전을 가지고 있어야 합니다.

 아래 생성된 toolbar는 기본 actionBarSize를 가지며, 검정색 배경색을 가지고 있습니다. 별도 margin은 없습니다.

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>

Activity에 사용할 layout에 toolbar layout 적용

 저는 별도의 layout.xml을 생성하였기에 아래와 같이 include를 하였습니다. 기본적인 layout include만 해주면 됩니다.

 생성한 Toolbar는 위에어 별도의 margin을 주지 않았기에 아래와 같이 20dp의 margin을 임의로 적용하였습니다.

<include
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    layout="@layout/toolbar"
    android:layout_marginBottom="20dp"/>

setSupportActionBar() 함수를 사용하여 적용하기

 마지막으로 해주어야 할 작업은 아래와 같습니다. Toolbar UI는 setContentView 이후에 처리해주어야 합니다. 기존 설정 방법보다 할일은 좀 많아 지겠지만 원하는 UI 속성을 적용할 수 있겠습니다. 아래와 같이 setSupportActionBar를 처리해주시면 됩니다.

// Set a toolbar to  replace to action bar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
setSupportActionBar(toolbar);

Toolbar 로 변경하면서 생기는 장/단점

 장점으로는 액션바에 아래와 같이 Layout margin을 쉽게 줄 수 있다는 점입니다. 기존에는 커스텀으로 만들거나, 액션바를 커스텀 하기도 했던것 같습니다. 좀 더 쉽게 적용할 수 있게 되었습니다. 또한 ActionBar 속성을 그대로 가지고 있기때문에 기존에 제공하던 투명 설정도 그대로 유지할 수 있습니다.

 단점으로는 교체 비용이 발생하겠죠. 그래서 추천하는 방법은 액션바에 마진을 적용하는 등의 설정이 필요하다면 필요한 페이지에만 아래와 같은 Toolbar를 적용하는걸 추천드립니다.

Android Toolbar Example

 Github에 업로드한 Toolbar example 전체 코드입니다.

 Github : https://github.com/taehwandev/AndroidToolbarExample