title: Use Tab layout in MVVM architecture with the data binding library
body: <p>I am developing an app that has a tab layout as the image.</p>
  
  <p><a href="https://i.stack.imgur.com/cc33c.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cc33c.jpg" alt="enter image description here"></a></p>
  
  <p>I’d like to use MVVM architecture with data binding library but I am new with this framework.</p>
  
  <p>I can do this without using MVVM by normally setup tab layout using ViewPager as this sample.</p>
  
  <p><strong>Normal tab layout without MVVM and data binding:</strong></p>
  
  <p>activity_main.xml:</p>
  
  <pre class="lang-xml prettyprint-override"><code>    &lt;android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;android.support.design.widget.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"&gt;
  
          &lt;android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              android:background="?attr/colorPrimary"
              app:layout_scrollFlags="scroll|enterAlways"
              app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /&gt;
  
          &lt;android.support.design.widget.TabLayout
              android:id="@+id/tabs"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              app:tabMode="fixed"
              app:tabGravity="fill"/&gt;
      &lt;/android.support.design.widget.AppBarLayout&gt;
  
      &lt;android.support.v4.view.ViewPager
          android:id="@+id/viewpager"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_behavior="@string/appbar_scrolling_view_behavior"  /&gt;
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>MainActivity.java:</p>
  
  <pre class="lang-java prettyprint-override"><code>    public class MainActivity extends AppCompatActivity {
  
      private Toolbar toolbar;
      private TabLayout tabLayout;
      private ViewPager viewPager;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          toolbar = (Toolbar) findViewById(R.id.toolbar);
          setSupportActionBar(toolbar);
  
          getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  
          viewPager = (ViewPager) findViewById(R.id.viewpager);
          setupViewPager(viewPager);
  
          tabLayout = (TabLayout) findViewById(R.id.tabs);
          tabLayout.setupWithViewPager(viewPager);
      }
  
      private void setupViewPager(ViewPager viewPager) {
          ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
          adapter.addFragment(new OneFragment(), "ONE");
          adapter.addFragment(new TwoFragment(), "TWO");
          adapter.addFragment(new ThreeFragment(), "THREE");
          viewPager.setAdapter(adapter);
      }
  
      class ViewPagerAdapter extends FragmentPagerAdapter {
          private final List&lt;Fragment&gt; mFragmentList = new ArrayList&lt;&gt;();
          private final List&lt;String&gt; mFragmentTitleList = new ArrayList&lt;&gt;();
  
          public ViewPagerAdapter(FragmentManager manager) {
              super(manager);
          }
  
          @Override
          public Fragment getItem(int position) {
              return mFragmentList.get(position);
          }
  
          @Override
          public int getCount() {
              return mFragmentList.size();
          }
  
          public void addFragment(Fragment fragment, String title) {
              mFragmentList.add(fragment);
              mFragmentTitleList.add(title);
          }
  
          @Override
          public CharSequence getPageTitle(int position) {
              return mFragmentTitleList.get(position);
          }
      }
  }
  </code></pre>
  
  <p><strong>Tab layout in MVVM:</strong></p>
  
  <p>When using MVVM with data binding library, we will have to use a view model for the tab layout view.</p>
  
  <p>And I don’t know how to setup tab layout in the XML and also in the view model. How to handle events such as “tap on one tab of the layout” using data binding library</p>
  
  <p>Is there any sample of using Tab layout in MVVM with data binding library?</p>
  
  <p>Thanks for your help.</p>