ボタンが機能するタブをつける(Empty Activity)

Question

前提

androidのタブレイアウトについて質問します。
タブをレイアウトして、そこにボタンを1つずつ配置しました。このボタン一つ一つにクリックイベントをつけたいと思っています。しかし、ボタンをクリックしたときにどこにクリックイベントを書けばいいのか分かりません。mainに書けないのは、タブでmainも切り替えたいためです。

実現したいこと

ボタンが機能するタブをつける

発生している問題・エラーメッセージ

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.Button.setOnClickListener(android.view.View$OnClickListener)' on a null object reference

該当のソースコード

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String[] hposition = {"てすと１","てすと２"};
        ViewPager2 pager = (ViewPager2)findViewById(R.id.pager);
        PageAdapter adapter = new PageAdapter(this);
        pager.setAdapter(adapter);
        TabLayout tabs = (TabLayout)findViewById(R.id.tab);
        new TabLayoutMediator(tabs, pager,
                (tab, position) -> tab.setText(hposition[position])
        ).attach();

//        Button button1 = findViewById(R.id.button1);
//        button1.setOnClickListener((View v) -> {
//            System.out.println("aaaa");
//        });
//        Button button2 = findViewById(R.id.button2);
//        button2.setOnClickListener((View v) -> {
//            System.out.println("aaaa");
//        });
    }
}

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class PageAdapter extends FragmentStateAdapter {
    //アカウント用のタブ

    public PageAdapter(MainActivity fragment) {
        super(fragment);
    }
    /**
     * 指定されたタブの位置(position) に対応するタブページ（Fragment）を作成する
     */
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        Fragment fragment = null;
        if (position == 0) {
            fragment = new TestPager();
        } else if (position == 1) {
            fragment = new Test1Pager();
        }
        return fragment;
    }
    /**
     * タブの数を返す
     */
    @Override
    public int getItemCount() {
        return 2;
    }
}

import androidx.fragment.app.Fragment;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TestPager extends Fragment {

    public TestPager() {
    }
    public static TestPager newInstance() {
        TestPager fragment = new TestPager();
        return fragment;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.activity_test_pager, container, false);
    }
}

import androidx.fragment.app.Fragment;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Test1Pager extends Fragment {

    public Test1Pager() {
    }
    public static Test1Pager newInstance() {
        Test1Pager fragment = new Test1Pager();
        return fragment;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.activity_test1_pager, container, false);
    }
}

<?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"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:layout_constraintBottom_toTopOf="@+id/tab"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:tabSelectedTextColor="@color/teal_200" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?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=".TestPager">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン１"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?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=".Test1Pager">

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン２"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

試したこと

ボタンを押したときにどこのactivityに行くのかを調べたけれど、どこにも入りませんでした。AppCompatActivityを継承しないとクリックイベントを追加できないと思うのでmain.javaしかないと思うのですが、そこに記述してしまうと、エラーが起こり、エラーを解消しても、メインのボタンが切り替えられなくなります。

Comments

[jimbe]

> AppCompatActivityを継承しないとクリックイベントを追加できないと思う

ボタンとアクティビティは全く関係ありません。
ボタンはフラグメントのレイアウトにあるのですから、ボタンの処理はフラグメントに書くしかありません。

フラグメントはアクティビティとは独立した部品として動作する為のもので、なるべく特定のアクティビティや他のフラグメントの存在を意識しないように設計するのが良いものです。
『リストのフラグメント』とその要素の『詳細を表示するフラグメント』があったとして、ListView 等のクリックのリスナーとして直接『詳細のフラグメント』の何かを書くのでは無く、リスナとして一旦『リストのフラグメント』磁針が受け取り、それを(フラグメントの唯一の入出力先として) ViewModel の LiveData に setValue します。『詳細のフラグメント』は予めそれを observe しておけばそのライブデータのリスナが(設定値をパラメータとして)呼び出されるので、処理としてその値を表示するようにしていれば、お互いがお互いの存在を知らなくても ViewModel が仲介して動作してくれます。

[syosinsya109]

回答ありがとうございます。初心者過ぎて仰っていることが難しくてよく分かりません。簡単なサンプルとかありますでしょうか。

[jimbe]

コメントに詰め込み過ぎました、すいません。質問のコードからサンプル作ってみます。

[syosinsya109]

ありがとうございます。すごく助かります

Answer 1

質問へのコメントにも書きましたが、ボタンとアクティビティは全く関係ありません。
ボタンはフラグメントのレイアウトにあるのですから、ボタンの処理はフラグメントに書くしかありませんし、そうなるためのフラグメントと言っても良いくらいです。
(ViewModel うんぬんはとりあえず無しにしました。)

質問自体とは関係ありませんが、クラス名や変数名等をテキトウにし過ぎです。
コードを理解する際に足がかりになるのは、動作に関係ない(間違っているかも知れない)コメントでは無く実際に動作するクラス名や変数名ですので、もう少し気を使われたほうが良いと思います。

MainActivity.java (PageAdapter クラスを内包)

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.*;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ViewPager2 pager = findViewById(R.id.pager); // "(ViewPager2)" とかは要りません
    TabLayout tabs = findViewById(R.id.tab);

    String[] hposition = {"てすと１","てすと２"};
    pager.setAdapter(new PageAdapter(this));
    new TabLayoutMediator(tabs, pager, (tab, position) -> tab.setText(hposition[position])).attach();
  }

  //MainActivity でしか使わず public でなければならない理由も無いので、なるべく範囲を狭くするため 内部 static クラスに.
  private static class PageAdapter extends FragmentStateAdapter {
    //super() のパラメータは "fragment" ではありませんし、 MainActivity である必要もありません.
    public PageAdapter(FragmentActivity activity) {
      super(activity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
      Fragment fragment = null;
      if (position == 0) {
        fragment = new Page1Fragment();
      } else if (position == 1) {
        fragment = new Page2Fragment();
      }
      return fragment;
    }

    @Override
    public int getItemCount() {
      return 2;
    }
  }
}

Page1Fragment.java ( 元 TestPager.java )
このクラスは (Pager では無く ) Fragment なので, クラス名を変更。
newInstance メソッドは、アダプタで直接 new しているので存在意味がありません。
onCreate や onCreateView は使わず、コンストラクタで super にレイアウトを渡し onViewCreated を使うのがお勧めです。 ( 今の Fragment#onCreateView はコンストラクタで指定したレイアウトを inflate して返すようになっています。)

Fragment#onCreateView()

デフォルトの View は、Fragmentコンストラクターを呼び出すことで返すことができます。それ以外の場合、このメソッドは null を返します。
このメソッドでレイアウトをインフレートするだけで、返されたビューで動作するロジックを onViewCreated に移動することをお勧めします。

(google 翻訳)

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.annotation.*;
import androidx.fragment.app.Fragment;

public class Page1Fragment extends Fragment {

  public Page1Fragment() {
    super(R.layout.fragment_page1);
  }

  @Override
  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    Button button1 = view.findViewById(R.id.button1);
    button1.setOnClickListener(v -> {
        System.out.println("aaaa");
    });
  }
}

Page2Fragment.java ( 元 Test1Pager.java )

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.annotation.*;
import androidx.fragment.app.Fragment;

public class Page2Fragment extends Fragment {
  public Page2Fragment() {
    super(R.layout.fragment_page2);
  }

  @Override
  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    Button button2 = view.findViewById(R.id.button2);
    button2.setOnClickListener(v -> {
      System.out.println("bbbb");
    });
  }
}

※ activity_main.xml は変更無しのため省略

fragment_page1.xml ( 元 activity_test_pager.xml)
アクティビティのレイアウトでも無いので、使うクラス名に合わせて変名。
(基本同じですが tools:context は変えています)

<?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=".Page1Fragment">

  <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="ボタン１"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

fragment_page2.xml ( 元 activity_test1_pager.xml)

<?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=".Page2Fragment">

  <Button
      android:id="@+id/button2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="ボタン２"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Comments

[syosinsya109]

ありがとうございます。無事に動きました。
もう一つ質問させてください。
savedInstanceStateやdbを使いたいとき、ボタンを押された時に画面遷移をしたいときは、Page1FragmentやPage2Fragmentでどのようにすればいいのでしょうか。mainactivityでした時と同様にしたらエラーが出てしまいます。

[jimbe]

> savedInstanceStateやdbを使いたいとき、ボタンを押された時に画面遷移をしたいときは、Page1FragmentやPage2Fragmentでどのようにすればいいのでしょうか

それは状況に依ることで、一概に簡単にこうだとは言えません。
「savedInstanceStateやdbを使いたいとき」とはどういうことなのか、「ボタンを押された時に画面遷移をしたいとき」とはどこへどう遷移したいのか(タブの移動? 別のアクティビティの起動? …)、そして最終的にどうなるつもりなのかまでを考えるような"大きな"話です。

>mainactivityでした時と同様にしたらエラー

フラグメントを使うということはアクティビティだけの時とは違ってくるのは当然です。
最初の内はトライ&エラーをすることになるでしょう。

ボタンを押したらそのフラグメントだけでは処理しきれないことを起こすのであれば、私なら質問へのコメントで書きましたように ViewModel を経由して処理なり通知なりを行うようにするでしょう。

[syosinsya109]

分かりました。
貴重なアドバイスありがとうございます!
挑戦してみてダメそうであれば再度質問しようと思います。