ActionBarに画像を表示する

はじめに

Androidアプリ作成において、ActionBarに画像を表示する方法のメモになります。

アイコンを表示する方法が出てきたり、ToolBarに差し替えましょう、とあったのですが、ロゴなどの画像をそのまま表示する方法は見受けられませんでした。

筆者はAndroidに詳しくなく、知っていれば簡単なのに検索しても簡易的な記事が見つからなかったので記事として残します。

環境は、

• AndroidStudio: 3.4.1
• Kotlin: 1.3.40-release-Studio3.4-1

です

結果

サンプルロゴは【Free Logo Maker — Create a Logo — Squarespace】で作成しました。

解法

手順としては、

1. 画像の取り込み
2. ImageViewのxmlを作成
3. ActionBarにCustomViewを設定

です。

1. 画像の取り込み

New -> Image Assets で画像の取り込み。

2. ImageViewのxmlを作成

今回はapp/res/layout/logo_image_view.xmlという名前で作成しました。

WidgetsのImageViewを追加し、取り込んだ画像を設定、レイアウトを整え点完了

3. ActionBarにCustomViewを設定

MainActivity.ktを開き、(2)で作成したImageViewをセットします

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // ActionBarにcustomViewを設定する
    supportActionBar?.setCustomView(R.layout.logo_image_view)
    // CustomViewを表示する
    supportActionBar?.setDisplayShowCustomEnabled(true)

    // ...
}

これだけで画像を表示するだけなら問題ないと思います、

おまけ: 画像を左寄せにするTips

logo_iamge_view.xmlをtextモードで開いて、ImageViewにandroid:scaleType="fitStart"を追加すればok

参考: Android layout - alignment issue with ImageView - Stack Overflow

おわり

サンプルリポジトリ(SampleAppImageViewOnActionBar)を置いておきます

画像の取り込み方の最適解も知らず、レイアウトも雰囲気なのでご指摘いただけると幸いです！