【Android Studio】View Binding の使い方（Java & Kotlin対応）

この記事では findViewById を使わずに TextView や Button などにアクセスできるようになる View Binding（ビューバインディング）の使い方を紹介します。

findViewById メソッドを使う場合

[Java]    TextView textView = findViewById(R.id.textView);
[Kotlin]  val textView: TextView = findViewById(R.id.textView);

のように書きますが、無効な ID や間違った型を指定してしまうリスクがあります。

これを防ぐことが出来るのが View Binding です。

簡単に実装できてより安全なコードを書くことができるので、ぜひお試しください。

開発環境

プロジェクトについて

Sample という名前でプロジェクトを作成しています。

使用するファイル

activity_main.xml に TextView と Button を用意して、ボタンを押したら TextView の文字列を変更するコードを書いていきます。

View Binding の使い方

Step 1：View Binding を有効にする

Android Studio 画面左側のプロジェクト構造から Gradle Scripts → build.gradle.kts(Module :app) を開きます。
* Flamingo 以前の場合は build.gradle(Module :app) となっています。

11~13行目を追加します。

	plugins {
	/* 省略 */
	}
	android {
	namespace = "com.example.sample"
	compileSdk = 33
	/* 省略 */
	buildFeatures {
	viewBinding = true
	}
	}
	dependencies {

view raw build.gradle hosted with by GitHub

画面右上に表示される Sync Now をクリックします。

Step 2：レイアウトの用意

activity_main.xml を開いて TextView と Button を用意します。

11・19 行目のように id を付けることがポイントです。

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity"
	android:orientation="vertical"
	android:gravity="center">
	<TextView
	android:id="@+id/message"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World!"
	android:textSize="24sp"
	android:layout_marginBottom="40dp"/>
	<Button
	android:id="@+id/btn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Button" />
	</LinearLayout>

view raw activity_main.xml hosted with by GitHub

Step 3：ビューをセットする

Javaのコード

MainActivity.java を開いて、11・16・17行目のコードを追加・変更します。

	package jp.codeforfun.sample_java;
	import android.os.Bundle;
	import androidx.appcompat.app.AppCompatActivity;
	import jp.codeforfun.sample_java.databinding.ActivityMainBinding;
	public class MainActivity extends AppCompatActivity {
	private ActivityMainBinding binding;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	binding = ActivityMainBinding.inflate(getLayoutInflater());
	setContentView(binding.getRoot());
	}
	}

view raw MainActivity.java hosted with by GitHub

Kotlin のコード

MainActivity.kt を開いて、9・13・14行目のコードを追加・変更します。

	package com.example.sample
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import com.example.sample.databinding.ActivityMainBinding
	class MainActivity : AppCompatActivity() {
	private lateinit var binding: ActivityMainBinding
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	binding = ActivityMainBinding.inflate(layoutInflater)
	setContentView(binding.root)
	}
	}

view raw MainActivity.kt hosted with by GitHub

解説

バインディングクラス名は XML ファイル名をキャメル型にして Binding を付けます。

例えば

activity_main.xml → ActivityMain + Binding → ActivityMainBinding
user_login_view.xml → UserLoginView + Binding → UserLoginViewBinding

となります。

Step 4：ビューを参照する

Button をタップしたら TextView の文字列を変えるコードを書きます。

Java のコード

11〜16行目を追加します。

	public class MainActivity extends AppCompatActivity {
	private ActivityMainBinding binding;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	binding = ActivityMainBinding.inflate(getLayoutInflater());
	setContentView(binding.getRoot());
	binding.btn.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	binding.message.setText("こんにちは");
	}
	});
	}
	}

view raw MainActivity.java hosted with by GitHub

Kotlin のコード

10〜12行目を追加します。

	class MainActivity : AppCompatActivity() {
	private lateinit var binding: ActivityMainBinding
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	binding = ActivityMainBinding.inflate(layoutInflater)
	setContentView(binding.root)
	binding.btn.setOnClickListener {
	binding.message.text = "こんにちは"
	}
	}
	}

view raw MainActivity.kt hosted with by GitHub

解説

Button 要素の id 属性は “@+id/btn” としたので

binding.btn.

で参照することができます。
 

TextView 要素の id 属性は “@+id/message” としたので

binding.message.

となります。

完成

アプリを実行してコードが動くことを確認しましょう。

COMMENT

Subscribe

必ずお読みください！

投稿いただいたコメントは管理者の承認後に表示されます。

コードやエラーに関するご質問の場合は、以下の３点

1. 開発環境（OS / ブラウザ / MAMP 6.6 / Android Studio Chipmunk など）
2. エラーメッセージ
3. お試しになったこと

をできるだけ具体的に必ず書いてください。

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

お名前*

メールアドレス*

Label

{} [+]

お名前*

メールアドレス*

2 Comments

古い順

新しい順 人気順

Inline Feedbacks

View all comments

taka

1 year ago

ViewBindingの使用方法が大変、参考になりました。
androidのプログラム作成は初心者でして、画像から文字を認識するサンプルプログラムを他のサイトから入手して動作させたところ、build.gradle内の
viewBinding {enabled = true}
の部分が間違っていたらしく、こちらのサイトに記載されている
buildFeatures { viewBinding = true }
に修正したら動作するようになりました。
有難うございました。

0

返信

運営者

Sara

1 year ago

Reply to  taka

当サイトを見つけていただきありがとうございます。

問題解決できたとのこと良かったです！
ぜひ今後も当サイトをご活用いただければ幸いです。

1

返信

Sara

運営者

XYouTubeContact

書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！