AndroidでSnackbarのレイアウトをカスタマイズする方法を実例付きで解説

この記事では、AndroidアプリにおいてSnackbar（スナックバー）のレイアウトをカスタマイズする方法を、実際のコード例とともに段階的に解説します。背景色やテキストカラー、フォントの変更など、デフォルトのSnackbarを見た目よくカスタマイズしたい方はぜひ参考にしてください。

Snackbarのカスタマイズでできること

標準のSnackbarは黒背景に白文字が基本ですが、以下のようなカスタマイズが可能です。

• 背景色の変更
• メッセージテキストやアクションボタンの文字色変更
• 独自フォント（Typeface）の適用

実装手順

ステップ1：新規プロジェクトを作成する

Android Studioを開き、File → New Projectを選択して、必要な項目を入力し新しいプロジェクトを作成します。

ステップ2：activity_main.xmlにコードを追加する

次のコードを res/layout/activity_main.xml に追加します。ここでは、Snackbarを表示するためのボタンを1つ配置しています。

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center"
    tools:context="com.androidmads.ajts.customsnackbar.MainActivity">
    <Button
        android:id="@+id/btn4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@color/colorAccent"
        android:text="Custom Snackbar"
        android:textColor="@android:color/white" />
</LinearLayout>

ステップ3：MainActivity.javaにコードを追加する

次に、src/MainActivity.java に以下のコードを記述します。ポイントは、SnackbarのViewから内部のTextView（メッセージ用・アクション用）を取得し、それぞれにフォントや文字色を設定している点です。

package com.androidmads.ajts.customsnackbar;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Build;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.TextView;
import static java.security.AccessController.getContext;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.btn4).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar mSnackBar = Snackbar.make(v, "Custom Color", Snackbar.LENGTH_LONG);
                TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_text);
                TextView actionTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_action);
                mSnackBar.getView().setBackgroundColor(Color.WHITE);
                Typeface font = Typeface.createFromAsset(getAssets(), "LatoRegular.ttf");
                mainTextView.setTypeface(font);
                actionTextView.setTypeface(font);
                mainTextView.setTextColor(Color.BLACK);
                actionTextView.setTextColor(Color.BLACK);
                mSnackBar.setAction("UNDO", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Snackbar.make(view, "Action!", Snackbar.LENGTH_SHORT).show();
                    }
                });
                mSnackBar.show();
            }
        });
    }
}

このコードでは、以下のカスタマイズを行っています。

• setBackgroundColor(Color.WHITE) でSnackbarの背景を白に変更
• Typeface.createFromAsset() を使って、assetsフォルダ内の「LatoRegular.ttf」フォントを適用
• メッセージとアクションボタンの両方の文字色を黒（Color.BLACK）に設定
• setAction("UNDO", ...) で「UNDO」ボタンを追加し、タップ時に別のSnackbarを表示

ステップ4：AndroidManifest.xmlを確認する

Manifests/AndroidManifest.xml には以下のようにMainActivityをランチャーアクティビティとして登録します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.androidmads.ajts.customsnackbar">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

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

それでは、実際にアプリを起動してみましょう。Android端末をPCに接続した状態で、Android StudioのツールバーにあるRunアイコンをクリックします。接続したモバイルデバイスを選択して実行すると、端末に初期画面が表示されます。

画面上の「Custom Snackbar」ボタンをタップすると、白背景・黒文字・カスタムフォントが適用されたSnackbarが下部に表示され、「UNDO」アクションボタンも機能します。

まとめ

Snackbarのカスタマイズは、Viewから内部のTextViewを取得してスタイルを上書きするだけで簡単に実現できます。背景色・文字色・フォントを変更することで、アプリのデザインに合わせた統一感のあるUIを作れます。Material Designコンポーネントを使いこなして、より洗練されたAndroidアプリを目指しましょう。