【Android / Kotlin】Toolbar と戻るボタンを実装

14623 ワード
Android toolbar Kotlin AndroidX Android テキストリンク

はじめに

Kotlin で開発をしていてツールバーを実装したい場面があった。
難しいことはほとんどないのだが、地味につまずいた箇所があったので備忘録としても記事として残す。

※ Support Libraryは AndroidX を採用

学習のために作成したサンプルアプリ概要

アクティビティにツールバーと戻るボタンを設置して、戻るボタンを押すとアクティビティを終了するという、全く実用性のないツールバーを学ぶためだけに実装したアプリ。

実装

念のためbuild.gradleの内容も載せておく

build.gradle

build.gradle
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.2"

    defaultConfig {
        applicationId "com.android.toolbarkotlin"
        minSdkVersion 18
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

}

activity_toolbar_sample.xml

activity_toolbar_sample.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!-- ツールバーをセット （androidx） -->
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        app:title="ツールバーサンプル"
        android:background="@color/colorAccent"
        app:layout_constraintTop_toTopOf="parent "
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ツールバーサンプルだよ"
        app:layout_constraintTop_toTopOf="parent "
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

AndroidManifest.xml

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.android.toolbarkotlin">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar"> <!-- この表示でActionbarを非表示にする -->
        <activity android:name=".ToolbarSampleActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

つまずいた部分

android:theme="@style/Theme.AppCompat.Light.NoActionBar"この記述がないとツールバーをセットしたときにエラーがでる。

エラー文
java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. 
Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.

ToolbarSampleActivity.kt

ToolbarSampleActivity.kt
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import androidx.appcompat.widget.Toolbar // ※このimport文に注意が必要

class ToolbarSampleActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_toolbar_sample)

        // activity_toolbar_sample.xml からToolbar要素を取得
        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        // アクションバーにツールバーをセット
        setSupportActionBar(toolbar)
        // ツールバーに戻るボタンを設置
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
    }

    // ツールバーのアイテムを押した時の処理を記述（今回は戻るボタンのみのため、戻るボタンを押した時の処理しか記述していない）
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // android.R.id.home に戻るボタンを押した時のidが取得できる
        if (item.itemId == android.R.id.home) {
            // 今回はActivityを終了させている
            finish()
        }
        return super.onOptionsItemSelected(item)
    }
}

つまずいた部分

ToolbarSampleActivity.java
// ここでエラーになった ClassCastException
val toolbar = findViewById<Toolbar>(R.id.toolbar)

import android.widget.Toolbarこの記述がandroidxのサポートではなかったためエラーになった。
なぜClassCastException！？、と原因がわからずだいぶ時間を消耗してしまいました。

エラー文
java.lang.ClassCastException: androidx.appcompat.widget.Toolbar cannot be cast to android.widget.Toolbar

「androidx.appcompat.widget.Toolbarをandroid.widget.Toolbarにキャストできません。」と言われている。
型が厳密には異なるようで出ていたエラー。

ToolbarSampleActivity.kt
import android.widget.Toolbar // この記述を削除

import androidx.appcompat.widget.Toolbar // この記述を追加

上記のように記述を修正して解決！

参考文献

非常に参考にさせていただきました！ありがとうございました！

https://qiita.com/orimomo/items/c710ce4c5c3d2553ef07
https://qiita.com/Galaxy/items/fb1f98532312a5b3b2fa

最後に

誤りご指摘ありましたら、コメントいただければ幸いです！！
今後も学習アウトプット継続していきます！