AndroidStudio: Toolbar を使おうと思ったらやることが多かった

ハンバーガーメニューを作りたかっただけなのに..............

Dependencie に追加(なぜかエラーからは直接入れ込んでくれない)

バージョンは新しいのを教えてくれるはず。

dependencies {
    implementation 'androidx.appcompat:appcompat:1.4.1'
}

 

既存のActionBar を消す

方法1

AndroidManifest.xml に直接 theme を打ち込む(これは勘で書いてます)

AndroidManifest.xml

<application
    //省略
    android:theme="@style/Theme.MaterialComponents.DayNight.NoActionBar">

方法2

themes.xml で style を作ってそれを AndroidManifest.xml におく

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <!-- ここにもともとのテーマ -->
    <style name="Theme.AppName" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>


    <!-- これを選択 -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

AndroidManifes.xml

<application
    //省略
    android:theme="@style/AppTheme">

今回は MaterialComponent(MaterialButton) などを使っているので NoActionBar もちゃんとそれを継承したものを使わないといけなかった。
使わないとアプリが落ちる。
エラー見ればわかるけど普通にめんどくさいだろこれ。

Toolbar を Activity に import するとき

偽物が紛れ込んでいるので注意がいる。

import androidx.appcompat.widget.Toolbar

 

Toolbar を配置する方法1

***** toolbar は layout ディレクトリ下に作成 *****

layout/toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:flow_horizontalAlign="end"
    app:title="@string/app_name"
    app:titleTextColor="?attr/colorOnPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:navigationIcon="@drawable/ic_baseline_menu_24">


</androidx.appcompat.widget.Toolbar>

見た目

今回自分のアプリの名前が todolist なのでそのままそれが反映されている。 ここ

app:title="@string/app_name"

こいつを inflate するために layout に id をふる。

一番下の行が大事

<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity"
    android:id="@+id/activity_main">

Toolbar をそれぞれの Activity でよびだす。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val root = findViewById<View>(R.id.activity_main).parent as ViewGroup
    val toolbar: Toolbar = LayoutInflater.from(this).inflate(R.layout.toolbar, root, false) as Toolbar
    root.addView(toolbar, 0)
    setSupportActionBar(toolbar)
}

Toolbar を配置する方法2

***** toolbar は layout ディレクトリ下に作成 *****

layout/toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<merge>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:flow_horizontalAlign="end"
    app:title="@string/app_name"
    app:titleTextColor="?attr/colorOnPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:navigationIcon="@drawable/ic_baseline_menu_24">

</androidx.appcompat.widget.Toolbar>
</merge>

任意の layout 内にこれを配置

include がとても大事

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity"
    android:id="@+id/activity_main">
    <include layout="@layout/toolbar"/>

</androidx.constraintlayout.widget.ConstraintLayout>

これを Activity 内で呼び出す。

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

    val toolbar:Toolbar = findViewById(R.id.toolbar)
    setSupportActionBar(toolbar)
}

toolbar の merge たぶんいらんわ orz.......

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA