インポート文「kotlinx～」が赤い表示でエラーっぽいのですが、何が原因でしょうか？

前提・実現したいこと

AndroidStudioでKotlinの勉強を始めたばかりの初心者です。
本を一冊買って、さあ、はじめようか、
というところなのですが。

本には

import kotlinx.android.synthetic.main.activity_main.*
をインポート

とだけ記述されているので、
よくわからないまま、ネットで調べて、そのままコピペしたところ
明らかにエラーっぽい感じで赤くなっています。

おそらくそれが原因だと思いますが
その下にコードを書いても
エラーっぽく赤くなっています。

該当のソースコード

kotlin
1import androidx.appcompat.app.AppCompatActivity
2import android.os.Bundle
3import kotlinx.android.synthetic.main.activity_main.*
4
5class MainActivity : AppCompatActivity() {
6    override fun onCreate(savedInstanceState: Bundle?) {
7        super.onCreate(savedInstanceState)
8        setContentView(R.layout.activity_main)
9
10        button.setOnClickListener{
11            textView.text = "こんにちは"
12        }
13    }
14}

xml
1<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
2    xmlns:app="http://schemas.android.com/apk/res-auto"
3    xmlns:tools="http://schemas.android.com/tools"
4    android:layout_width="match_parent"
5    android:layout_height="match_parent"
6    tools:context=".MainActivity">
7
8    <TextView
9        android:id="@+id/textView"
10        android:layout_width="wrap_content"
11        android:layout_height="wrap_content"
12        android:text="Hello World!"
13        app:layout_constraintBottom_toBottomOf="parent"
14        app:layout_constraintLeft_toLeftOf="parent"
15        app:layout_constraintRight_toRightOf="parent"
16        app:layout_constraintTop_toTopOf="parent" />
17
18    <Button
19        android:id="@+id/button"
20        android:layout_width="wrap_content"
21        android:layout_height="wrap_content"
22        android:text="Button"
23        app:layout_constraintEnd_toEndOf="parent"
24        app:layout_constraintStart_toStartOf="parent"
25        app:layout_constraintTop_toBottomOf="@+id/textView" />
26
27</androidx.constraintlayout.widget.ConstraintLayout>

試したこと

import kotlinx.android.synthetic.main.activity_main.*
をごっそり削除して
ネットで調べて見よう見まねで
var tv:TextView = findViewById(R.id.textView)
var btn:Button = findViewById(R.id.button)

    btn.setOnClickListener{
        tv.text = "こんにちは"
    }

これだと上手くいきました。
これはこれでいいとは思うのですが
テキストに記載されているコードとは違うので、どうも腑に落ちない。

補足情報（FW/ツールのバージョンなど）

AndroidStudio4.1.3

行動規範の内容に同意します

回答1件

ベストアンサー

それは synthetic import という機能でしたが、残念ながら最近廃止になってしまいました。
すでに対応されているように findViewById するか、view binding をお使いください。
参考: Kotlin Android Extensions syntheticsのdeprecatedに伴う対応 - Qiita

view binding の使い方ですが、まず app/build.gradle の android { 〜 } の中に次を追加します。

android {
    // 追加
    viewBinding {
        enabled = true
    }
}

あとは次のようにソースを修正。

import 文を変更。ActivityMainBinding は activity_main.xml から自動生成されます。
lateinit なプロパティを追加、onCreate で初期化して binding.root を setContentView する。
layout xml の中で android:id を指定したものは binding.指定したid で参照できる。

diff
1 import androidx.appcompat.app.AppCompatActivity
2 import android.os.Bundle
3-import kotlinx.android.synthetic.main.activity_main.*
4+import com.example.myapplication.databinding.ActivityMainBinding
5
6 class MainActivity : AppCompatActivity() {
7+    private lateinit var binding: ActivityMainBinding
8 
9     override fun onCreate(savedInstanceState: Bundle?) {
10         super.onCreate(savedInstanceState)
11-        setContentView(R.layout.activity_main)
12+        binding = ActivityMainBinding.inflate(layoutInflater)
13+        setContentView(binding.root)
14 
15-        button.setOnClickListener{
16-            textView.text = "こんにちは"
17+        binding.button.setOnClickListener{
18+            binding.textView.text = "こんにちは"
19         }
20     }
21 }