Sometimes we have to give two or more (but limited) views in tabbed layout in android. For those it seems like a lot of work to create an new class FragmentPagerAdapter and attach it with the TabLayout. Here is a simple way you can take when you have less suppose 2 or 3 tabs and the tabs show entirely different data. In my case I have implemented a tabbed layout for Sign In and Sign Up.
So you simply have to create an activity in which you want the tabbed layout. But first lets create its XML. We will call it main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:animateLayoutChanges="true" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" android:background="@color/primary_color" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <LinearLayout android:layout_width="match_parent" android:orientation="vertical" android:background="#fff" android:layout_height="wrap_content"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" app:tabTextColor="@color/black" app:tabIndicatorColor="@color/accent_color" app:tabSelectedTextColor="@color/accent_color" app:tabGravity="fill" android:layout_height="wrap_content"/> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout> |
And now our activity i.e Mainactivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
public class MainActivity extends AppCompatActivity { ViewPager pager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); pager = (ViewPager) findViewById(R.id.view_pager); TabLayout layout= (TabLayout) findViewById(R.id.tablayout); layout.addTab(layout.newTab().setText("SIGN IN")); layout.addTab(layout.newTab().setText("SIGN UP")); pager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { if(position==0){ return new SignInFragment(); }else{ return new SignUpFragment(); } } @Override public int getCount() { return 2; } }); pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(layout)); layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { pager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } } |
As you can see we have attached ViewPager.addOnPageChangeListener and TabLayout.addOnTabSelectedListener with each other. So that if you scroll ViewPager, tabs will change automatically and vice verses.
Now just create your fragments and you are ready to move ahead.