ツールバーに戻るボタンの表示と処理を実装する方法 | Androidアプリ開発

この記事ではAndroidアプリ開発において
ツールバーに戻るボタンの表示および処理を実装する方法を紹介します。

この記事の内容を実践すると下図のように、
ツールバー上にもどるボタンを表示し、
もどるボタンを押すことで処理を実行させることが可能となります。
(※下図の例ではもどるボタン押下でアプリ終了としています)
戻るボタンの例
スポンサーリンク

ツールバーを表示するまで

ツールバーを表示するまでについては以下の記事を参照ください。
スポンサーリンク

戻るボタンを表示する

戻るボタンを表示するには、
setDisplayShowHomeEnabledを引数trueで実行します。

また、戻るボタンを押したときに処理をさせるときは、
setDisplayHomeAsUpEnabledを引数trueで実行します。


MainActivity.java
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("ツールバータイトル");

        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}
実行すると以下のようになります。
ツールバーに戻るボタンを表示した図

戻るボタンの色を変える

上図を見ると、戻るボタンの色とツールバーのタイトル色が異なっています。
色を揃える方法を紹介します。

戻るボタンの色を変えるには、
ツールバーのテーマのtextColorSecondaryの設定値を変更します。

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>
        <item name="android:textColorSecondary">#FFFFFF</item>
    </style>

</resources>
この状態でアプリを起動すると、
以下のようになり、色を揃えることができました。
ツールバーの戻るボタンの色を変更した図
スポンサーリンク

戻るボタンの処理を実装する

ここまでで戻るボタンを表示してボタンを押せるようになってはいますが、
まだ、戻るボタンを押したときの処理が実装されていません。

戻るボタンの処理を実装するにはonSupportNavigateUpをオーバライドします。

ここでは例として、
ボタンを押したときにアクティビティを終了するコードを実装します。

MainActivity.java
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("ツールバータイトル");

        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onSupportNavigateUp() {
        finish();

        return super.onSupportNavigateUp();
    }
}
この状態でアプリを起動し、
ツールバーの戻るボタンを押すとアクティビティが終了する処理が実行されるはずです。
スポンサーリンク

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

その他の基礎的なツールバー実装方法は以下の記事にまとめています。
Androidアプリ開発
スポンサーリンク
Androidアプリ開発 記事一覧
Androidアプリ開発 記事一覧
Androidアプリ開発の記事一覧を以下にまとめています。
良かったらご覧ください。

Androidアプリ開発 記事一覧
カテゴリ広告: Androidアプリ開発
スポンサーリンク: Androidアプリ開発を個人レッスンで学ぶなら...?
Androidアプリ開発は一人で学んでいても限界があります。
そこでオススメなのがオンラインでAndroidアプリ開発を学べる「コードキャンプ」。
個人レッスンで丁寧に教えてくれます。

無料レッスン体験も可能なので、まずは無料体験から試してみてはいかがでしょうか?

Androidアプリ開発個人レッスン
一般広告: モバイルバッテリー
スポンサーリンク
Aresei-note
タイトルとURLをコピーしました