iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について1つぶやいています。まれに釣りについてつぶやく可能性があります。

【Kotlin】アプリにToolbarをつける

今回は、Android アプリの ActionBar を非表示にし、代わりに Toolbar をつける方法を紹介したいと思います🧑‍🔧

まずは、ActionBarToolbar の違いをみていきましょう。

ActionBar

ActionBar は、画面上部に位置するバーで、画面のタイトルや重要なアクションなどを視覚的に分かりやすくするような目的で主に使用されます。また、ActionBarActivity または、アプリレベルで共通した外観を提供することにも役立ちます。

Toolbar

Toolbar は、ActionBar と同様に画面のタイトルや重要なアクションなどを視覚的に分かりやすくなるような目的で使用されます。ActionBar との違いは、TextView などの UIコンポーネント同様にレイアウトファイルを作成して View を定義できるので、ActionBar よりもカスタマイズ性があることです。

また ToolbarActionBar として設定することもできるので、ほぼほぼ ActionBar の上位互換と言えると思います🤔

実際につかってみる 🧑🏻‍💻

1.AndroidManifest.xml で、android:theme="@style/AppTheme" としている部分が標準では ActionBar のスタイルに反映されるので、res>values>styles.xml に移動して parentTheme.AppCompat.Light.NoActionBar を設定します。これにより、システム標準の ActionBar が非表示になります。

<resources>
    <!-- Base application theme. -->
    <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>

2.次に Toolbar を表示する Activity のレイアウトファイルに Toolbar タグを追加します。下記のサンプルコードでは Toolbar の記述のみ抜粋していますが、androidx.appcompat.widget.Toolbarandroidx.constraintlayout.widget.ConstraintLayout に内包する感じでレイアウトを組んでいます。またタイトルを真ん中に表示したかったので、TextView を追加して android:layout_gravity="center" に設定することで実現しています。

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:elevation="5dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/app_name"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"
            tools:layout_editor_absoluteX="184dp"
            tools:layout_editor_absoluteY="16dp" />

    </androidx.appcompat.widget.Toolbar>

3.最後に、Toolbar を表示する ActivityonCreate メソッド内に ToolbarActionBar として表示する処理を書きます。setSupportActionBartoolbar を指定しているところが該当箇所になります。また、supportActionBar?.setDisplayShowTitleEnabled(false) を設定することにより、システム標準のタイトルが非表示になります。

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

        val toolbar = findViewById<Toolbar>(R.id.toolbar_main)
        setSupportActionBar(toolbar)
        supportActionBar?.setDisplayShowTitleEnabled(false)

    }

ここで気を付けるべきポイントは、androidxToolbar を定義していた場合は、import android.widget.Toolbar ではなく、import androidx.appcompat.widget.Toolbar にするということです。自動で import 文が追加されていた場合などは、この違いにより setSupportActionBar(toolbar) などのタイミングでコンパイルエラーになるので、注意が必要です。

import android.widget.Toolbar // ❌

import androidx.appcompat.widget.Toolbar // ⭕️

そしてアプリを起動するとこんな具合になりました🎉

参考

その他の記事

yamato8010.hatenablog.com

yamato8010.hatenablog.com

yamato8010.hatenablog.com