Androidでカスタムアクションバーを作成する方法をわかりやすく解説

Androidアプリ開発において、アクションバー（Action Bar）は画面の最上部に表示されるヘッダーのような役割を担う重要なUI要素です。すべての画面で共通のアクションバーを使い回すこともできますし、特定のアクティビティごとに個別のデザインを適用することも可能です。

本記事では、Androidでカスタムアクションバーを作成する具体的な手順を、サンプルコードとともにステップ形式で解説していきます。

手順1：Android Studioで新規プロジェクトを作成する

まずはAndroid Studioを起動し、メニューから「File」→「New Project」を選択して、必要事項を入力しながら新しいプロジェクトを作成しましょう。

手順2：activity_main.xml にレイアウトを記述する

res/layout/activity_main.xml に以下のコードを追加してください。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">
    <TextView
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "Custom Action Bar"
        android:textSize = "20sp"/>
</LinearLayout>

手順3：MainActivity.java にカスタムアクションバーの処理を記述する

次に、src/MainActivity.java に以下のコードを追加します。ここでは setCustomView() メソッドを使って、独自に作成したレイアウトをアクションバーとして設定しています。

import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        getSupportActionBar().setDisplayShowCustomEnabled(true);
        getSupportActionBar().setCustomView(R.layout.custom_action_bar);
        //getSupportActionBar().setElevation(0);
        View view = getSupportActionBar().getCustomView();
        TextView name = view.findViewById(R.id.name);
        name.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "You have clicked tittle", Toast.LENGTH_LONG).show();
            }
        });
    }
}

手順4：custom_action_bar.xml を作成する

続いて、resフォルダ配下にアクションバー用のレイアウトファイル custom_action_bar.xml を新規作成し、以下のコードを記述します。この例では、左側にアイコンとタイトル（Instagram）、右側にメール・送信アイコンを配置した、Instagram風のデザインになっています。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content"
    android:gravity = "center_vertical"
    android:padding = "10dp"
    android:weightSum = "1">
    <LinearLayout
        android:layout_width = "0dp"
        android:layout_height = "match_parent"
        android:layout_weight = "0.6">
        <ImageView
            android:layout_width = "wrap_content"
            android:layout_height = "match_parent"
            android:src = "@drawable/ic_face_red_400_24dp" />
        <TextView
            android:id = "@+id/name"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:layout_marginLeft = "10dp"
            android:text = "Instagram"
            android:textSize = "20sp"
            android:textColor = "#000"
            android:textStyle = "bold"
            app:fontFamily = "@font/allan_bold" />
    </LinearLayout>
    <LinearLayout
        android:layout_width = "0dp"
        android:layout_height = "match_parent"
        android:layout_marginRight = "10dp"
        android:layout_weight = "0.4"
        android:gravity = "end">
    <ImageView
        android:layout_width = "wrap_content"
        android:layout_height = "match_parent"
        android:src = "@drawable/ic_local_post_office_red_400_24dp" />
    <ImageView
        android:layout_width = "wrap_content"
        android:layout_height = "match_parent"
        android:layout_marginLeft = "20dp"
        android:src = "@drawable/ic_send_red_400_24dp" />
    </LinearLayout>
</LinearLayout>

アプリを実行して動作を確認する

それでは、実際にアプリケーションを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続していることを前提に説明します。

Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーにある「Run」アイコン（）をクリックしてください。表示される候補の中から自分のモバイルデバイスを選択すると、端末上にアプリの初期画面が表示されます。

アクションバーの影（シャドウ）を消す方法

デフォルト状態では、アクションバーの下部に影が表示されます。このシャドウを削除したい場合は、MainActivity の onCreate() 内で以下のように setElevation(0) を呼び出します。

this.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setCustomView(R.layout.custom_action_bar);
getSupportActionBar().setElevation(0);
View view = getSupportActionBar().getCustomView();

再度アプリを実行すると、影のないフラットなカスタムアクションバーが表示され、以下のような出力結果になります。