[Android] Toolbar, FrameLayout, BottomNavigationView를 활용하여 상단바, 하단바 만들기 (#2 - ToolBar)

Android에서는 애플리케이션에 AppBar를 구현하기 위해 기본적으로 ActionBar를 제공한다.

 

 

여기서 ActionBar란?

안드로이드에서 기본적으로 제공하는 기능 중 하나로 사용자(개발자)가 커스터마이징하여 해당 앱에 맞게 사용할 수 있다. 우리가 흔히 말하는 '앱 상단바'! 안드로이드 개발에서는 AppBar라고 부른다.

 

 

그렇다면 AppBar가 ActionBar인가?

AppBar를 ActioinBar라고 부르기도 하지만, AppBar=ActionBar는 아니다! AppBar는 말 그대로 애플리케이션의 최상단에 있는 바를 말하는 것이고, 그것을 ActionBar로 구현할 수 있기 때문에 혼용하여 부를 뿐이지 같은 의미는 아니다.

 

 

혼용하여 부를 수 있다면 AppBar가 ActionBar나 마찬가지 아닌가?

AppBar에는 ActionBar만 있는 것이 아니다. 본 포스팅의 주제인 ToolBar 또한 AppBar의 한 종류이다. 최근에는 ActionBar보다 ToolBar를 활용한 AppBar 개발이 더 트렌디하다고 한다.

 

 

ActionBar 대신 ToolBar를 사용하는 이유는?

안드로이드의 버전이 점점 높아지고, 새로운 기능이 많아짐에 따라 ActionBar에는 다양한 기능이 많아졌다. 하지만 버전마다 다른 기능(상위 버전에 있는 기능이 하위 버전에 없는 등)은 사용자의 기기 버전에 따라 다르게 동작하는 결과가 발생하게 되었다.

 

다른 기기에서 동일한 결과로 동작하지 않는다면 바람직한 시스템이 아니기 때문에, 버전에 따라 동작이 달라지는 '파편화 문제'를 해결하고 '하위 호환성(BackWard Compatibility)'을 제공하기 위해 새로운 기능의 필요성이 대두된 것이다.

 

이렇게 등장한 새로운 기능이 v7 AppCompat 구글 지원 라이브러리이며, 이 라이브러리 속의 위젯으로 ToolBar를 구현할 수 있다. 결과적으로 v7 AppCompat의 툴바(androidx.appcompat.widget.Toolbar)를 사용하여 AppBar를 구현하면 기기 버전이 달라도 동일하게 동작하는 호환성 좋은 어플리케이션 개발이 가능하게 된 것이다. ToolBar는 Android 5.0 (API Level 21)부터 추가된 위젯(Widget)이며, 앱에서 가장 중요한 액션을 제공할 때 많이 이용한다.

 

 

결론: 호환성 등의 문제로 ActionBar 대신 ToolBar를 사용하여 상단바를 구현하는 것이 효과적이다!

 

 

 

ToolBar의 사용법

Activity 내부에 기본적으로 포함된 ActionBar와 다르게 ToolBar는 Activity의 XML에 위젯을 추가해야 한다. (Layout, Button 등과 동일하게 사용) XML에 androidx.appcompat.widget.Toolbar를 추가하고, 기본 ActionBar가 사용되지 않도록 NoActionBar를 선언해주어 ToolBar가 메인으로 노출될 수 있도록 한다. 모든 준비가 완료되었다면 Java 코드에서 setSupportActionBar()를 호출하여 ToolBar를 세팅한다.

 

 

ToolBar를 활용하여 상단바 구현하기

먼저 ToolBar의 디자인을 담당하는 XML 코드를 작성한다. res/layout 아래에 새로운 파일 toolbar.xml을 생성하였다.

 

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:minHeight="?attr/actionBarSize"
    android:background="#cae3ff">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:background="#00FFFFFF"
        android:gravity="center"
        android:src="@drawable/logo" />

</androidx.appcompat.widget.Toolbar>

※ Android는 버전 변화에 민감하기 때문에, 위젯의 명칭이 달라질 수 있다. 기존에는 <android.support.v7.widget.Toolbar> 태그로 툴바를 사용했다면, 현재는 위 코드와 같이 <androidx.appcompat.widget.Toolbar> 태그를 사용하여야한다. (버전에 맞지 않는 태그를 사용하면 오류 발생함!)

 

 

main_screen.xml (#1)

...
    <!-- 상단 툴바 -->
    <include
        layout="@layout/toolbar"
        android:id="@+id/toolbar" />
...

메인 화면의 틀을 담당하는 XML에 툴바 소스를 넣는다. 필자는 activity_main.xml에 초기 로딩 화면이 구현되어 있기 때문에 main_screen.xml이라는 파일을 새로 생성하여 이 파일을 activity_main처럼 사용하고 있지만, 개발자의 의도에 따라 메인 화면으로 구성될 XML 파일에 툴바 부분을 넣으면 된다.

 

toolbar.xml에 툴바 소스를 따로 구현했기 때문에 간단하게 include로 툴바를 불러온다. (toolbar.xml을 만들지 않고 위 코드에 바로 툴바 소스를 작성해도 무관하다.)

 

 

main_screen.xml (#2)

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater menuInflater = getMenuInflater();
    menuInflater.inflate(R.menu.navbar_btn, menu);
    return true;
}

onCreate() 함수 바깥에 onCreateOptionsMenu() 함수를 오버라이딩하여 ToolBar 우측 상단에 메뉴 버튼을 만든다.

 

 

navbar_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" >
    <item
        android:id="@+id/tb_menu"
        android:icon="@drawable/menu_icon"
        android:title="menu"
        app:showAsAction="always"
        android:orderInCategory="1" />
</menu>

MenuInflater로 불러올 navbar_btn.xml을 res/menu 밑에 구현한다. 메뉴 버튼 이미지(menu_icon)를 res/drawable 아래에 넣어주고 이미지로 설정한다.

 

 

MainScreen.Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_screen);
    ...

    // 상단 ToolBar 설정 (API 25 이후 AppBar 사용 X -> ToolBar로 대체)
    setSupportActionBar((Toolbar)findViewById(R.id.toolbar)); // 액션바를 툴바로 바꿔줌 (해당 액티비티에서 툴바를 사용하겠다는 의미)
    getSupportActionBar().setDisplayShowCustomEnabled(true); // 툴바 커스터마이징 활성화
    getSupportActionBar().setDisplayHomeAsUpEnabled(true); // 뒤로가기 버튼 활성화
    getSupportActionBar().setDisplayShowTitleEnabled(false); // 앱 기본 타이틀 없애기
    getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#cae3ff")));
    
    ...
}

마찬가지로 로딩화면이 구현되어 있기 때문에 MainActivity.java가 아닌 MainScreen.java 파일을 새로 만들어 사용한다. 툴바를 사용하기 위해서는 반드시 Java코드에 setSupportActionBar() 메소드를 호출해야한다. 그 외의 함수들은 선택사항(디자인 등)이다.