App bar
Toolbar & ActionBar
App bar
#01 App bar?? Toolbar? ActionBar?안드로이드 앱 상단에는 타이틀과 여러 액션 아이콘들이 있는 툴 바(Tool Bar) 형태의 UI가 있습니다.
앱 바(App Bar), 툴바(Toolbar), 액션바(ActionBar)라는 용어로 혼용되어 불리는데, 어떤 용어로 불러야 할지 헷갈리는 경우가 있습니다.
결론부터 말하면 세 용어 모두 이용 가능합니다.
#02 App bar앱 바는 액션 모음이라고도 불리며 사용자에게 친근한 시각적 구조와 대화형 요소를 제공하기 때문에 여러분의 앱 활동에서 가장 중요한 디자인 요소 중 하나입니다.
안드로이드에서는 공식적으로 이 UI를 App bar라고 부르며, App bar를 구현하는 기술적인 UI 요소에는 Toolbar와 ActionBar가 있습니다.
즉, App bar를 Toolbar로 구현하느냐, ActionBar로 구현하느냐 차이입니다.
통상적으로 쓰이는 툴바(Tool Bar)의 개념 "자주 사용하는 기능들을 막대 모양의 아이콘들로 나란히 모아 놓은 메뉴."과는 별개로 안드로이드에서는 툴바(Toolbar)라는 UI 요소가 있습니다.
#03 App bar > (Toolbar != ActionBar)App bar를 구현하는 ActionBar와 Toolbar의 차이점과 App bar를 구성하는 UI에 대해 알아보겠습니다.
ActionBar
#04 ActionbarActionBar는 안드로이드 3.0 (API 11)부터 지원하는 툴 바(Tool Bar)입니다.
Up button : 앱의 상위 화면으로 이동합니다.
Icon : 앱 아이콘이나 다른 로고나 브랜드로 교체할 수 있습니다.
View Control : 앱 타이틀이나 정보 또는 Drop down 메뉴나 Tap 컨트롤 등을 이용할 수 있습니다.
Action button : 앱의 액션들을 표시합니다. 만약 공간이 부족하면 액션 오버플로우에 들어갑니다.
Action overflow : 자주 이용하지 않는 액션은 액션 오버플로우에 배치합니다.
요즘 앱에서는 볼 수 없는 Icon과 여러 UI들이 겉보기엔 어딘가 예스러워 보입니다.
안드로이드 3.0이 2011년도에 출시되었기 때문에 6년이나 지났기도 했지만, 현재는 ActionBar가 아닌 Toolbar를 이용해 App bar를 만들기 때문입니다.
#05 https://developer.android.com/reference/android/app/ActionBar.html?hl=ko
#06 앱 바 추가 가이드ActionBar가 Decrecated 되지는 않았지만 Toolbar 보다 장점도 없고, 구글 공식 가이드에서도 ActionBar 보다는 Toolbar를 이용하기 권장하기 때문에 Toolbar를 씁시다.
참고로 안드로이드에서는 Up button과 Back button이 서로 구분되어 있습니다.
#05 Back button & Up buttonUp button
상위 버튼(Up button)은 같은 앱 내에서 상위 화면으로 이동할 때 이용합니다.
따라서 현재 화면이 앱 최상위인 경우에는 상위 버튼을 표시해선 안됩니다.
Back button
이전 버튼(Back button)은 앱이 아닌 시스템에서 제공하는 버튼으로, 사용자가 이전에 본 화면으로 이동할 때 이용합니다.
같은 앱 내에서는 상위 화면으로 이동한다는 점에서 Up button과 Back button 동작이 같을 순 있지만, 다른 앱으로 이동할 수 있는 Back button과 달리 Up button은 같은 앱 내에서만 이동이 가능합니다.
Toolbar
#06 ToolbarToolbar는 안드로이드 5.0 (API 21)부터 지원하는 기본 툴 바(Tool Bar)입니다.
Nav icon : Navigatoin drawer를 열거나, Up button을 통해 상위 화면으로 이동합니다.
Title : 제목을 표시합니다.
Filter icon : 페이지 필터를 표시합니다.
Action icon : 앱의 액션들을 표시합니다. 만약 공간이 부족하면 Menu icon에 들어갑니다.
Menu icon : 자주 이용하지 않는 액션은 Menu icon에 배치합니다.
앞서 설명대로 현재는 ActionBar가 아닌 Toolbar를 이용해 App bar를 구현합니다.
좀 더 자세히 설명하면, ActionBar가 안드로이드 3.0에서 기본적으로 지원된 후부터 점차적으로 새로운 기능들이 추가되었습니다. 그 결과 안드로이드 OS 버전에 따라 ActionBar가 지원하는 기능의 범위가 달라지게 되었고, 결국 OS 버전에 따른 파편화 문제가 발생했습니다.
이와 달리 Toolbar는 Support library를 통해 지원되고 있기 때문에 ActionBar와는 달리 일관된 동작을 보장할 수 있습니다.
사실 ActionBar도 Support library를 통해 구현할 수 있습니다.
https://developer.android.com/reference/android/support/v7/app/ActionBar.html
#07 ActionBar & Toolbar그리고 Toolbar는 ViewGroup을 상속받아 구현하기 때문에, 단순히 Object를 상속받아 구현한 ActionBar보다 좀 더 유연합니다.
App bar를 구현하는 거뿐만 아니라, 일반 View처럼 독립적인 요소로 앱의 어디에서나 이용할 수 있고 여러 동작 이벤트에도 반응할 수 있습니다.
Add Toolbar as App bar
Toolbar를 App bar로 이용하기 위한 구체적인 구현 방법은 아래 링크에 나와 있습니다.
직접 구현해도 좋지만 Android Studio에서는 기본적으로 Toolbar가 적용된 Activity를 생성해주는 기능이 있습니다. 이 기능을 이용하면 아래와 같이 자동으로 Toolbar가 적용된 코드들을 생성해 줍니다.
#08 Android Studio 3.0 beta
#09 Activity with Toolbar
#10 layout xml with Toolbar이 뿐만 아니라 Nav icon, Action icon, Menu icon을 구현하는 방법들도 있으니 아래 링크들을 참고해 주시기 바랍니다.
App bar icons
#11 App bar iconsApp bar에는 3가지 종류의 아이콘이 있습니다.
Nav icon/Up icon
Action icon
Menu icon
Nav icon/Up icon
Nav icon : Navigatoin drawer를 열 때 이용하는 아이콘입니다.
Up icon : 상위 화면으로 이동하는 아이콘입니다.
오른쪽 이미지를 보시면 Nav icon과 Up icon 간 변환되는 애니메이션을 볼 수 있습니다.
개발자 입장에서는 별도의 커스텀한 작업 없이 안드로이드에서 기본으로 제공하는 코드를 이용하면, 오른쪽 이미지와 같이 애니메이션을 볼 수 있습니다.
뿐만 아니라 Nav icon과 Up icon 이미지도 안드로이드에서 기본으로 제공하는 이미지를 쓰기 때문에, 별도의 공수나 추가 이미지로 인한 앱 용량 증가도 없습니다.
즉, 안드로이드에서 제공하는 기본 Nav icon과 Up icon을 이용하면 정말 편합니다.
하지만 많은 앱에서는 기본 제공이 아닌, 고유의 아이콘들을 이용하는데, 특유의 콘셉트도 없이 일단 이용하는 모습을 보면 개인적으로 이해가 가지 않습니다.
특이 사항이 없으면 안드로이드 기본 Nav icon/Up icon을 이용하시기 바랍니다.
Action icon
어떤 순서로 표시하나요?
App bar에 Action icon이 몇 개나 들어가나요?
Action icon 크기는 어떻게 되나요?
사실 Action icon 노출 순서는 어떤 아이콘이 더 자주 이용될지 중요도에 따라 마음대로 구성할 수 있습니다.
하지만 디바이스의 화면 크기에 따라 일부 Action icon들은 Menu icon에 들어갈 수도 있습니다.
안드로이드에서는 FIT 방식으로 노출 순서를 정하기를 권장하고 있습니다.
F, I, T 조건을 만족시키는 Action icon들에 우선순위를 높게 두고 노출 순서를 정하시기 바랍니다.
F — 주기(Frequent)
사용자가 이 화면에 들어왔을 때 이 액션을 적어도 7할 이상 사용할까요?
사용자가 이 액션을 일반적으로 연달아 사용할까요?
이 액션을 매번 여러 단계에 걸쳐 실행하도록 한다면 사용하기 부담스러울까요?
I — 중요(Important)
이 액션이 진짜 멋진 기능 혹은 장점이라고 생각하기 때문에 모두가 쉽게 알아채도록 하고 싶나요?
이례적인 경우라 해도 필요할 때 쉽게 접근할 수 있어야 하는 어떤 이유가 있나요?
T — 전형(Typical)
이 액션은 다른 비슷한 애플리케이션들에서도 일반적으로 가장 먼저 표시하는 액션인가요?
이 상황에서, 이 액션이 액션 오버플로우 속에 묻혀 있다면 사람들이 당황할 수도 있나요?
#12 Width of Action icon & Menu icon기본적으로 App bar 너비의 50% 까지만 Action icon과 Menu icon 표시에 이용할 수 있습니다.
따라서 App bar에 표시할 수 있는 Action icon의 개수는 제한적입니다.
화면의 dp 사이즈에 따라 표시할 수 있는 Action icon의 크기는 아래와 같습니다.
360 dp 이하 = 2 icons
360 ~ 499 dp = 3 icons
500 ~ 599 dp = 4 icons
600 dp 이상 = 5 icons
#13 Icons count위의 표에서 "o"는 액션 바 항목을, "="는 오버플로우 아이콘을 가리킵니다.
Action icon의 크기는 아래와 같습니다.
mdpi : 18 * 18 (pixel)
hdpi : 27 * 27 (pixel)
xhdpi : 36 * 36 (pixel)
xxhdpi : 54 * 54 (pixel)
xxxhdpi : 72 * 72 (pixel)
이를 직접 만들 수도 있지만, 구글에서는 기본적으로 제공하는 Action icon들이 있습니다.
아래 material icons에 들어가서 "action" 카테고리를 보시면 됩니다.
구글 기본 앱들도 이 아이콘들을 이용하기 때문에 특별한 이유가 없는 한 이 아이콘들을 이용하시기 바랍니다.
Menu icon
Action icon을 표시할 공간이 부족하거나, Action icon을 노출시키지 않도록 설정한 경우에 Menu icon이 표시됩니다. Menu icon을 누르면 미리 지정한 Action icon의 Title이 Text 형태로 보이게 됩니다.
Toolbar의 Action icon을 표시할 때 설정하기 위해서는 menu.xml을 작성해야 합니다.
아래 xml 코드를 보면 showAsAction이라는 Action icon을 표시하는 시기와 방법을 지정하는 부분이 있습니다. 이 값에 따라서 Action icon이 어떻게 표시될지가 결정됩니다.
SHOW_AS_ACTION_NEVER : 항상 Menu icon에 들어가 있습니다.
SHOW_AS_ACTION_ALWAYS : 항상 Action icon 형태로 표시합니다.
SHOW_AS_ACTION_IF_ROOM : Action icon을 표시할 공간 여유가 있을 때만 표시합니다.
SHOW_AS_ACTION_WITH_TEXT : Action icon과 Text를 함께 표시합니다.
https://material.io/guidelines/layout/structure.html? hl=ko#structure-app-bar
앱을 실행했을 때 보이는 첫 화면의 App bar만 봐도 기획과 개발에 얼마나 신경 썼는지가 보입니다.
상황에 맞게 적절하게 구현하시기 바랍니다.
