Android static TabLayout

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

<?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>

<?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>

And now our activity i.e Mainactivity.java

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) {
            }
        });
    }
}

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.

Aastha 14 December 2016

. . .

Android static TabLayout

Leave a Comment Cancel Reply

Message Sent!