안드로이드 Custom Toolbar 와 Theme 적용하기

오늘은 안드로이드 앱의 상단 헤더부분에 대해,

custom하게 디자인하는 방법을 알아보겠습니다.

이 헤더 부분에 대해서 Android에서는 ActionBar라는 이름으로 제공되고 있는데요.

이 ActionBar라는 것이 버전별로 다른 이름으로 다르게 제공되고 있어서 버전 호환 문제가 있습니다.

supportLibrary에서는 ToolBar 라는 이름으로, 헤더 부분을 제공해주고 있는데요.

보통은 이 ToolBar를 이용해야, 호환성 문제가 없기 때문에 ToolBar를 디폴트로 사용하게 됩니다.

기본적으로 제공하는 Toolbar(혹은 ActionBar)의 디자인만 이용해도 무리가 없지만,

좀더 커스터한 디자인을 사용하는 앱을 만들려고 할때,

어떻게 해야하는지 정리해 보겠습니다~.

1. Theme 정의

먼저, 커스텀에 적용할 Theme에 대해서 정의하고, Manifest에서 적용할 준비를 하려고 하는데요.

Styles.xml파일을 열어서, parent로 Theme.AppCompat.Light.NoActionBar로 지정해주고,

name을 지정한 후에, <item>으로 값들을 설정해줍니다.

이름에서 알수 있듯이 NoActionBar이기 때문에 ActionBar가 없는 상태가 되는 거구요.

windowContentOverlay 값을 null로 해주면, 툴바의 shadow값이 사라집니다.

(툴바밑에는 약한 그림자가 원래 존재하는데, 그것이 사라지는 거에요.)

아래와 같이하면, 아무것도 나오지 않는 Theme을 하나 만드는 것이 되구요.

위의 Theme를 부모로 받아들인, 어두운 색 버전의 툴바를 하나 만들어서 사용합니다.

물론 앱의 툴바가 하나의 디자인만 가지고 있다면 그렇게 해도 되지만, 

그렇지 않은 경우 아래와 같은 DarkVer이나 여러 버전들을 상황에 맞게 만들어 사용이 가능합니다.

여기서는 하나만 만들어 사용해보겠습니다.

마지막으로 다크버전의 툴바에 맞도록, overflow메뉴가 나올때 팝업메뉴의 Theme도 같이 설정해주면, style작업은 다 하는 것인데요.

(물론, overflow메뉴가 없다면, 이 작업도 필요하지는 않습니다.)

여기서는 하얀색 배경에 검은색 글씨가 나오도록 하고있습니다.

2. Manifest에서 Theme선언

이제 위에서 만든 Theme을 Manifest에서 선언하여 사용합니다.

3. include할 layout파일 생성

이번에는,  각 화면의 xml들에서, include할 툴바의 layout파일을 생성하겠습니다.

가장 상위에 엘리먼트로 Toolbar를 가져오는데, 하위호환성을 위해서, 꼭 support 라이브러리의 toolbar를 사용해줘야 합니다.

4. include할 layout파일 생성

필요한 페이지들에서 include해서 사용합니다.

5. Java파일에서 사용

카톡의 우측에 항상 옵션 메뉴들이 보이실텐데요.

친구나 채팅탭에 우측상단에 보시면 있는, 아이콘 메뉴들이 그것입니다.

이 메뉴들을 사용할려면, ActionBar로서 사용을 해야하는데요.

이 때 setSupportActionBar메소드를 사용하면, 저희가 만든 툴바를 ActionBar로서 사용이 가능해집니다.

이제 커스텀하게 툴바를 사용하는 것에 대해서 다 알아보았는데요.

마지막으로 setSupportActionBar소스에 관해서 쓱 보고, 마무리 하겠습니다.