ツールバーの実装方法(表示まで) | Androidアプリ開発

この記事ではAndroidアプリ開発において、
ツールバーの実装方法として、ツールバーを表示するまでを紹介します。

テーマの設定

ツールバーを表示するには、アプリのテーマを専用のものに変更する必要があります。
変更しない場合にはツールバーを実装したActivityに遷移した瞬間にクラッシュします。

styles.xmlを開いてAppThemeのparentの欄を以下のように
“Theme.AppCompat.****.NoActionBar“に変更します。

res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

レイアウトの実装

android.support.v7.widget.ToolbarのViewをレイアウトに追加します。
以下が例です。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    >

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</LinearLayout>

コードの実装

最後にコードを実装しましょう。

ツールバーを実装するActivityの親クラスをAppCompatActivityにします。
あとは、toolbarオブジェクトを取得してsetSupportActionBarでセットするだけです。

ツールバーに表示するタイトル文字列を変更するには、
getSupportActionBar().setTitleを使用します。

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.tb);
        setSupportActionBar(toolbar);
        
        getSupportActionBar().setTitle("これはタイトルですよー");
    }
}

すると、以下のように表示されると思います。

ツールバーの背景色が全体レイアウトの背景色と同じなので、
表示されていないように見えますが、
これでツールバーは表示できています。

「android.support.v7.widget.Toolbarに変換できません」のエラーが出る場合

「android.support.v7.widget.Toolbarに変換できません」のエラーが出て、ビルドがうまくいかない場合は、
以下の記事にその原因と対処方法をまとめていますので、ご覧ください。

ツールバーのスタイルを設定

最後にツールバーのスタイルを設定して、
ツールバーらしい見た目にしましょう。

今回は例としてツールバー背景色を赤に、文字の色を白にしてみます。

ツールバー用のthemeを作成し、
backgroundに赤(#FF0000)、textColorPrimaryに白(#FFFFFF)を設定します。

res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="ToolbarTheme" parent="Theme.AppCompat.Light">
        <item name="android:background">#FF0000</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
    </style>

</resources>

次に、作成したthemeをツールバーに適用しましょう。
コードとしては以下になります。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/tb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ToolbarTheme"
        />

</LinearLayout>

これでアプリを起動すると以下のようになります。

無事、ツールバーらしい見た目になりました。

これでツールバーを表示するまでの実装は終了です。

その他の基礎的なツールバー実装方法

その他の基礎的なツールバー実装方法は以下の記事にまとめています。