I try to switch pages using custom controls.

I read this tutorial: composite controls

now I use a Cardview and LinearLayout to put the button in it, but I can"t do it.
so I followed this tutorial:
put the code to dynamically add page fragments in the MainActivity.java file,
put the initialization ImageButtons in the MainNavigationView.java file, and
made an ImageButton in the MainNavigationView.java file just like in the tutorial. Is this the wrong logical position for
?

I also searched for some questions about LinerLayout and Button not responding:
trying to set LinerLayout or ImageButton to clickable true/false :

Android LinearLayout nested button snooping onClickListener event of LinearLayout

this is my code: MainNavigationView.xml:

 <android.support.v7.widget.CardView
    android:id="@+id/mainNavigationView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="500dp"
    android:layout_marginBottom="10dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp"
        >

        <!--ImageView 
        //i was tring to make the left and right button background other colours.
            android:id="@+id/ex1Bg"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/MainWhiteColor"-->

        <com.felixxiong.android.example.MainNavigationItem
            android:id="@+id/ex1Button"
            style="@style/MainButtonStyle"
            android:contentDescription="@string/Tapped_Settings"
            android:src="@drawable/ex1_btn_selector" />

        <!--/ImageView-->

        <View
            style="@style/viewStyle"/>

        <com.felixxiong.android.example.MainNavigationItem
            android:id="@+id/ex2Button"
            style="@style/MainButtonStyle"
            android:contentDescription="@string/Tapped_NowRoute"
            android:src="@drawable/ex2_btn_selector" />

     <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp"
        >

        <!--ImageView 
        
            android:id="@+id/ex3Bg"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/MainWhiteColor"-->

        <com.felixxiong.android.example.MainNavigationItem
            android:id="@+id/ex3Button"
            style="@style/MainButtonStyle"
            android:contentDescription="@string/Tapped_Settings"
            android:src="@drawable/ex3_btn_selector" />

        <!--/ImageView-->

this is my code: MainActivity.java:

...
        initValue();
        ChangeViewPager(); }
        
        private void initValue() { 
        
            fragments = new ArrayList<>();         
            fragments.add(new oneFragment());
            fragments.add(new twoFragment());
            fragments.add(new threeFragment());
           
        mainFragmentPagerAdapter = new MainFragmentPagerAdapter(getSupportFragmentManager(), fragments);
        mViewPager.setAdapter(mainFragmentPagerAdapter); 
        mViewPager.setCurrentItem(1); //try to set "two fragment" in default }
        
        public void ChangeViewPager() {
        
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
               ...
        }

this is my code: MainNavigationView.java:

   

 public class MainNavigationView extends RelativeLayout {

    private MainFragmentPagerAdapter mainFragmentPagerAdapter;
    private List<Fragment> fragments;
    private ViewPager mViewPager;

    private MainNavigationView mMainNavigationView;

    private MainNavigationItem ex1Button;
    private MainNavigationItem ex2Button;
    private MainNavigationItem ex3Button;

    public MainNavigationView(Context context) {
    super(context);
}

    public MainNavigationView(Context context, AttributeSet attrs) {
    super(context, attrs);
   LayoutInflater layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    layoutInflater.inflate(R.layout.main_navigation_view, this);

    initWidget();

}

    private void initWidget() {

    mCardView = (CardView) findViewById(R.id.mainCardView);

   ex1Button = (MainNavigationItem) findViewById(R.id.settingsButton);
   ex2Button = (MainNavigationItem) findViewById(R.id.nowRouteButton);
   ex3Button = (MainNavigationItem) findViewById(R.id.planButton);

    ex1Button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mViewPager.setCurrentItem(0);
        }
    });

    ex2Button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mViewPager.setCurrentItem(1);
        }
    });

    ex3Button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mViewPager.setCurrentItem(2);
        }
    });

    mViewPager.setOffscreenPageLimit(3); 

    }

   public MenuItem getId(int position) {
    return null;
    }
  }

Thank you ~