ActionBar vs ToolBar

AppBar(ActionBar)란?

- app Bar 는 action Bar 불리며 사용자에게 친근한 시각적 구조와 상호작용 요소를 제공하기 때문에 앱 Activity 에서 가장 중요한 디자인 요소 중 하나입니다.

- app Bar를 사용하면 다른 Android 앱과 일관되게 앱을 유지할 수 있으므로 사용자가 앱 작동 방법을 빠르게 이해하여 좋은 경험을 얻도록 할 수 있습니다. 

 

주요기능

- 사용자가 현재 app안에서 어느 위치에 있는지 알려주며,  app의 정해진 화면에 고유성을 부여한다. 

- 검색과 같은 사용자가 쉽게 예측 가능하게 중요한 행동에 접근 가능하게 한다. 

- navigation 및 화면 전환 지원(tap 또는 drop down 목록 포함)

 

 

 

1. Container (아래 항목들을 포함하고 표시한다)

2. Navigation icon (optional) ( drawer /  upButton)
3. Title (optional) (현재 앱의 어느위치에 있는지 알려줌)
4. Action items (optional) (현재 화면에서 중요한 메뉴)
5. Overflow menu (optional) (현재 화면에서 덜 중요한 추가적 메뉴)

 

 

 

형태는 여러가지가 될수 있다. 

1. Center-aligned
2. Small
3. Medium
4. Large

 

 

 

 

 

 

 

 

 

 

 

 

ActionBar / ToolBar

 

Android 3.0(API 수준 11)부터

기본 테마(<style name="Theme.AppName" parent="Theme.MaterialComponents.DayNight.DarkActionBar">)를 사용하는 모든 Activity 에 ActionBar가 앱 바로 제공됩니다.

 

하지만 앱 바 기능은 다양한 Android 출시를 통해 점차적으로 네이티브 ActionBar에 추가되어 왔습니다.

따라서 사용자의 기기가 어떤 버전의 Android 시스템을 사용하는지에 따라 네이티브 ActionBar가 다르게 동작합니다.

 

이에 비해, 가장 최근의 기능들은 Toolbar의 지원 라이브러리 버전에 추가된다. 이 지원 라이브러리를 사용할 수 있는 모든 기기에서 이들 기능을 사용할 수 있습니다.

 

그러므로 지원 라이브러리의 Toolbar 클래스를 사용하여 Activity의 앱 바를 구현해야 합니다.

지원 라이브러리의 Toolbar를 사용하면 앱이 수많은 종류의 기기에서 일관되게 작동하도록 할 수 있습니다.

 

예를 들어 Toolbar 위젯은 Android 2.1(API 수준 7) 이상이 실행되는 기기에서 머티리얼 디자인 환경을 제공하지만, 네이티브 Actionbar은 Android 5.0(API 수준 21) 이상이 실행되는 기기에서만 머티리얼 디자인을 지원합니다.

 

 

Toolbar 를 Appbar로 사용해보기.

 

1. AppTheme 에서 NoActionbar 설정하기.

 

manifest.xml 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.navigation" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppName" >

	.
    .
    .
    
    </application>

</manifest>

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.AppName" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>

        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

 

2. toolbar 생성.

 

activity_main.xml

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>

 

3. toolbar를 Appbar 로 설정하기.

 

Activity의 onCreate() 메서드에서 활동의 setSupportActionBar() 메서드를 호출하고 Activity의 툴바를 전달합니다.

이 메서드는 툴바를 Activity의 앱 바로 설정합니다

 

MainActivity.kt

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

 

앱 바 유틸리티 메서드 사용하기

toolBar를 Activity의 Appbar로 설정하면 지원 라이브러리의 ActionBar 클래스에서 제공하는 다양한 유틸리티 메서드에 액세스할 수 있습니다. 이러한 방식으로 여러 유용한 작업을 할 수 있습니다(예: 앱 바 숨기기 및 표시).

 

ActionBar 유틸리티 메서드를 사용하려면 활동의 getSupportActionBar() 메서드를 호출합니다.

이 메서드는 appcompat ActionBar 객체 참조를 반환합니다. 이러한 참조가 있으면 어떤 ActionBar 메서드라도 호출하여 앱 바를 조정할 수 있습니다. 예를 들어 앱 바를 숨기려면 ActionBar.hide()를 호출합니다.