Androidアプリの操作性を向上させるアクションバーをカスタマイズする

Androidアプリ開発
2024.10.29

今回は、Androidアプリ開発に欠かせない「アクションバー」について、基本的な知識から実装方法までをわかりやすくご紹介します！

アクションバーをうまく活用できるようになると、アプリの使いやすさやデザインが大きく向上します。この記事で、ぜひアクションバーの活用法を身につけてくださいね♪

アクションバーについて

アクションバーとは？

Androidアプリケーションの上部に表示されるナビゲーションとインタラクションを提供するUI要素です。ユーザーにアプリのタイトル、アイコン、アクションメニュー、ナビゲーション操作（戻るボタンやタブ切り替えなど、アプリの画面間の移動をサポートする機能）を提供し、アプリの操作性を向上させるために使用されます。

アクションバーでできること

  • アプリのタイトルとアイコンの表示
    アプリの名前やロゴを常に表示することで、ユーザーが利用中のアプリをすぐに認識することができます。また、画面名のタイトルも設定することができ、使用中の画面を認識することも可能になります。
  • アクションメニューの表示
    ユーザーは主要な操作（例えば設定画面の開放やアプリ内検索）に素早くアクセスすることが可能になります。
  • ナビゲーション機能
    ユーザーがアプリ内をスムーズに移動できるナビゲーション機能を提供します。各ナビゲーション要素を適切に活用することで、操作性がさらに向上させることができます。
  • カスタムビューのサポート
    より柔軟なデザインや機能が必要な場合に、検索バーなどのカスタマイズ要素を追加できます。

アクションバーを上手に活用することで、アプリ全体の操作性が向上し、ユーザーにとって使いやすいアプリに仕上がります♪

アクションバーの実装

AppCompatActivity を使用すると、アクションバーが自動的に有効になります。アクションバーは、アプリのテーマに基づいて表示されるため、特別な設定を追加せずに使用できます。これにより、アプリ全体で統一感のあるデザインが簡単に実現できます。

画面ごとに別々のタイトルを表示する

アクションバーにはアプリ名がデフォルトでタイトルとして表示されますが、画面ごとに異なるタイトルを設定することも可能です。

方法1: プログラムで変更する

getSupportActionBar() メソッドを使用し、指定したタイトルに変更することができます。

getSupportActionBar().setTitle("タイトル");

getSupportActionBar() メソッドについて
getSupportActionBar() は AppCompatActivity クラスにあるメソッドで、サポートライブラリの ActionBar のインスタンスを取得します。ActionBar のインスタンスを使うと、タイトルやアイコン、ナビゲーション機能などをカスタマイズすることができます。

方法2: XMLで変更する

AndroidManifest.xml ファイルで Activity の android:label 属性にタイトルを指定することができます。これにより、画面ごとに異なるタイトルをXMLから一括で設定できます。

AndroidManifest.xml

<activity
    android:name=".XXActivity"
    android:exported="false"
    android:label="タイトル" />
属性概要
android:nameActivityクラスのクラス名を指定
android:exportedActivityが他のアプリからアクセス可能かどうかを示す
trueはアクセスを許可し、falseはアプリ内部でのみ使用される
android:label対象の Activity のアクションバーに表示するタイトルを指定
直接文字列または、strings.xml に定義したリソースを指定

アクションメニューの表示

アクションメニューを表示するには、メニューリソースファイルを作成し、それをアクションバーに読み込む必要があります。メニューリソースファイルには、メニュー項目のアイコンやテキストを定義でき、設定画面や検索機能へのショートカットなどを提供することができます。

詳しい実装方法については、以下の記事をご覧ください。

Androidアプリの操作性を向上させるアクションバーをカスタマイズする
Androidアプリ開発に欠かせない「アクションバー」について、基本から実装方法までをわかりやすく解説。アプリの操作性やデザインを向上させるアクションバーの活用法を学び、ユーザーが使いやすいアプリを目指しましょう！
reidevnote.com
2024.10.29

ナビゲーション機能

戻るボタン

「戻るボタン」はアクションバーに表示され、ユーザーが前の画面に戻るためのナビゲーション手段です。これにより、ユーザーは複数の画面間をスムーズに移動できます

1.戻るボタンをアクションバーに表示する
onCreate() メソッド内で、getSupportActionBar().setDisplayHomeAsUpEnabled(true); を呼び出すことで、アクションバーに戻るボタンを表示します。

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

    // アクションバーに戻るボタンを表示
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

2.戻るボタンの動作を定義する
戻るボタンが押されたときにアクティビティを終了し、前の画面に戻るように、onOptionsItemSelected() メソッドをオーバーライドします。
Androidの標準ID（android.R.id.home）を使用しているため、通常の戻るボタンと同じように動作します。

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) { // Androidの標準IDを使用
        finish(); // 現在のアクティビティを終了して前の画面に戻る
        return true;
    }
    return super.onOptionsItemSelected(item);
}

カスタムビューのサポート

カスタムビューを使用すると、アクションバーに独自のデザインや操作性を取り入れることができるため、検索バー、ボタン、タイトルとサブタイトルを組み合わせた独自のUIをアクションバーに直接配置したい場合に非常に便利です。

1.カスタムレイアウトの作成
カスタムビューのレイアウトをXMLで作成します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="8dp">

    <TextView
        android:id="@+id/customTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="カスタムタイトル"
        android:textSize="18sp"
        android:textColor="@android:color/white" />

    <EditText
        android:id="@+id/searchField"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="検索"
        android:background="@android:color/white"
        android:layout_marginStart="16dp"/>
</LinearLayout>

2.アクションバーにカスタムビューを設定する
getSupportActionBar().setCustomView() メソッドを使用し、作成したレイアウトをアクションバーにセットします。

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

    // アクションバーの取得とカスタムビューの設定
    ActionBar actionBar = getSupportActionBar();
    if (actionBar != null) {
        actionBar.setDisplayShowCustomEnabled(true); // カスタムビューの表示を許可
        actionBar.setCustomView(R.layout.custom_action_bar); // カスタムビューのレイアウトをセット
    }
}

3.アクションバーのレイアウト設定
カスタムビューを有効にする際には、標準のタイトルやアイコンを非表示にして、カスタムビューを際立たせる設定など、表示方法を調整します。

if (actionBar != null) {
    actionBar.setDisplayShowTitleEnabled(false); // デフォルトのタイトルを非表示
    actionBar.setDisplayShowHomeEnabled(false); // デフォルトのアイコンを非表示
}

4.カスタムビュー内の要素にアクセス
カスタムビューに表示されたコンポーネントにアクセスして操作する処理を実装します。

こんな時は…？

アクションバーとUIの表示が重なってしまう

EdgeToEdge.enable()メソッドが設定されていると、システムバー（ステータスバーやナビゲーションバー）が透明化され、アプリのコンテンツが画面全体に広がるため、アクションバーとUIの表示が重なる場合があります。

以下のいずれかの方法で解消させることができます。

  1. EdgeToEdge.enable() メソッドを削除する
    これにより、システムバーの透明化が解除され、重なりを防ぐ
  2. fitsSystemWindows="true" 属性を使用する
    システムバーやアクションバーの領域を避けるようにレイアウトを調整し、重なりを解消
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <!-- コンテンツ -->
</LinearLayout>

アクションバーをカスタマイズしたい

アクションバーの背景色、アイコン、タイトルなどをカスタマイズしたい場合は、styles.xml とAndroidManifest.xml を使用して設定します。

styles.xml

<style name="MyCustomActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">#FF5722</item>
    <item name="colorPrimaryDark">#E64A19</item>
    <item name="colorAccent">#FFC107</item>
</style>

AndroidManifest.xml

<application
    android:theme="@style/MyCustomActionBar">
    ...
</application>

styles.xml でアクションバーのカスタマイズを定義し、AndroidManifest.xml にてテーマとして指定することで、アプリ全体に反映させることができます。これにより、デザインの統一が図ることができます。

ツールバーとして使用

Androidの新しいガイドラインでは、ActionBarの代わりにToolbarを使用することが推奨されています。Toolbar はより柔軟にカスタマイズでき、ActionBar と同様の機能を持っています。

Activity_XX.xml

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay" />

XXActivity.java

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Toolbar をレイアウトに配置し、setSupportActionBar() メソッドで Toolbar をアクションバーとして設定します。Toolbar は ActionBar よりも自由度が高く、ボタンやカスタムビューの追加も容易に行えます。

アクションバーとツールバーの違い

  • アクションバー
    Androidシステムが提供する標準的なUI要素です。アプリのタイトル、アイコン、ナビゲーション操作、アクションメニューなどが含まれており、アプリケーション全体で統一されたインターフェースを提供します。しかし、カスタマイズ性には制約があり、他のビューと組み合わせるなど柔軟なレイアウトには対応しづらいです。
  • ツールバー
    アクションバーの代替としてカスタマイズ性に優れたUI要素です。レイアウト内の任意の位置に配置でき、複数のツールバーを追加することも可能です。例えば、スクロールに合わせてツールバーを動かしたり、特定の画面で異なるツールバーを使用するなど、より柔軟なインターフェースを構築できます。

まとめ

いかがでしたでしょうか？
アクションバーとツールバーの基本的な使い方やカスタマイズ方法についてご紹介しました。

アクションバーをカスタマイズすることで、アプリの個性を引き出しつつ、より使いやすく、目的に沿った機能やデザインを実現させることができます。ぜひアクションバーやツールバーのカスタマイズに挑戦して、あなたのアプリをより魅力的に仕上げてくださいね♪

タイトルとURLをコピーしました