今回は、Android アプリの ActionBar
を非表示にし、代わりに Toolbar
をつける方法を紹介したいと思います🧑🔧
まずは、ActionBar
と Toolbar
の違いをみていきましょう。
ActionBar
ActionBar
は、画面上部に位置するバーで、画面のタイトルや重要なアクションなどを視覚的に分かりやすくするような目的で主に使用されます。また、ActionBar
は Activity
または、アプリレベルで共通した外観を提供することにも役立ちます。
Toolbar
Toolbar
は、ActionBar
と同様に画面のタイトルや重要なアクションなどを視覚的に分かりやすくなるような目的で使用されます。ActionBar
との違いは、TextView
などの UIコンポーネント同様にレイアウトファイルを作成して View
を定義できるので、ActionBar
よりもカスタマイズ性があることです。
また Toolbar
を ActionBar
として設定することもできるので、ほぼほぼ ActionBar
の上位互換と言えると思います🤔
実際につかってみる 🧑🏻💻
1.AndroidManifest.xml
で、android:theme="@style/AppTheme"
としている部分が標準では ActionBar
のスタイルに反映されるので、res>values>styles.xml
に移動して parent
に Theme.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.Toolbar
を androidx.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
を表示する Activity
の onCreate
メソッド内に Toolbar
を ActionBar
として表示する処理を書きます。setSupportActionBar
で toolbar
を指定しているところが該当箇所になります。また、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) }
ここで気を付けるべきポイントは、androidx
で Toolbar
を定義していた場合は、import android.widget.Toolbar
ではなく、import androidx.appcompat.widget.Toolbar
にするということです。自動で import
文が追加されていた場合などは、この違いにより setSupportActionBar(toolbar)
などのタイミングでコンパイルエラーになるので、注意が必要です。
import android.widget.Toolbar // ❌ import androidx.appcompat.widget.Toolbar // ⭕️
そしてアプリを起動するとこんな具合になりました🎉
参考
- https://stackoverflow.com/a/44516767/14219079
- https://qiita.com/tkmd35/items/a0af2b985491ddef7bc7
- https://www.letitride.jp/entry/2019/06/10/143854