Toolbar: Androidアプリケーションのツールバー

著者: IT Sectr 公開日: 2026-02-23 読了時間: 12 分

Toolbar(ツールバー)は、ActionBarを置き換えたAndroidコンポーネントで、画面のタイトル、ナビゲーション要素、アクションを表示します。ToolbarはMaterial Design Libraryの一部で、標準のタイトルからカスタムビューやアニメーションアイコンまで完全にカスタマイズ可能です。コンポーネントの詳細はMaterial Design 3の仕様をご覧ください。

重要なポイント

  • Toolbar — カスタマイズ可能なAndroidツールバー、Material DesignのActionBarの後継
  • ActionBar — Android 5.0以前に存在したシステムバー、Toolbarに置き換えられた
  • Material 3 — Top App Barに4種類のバリエーション: Small、Center-aligned、Medium、Large
  • Menu — action itemsを含むXMLメニュー、onCreateOptionsMenuでToolbarに統合
  • カスタマイズ — タイトル、ロゴ、ナビゲーションアイコン、カスタムビュー、アニメーション

Toolbarとは?

Toolbarは、Material Designライブラリ(androidx.appcompat.widget.Toolbar)のAndroidコンポーネントで、アプリ画面に柔軟なツールバーを提供します。Toolbarは旧式のActionBarを置き換え、開発者に外観と動作の完全な制御を提供します。レイアウトの任意の場所に配置でき、カスタム子ビュー、アニメーションを持ち、さまざまな画面サイズに適応できます。

Material Design 3(2026)はTop App Bar — Toolbarの進化形 — を4種類のバリエーションで定義しています:Small(コンパクト、48 dp)、Center-aligned(中央揃えタイトル)、Medium(拡大タイトル、112 dp)、Large(大型タイトル、168 dp)。各バリエーションには独自のスクロール動作があります:Smallは固定、MediumとLargeはコンテンツを上にスクロールするとSmallに折りたたまれます。

Toolbarは3つの主要ゾーンを表示します:ナビゲーションアイコン(左、通常はハンバーガーまたは戻る矢印)、画面タイトル(中央または左)、action items(右 — アクションアイコン、オーバーフローメニュー)。Toolbarにはロゴ、サブタイトル、カスタムビュー(検索ビュー、スイッチ)、そしてCoordinatorLayoutと組み合わせたアニメーションCollapsingToolbarLayoutを含めることができます。

ActionBar: 歴史と進化

ActionBarは、Android 3.0(API 11)で旧式のTitle Barの代替として登場したシステムAndroidバーです。ActionBarはActivityに強く結びついており、画面の上部に固定位置があり、カスタマイズオプションは限られていました。Android 5.0(Lollipop、2014)とAppCompatライブラリのリリースにより、GoogleはToolbarを柔軟な代替として導入しました。

ActionBarの主な欠点でToolbarが解決したもの:固定位置(上部のみ)、アニメーション不可、カスタムビューの困難さ、CoordinatorLayoutとCollapsingToolbarLayoutの問題。Googleは2015年にActionBarを非推奨(deprecated)と正式に宣言し、すべての新規プロジェクトにToolbarを推奨しています。Android 12(2021)以降、ActionBarは新しいMaterial 3テーマではデフォルトで無効になっています。

特徴ActionBarToolbar
位置上部固定レイアウト内の任意の場所
カスタマイズ制限あり(色、背景)完全(ビュー、スタイル、アニメーション)
折りたたみ非対応CollapsingToolbarLayout
アニメーションシステムのみ任意(ObjectAnimator、Transition)
Material 3非対応Small / Medium / Large App Bar

AndroidでのToolbar設定

Toolbarを使用するには:(1)ActionBarなしのテーマを設定し(Theme.Material3.NoActionBarまたはTheme.AppCompat.NoActionBar)、(2)XMLレイアウトにToolbarを追加し、(3)setSupportActionBarでActionBarとして設定します。その後、ToolbarはActionBarのすべての機能(メニュー処理、ナビゲーションアイコン、AndroidManifestからのタイトル)を取得します。

xml
<!-- Toolbar付きactivity_main.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:titleTextColor="@android:color/white"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        setSupportActionBar(toolbar)

        // ナビゲーションアイコンの設定
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // カスタムタイトル
        supportActionBar?.title = "ホーム"
        supportActionBar?.subtitle = "こんにちは、ユーザー!"
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }
}

Toolbarへのメニュー統合

ToolbarはonCreateOptionsMenuとonOptionsItemSelectedのコールバックを通じてAndroidメニューシステムと統合します。メニューはaction items — Toolbarの右側に表示されるアクションアイコンを定義します。action itemsが収まらない場合、自動的にオーバーフローメニュー(三点リーダー)に移動します。開発者はapp:showAsAction属性(always、ifRoom、never)でこれを制御します。

xml
<!-- res/menu/toolbar_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="検索"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="通知"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="設定"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "検索", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: CenterとLarge Top App Bar

Material 3はTop App Barの4つのバリエーションを導入しています:Small(コンパクト、48 dp)、Center-aligned(中央揃えタイトル)、Medium(拡大タイトル付き112 dp)、Large(大型タイトル付き168 dp)。MediumとLarge App Barは折りたたみ可能な動作をサポートし、コンテンツを上にスクロールするとスムーズにSmallに折りたたまれます。アニメーションはCoordinatorLayoutとAppBarLayoutで制御されます。

Center-aligned Top App Barは、タイトルがバーの中央に配置される新しいMaterial 3のバリエーションです。このスタイルはGoogleアプリ(Play Store、YouTube)でよく使用され、action itemsが最小限の画面に推奨されます。Small Top App Barは従来のToolbarで、古いAndroidバージョンと互換性があります。MediumとLargeはタイトルが重要な要素である画面(プロフィール、ホームページ)に適しています。

xml
<!-- CollapsingToolbarLayout付きMaterial 3 Large Top App Bar -->
<CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="168dp"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="画面コンテンツ..." />
    </NestedScrollView>
</CoordinatorLayout>

Toolbarの高度なカスタマイズ

Toolbarは完全なカスタマイズをサポート:高さの変更、表示/非表示のアニメーション、カスタム子ビュー、ロゴ、ナビゲーションアイコン、PopupMenu、CoordinatorLayoutとの統合。スクロール時の非表示アニメーションには、scroll、enterAlways、snapフラグ付きのAppBarLayoutを使用します。Toolbar下の画像パララックス効果には — mode parallax付きのCollapsingToolbarLayoutを使用します。

ロゴとサブタイトルはsetLogoとsetSubtitleメソッドで設定します。ナビゲーションアイコンはsetNavigationIconとsetNavigationOnClickListenerで構成します。カスタムビューはaddViewでToolbarに直接追加します。SearchViewにはactionViewClass付きのMenuItemを使用します。ダークテーマの場合、Material 3属性の色が自動的に適用されます。

kotlin
// Toolbarの高度なカスタマイズ
with (toolbar) {
    // ロゴとタイトル
    setLogo(R.drawable.ic_logo)
    setTitle("マイアプリ")
    setSubtitle("バージョン2.0")

    // ハンドラ付きナビゲーションアイコン
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // カスタムビュー — テーマ用Switch
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // カスタムPopupMenu
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

よくある質問

ToolbarとActionBarの違いは何ですか?

ActionBarはAndroid 3.0–4.4のシステムバーで、カスタマイズは制限されています。ToolbarはMaterial Designの柔軟なコンポーネントで、レイアウトの任意の場所に配置でき、アニメーション可能でカスタムビューで満たせます。ToolbarはsetSupportActionBarでActionBarを完全に置き換えます。

スクロール時にToolbarを非表示にするには?

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayoutを使用します。layout_scrollBehaviorでToolbarにscrollフラグを設定します。下にスクロールするとToolbarが非表示になり、上にスクロールするとアニメーション付きで表示されます。Material 3では、Medium/Large Top App BarがSmallに折りたたまれます。

Toolbarにはいくつのaction itemsを配置できますか?

制限は画面の物理的な幅です。2~4個のaction items(アイコン)が推奨されます。残りはオーバーフローメニュー(三点リーダー)に移動します。app:showAsActionで設定:always(常に表示)、ifRoom(スペースがあれば)、never(オーバーフロー内)。

ToolbarにSearchViewを追加するには?

SearchViewはメニュー内のアクションビューとして追加します。XMLメニュー:app:actionViewClass="androidx.appcompat.widget.SearchView"。SearchViewは自動的に検索アイコンに折りたたまれ、タップで展開します。SearchRecentSuggestionsProviderによる音声検索とオートコンプリートをサポートします。

CollapsingToolbarLayoutとは?

CollapsingToolbarLayoutはToolbarのコンテナで、コンテンツをスクロールするとアニメーション付きで折りたたまれます。CoordinatorLayoutとAppBarLayoutと共に使用します。モード:pin(固定)、parallax(パララックス効果)をサポート。ヘッダー画像のある画面(プロフィール、詳細ページ)に最適です。

まとめ

  • ToolbarはActionBarを置き換え、Material Designと完全に統合された柔軟なAndroidツールバー
  • Material 3 Top App Bar — 4つのバリエーション:Small、Center-aligned、Medium、Large(異なるスクロール動作)
  • ActionBarは非推奨のシステムバーで、カスタマイズとアニメーションが制限されている
  • メニューとaction items — always/ifRoom/neverフラグ付きXMLメニューによる統合
  • CollapsingToolbarLayout — ヘッダー画像のある画面でスクロール時にToolbarをアニメーション折りたたみ
  • カスタマイズ — ロゴ、サブタイトル、カスタムビュー、SearchView、PopupMenu、Material 3色
  • SearchView — 音声入力とオートコンプリート対応の内蔵アクションビュー

ターンキー方式のモバイルアプリケーションを開発します

IT Sectrは2017年からスタートアップや企業向けにiOS・Androidアプリケーションを開発しています。私たちがご相談に乗り、最適なソリューションをご提案します。

プロジェクトについて相談

こちらもお読みください