How to make an app with material design tablayout example

Please follow and like us:

material design android tablayout example tutorial

Now material tablayout example like google playstore and whatsapp is easy to create using new android design support library.

Android TabLayout example provides new two types of tabs  “fixed tabs” where width is divided equally between all the tabs and another one is “Scrollable tabs” where tabs are not in fixed size and scroll horizontally.

How to make an app with material design tablayout example

 

For our previous sections  of “Android Design Support Library Tutorial” series, check below links. For overview of the series, refer to the “Design Support Library Intro“.

 

Section 1: Navigation View


Section 2: Floating labels for editing text


Section 3: Floating Action Button

Let’s start, making tablayout example with android design support library.

Add Android design support library dependency for tablayout example

Add a below line to include design support library in dependencies of build.gradle file:

compile 'com.android.support:design:22.2.1'

Step 1: Add ToolBar

add toolbar in app_bar.xml file of layout folder for tablayout example

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    app:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|enterAlways">
 
</android.support.v7.widget.Toolbar>

Step 2: Add ViewPager and Android TabLayout

add viewpager and tablayout in activity_main.xml file of layout folder

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
 
    android:orientation="vertical">
 
    <include layout="@layout/app_bar"/>
 
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primaryColor"
        app:tabGravity="fill"
        app:tabIndicatorColor="#FF5722"
        app:tabIndicatorHeight="4dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#FF5722"
        app:tabTextColor="#fff"/>
 
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
 
</LinearLayout>

Step 3: create tab layout for Android TabLayout

Add simple textview in fragment_sample.xml file of layout folder for making single tab layout.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context="nkdroid.tutorial.tablayout.SampleFragment">
 
    <TextView
        android:id="@+id/tabText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="First Fragment " />
 
</FrameLayout>

Step 4: Implement Android TabLayout with ViewPager

implement material android tablayout example logic using FragmentStatePagerAdapter in MainActivity.java file

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabPagerAdapter tabPagerAdapter;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setToolbar();
        mViewPager= (ViewPager) findViewById(R.id.pager);
        mTabLayout= (TabLayout) findViewById(R.id.tab_layout);
        tabPagerAdapter=new TabPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(tabPagerAdapter);
        mTabLayout.setTabsFromPagerAdapter(tabPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
    }

    private void setToolbar() {
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        if (toolbar != null) {
            setSupportActionBar(toolbar);
        }
    }

    class TabPagerAdapter extends FragmentStatePagerAdapter {

        public TabPagerAdapter(FragmentManager fm){
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {

            SampleFragment sampleFragment=SampleFragment.newInstance((++position)+"");
            return sampleFragment;
        }

        @Override
        public int getCount() {
            return 4;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Tab "+(++position) ;
        }
    }
}

Step 5: Create Tab view in separate Fragment for Android TabLayout

create fragment SampleFragment.java file for single android tablayout example view.

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class SampleFragment extends Fragment {

    private static final String ARG_PARAM1 = "param1";

    private String mParam1;

    private TextView tabText;

    public SampleFragment() {
        // Required empty public constructor
    }

    public static SampleFragment newInstance(String param1) {
        SampleFragment fragment = new SampleFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);

        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);

        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View convertView=inflater.inflate(R.layout.fragment_sample, container, false);
        tabText= (TextView) convertView.findViewById(R.id.tabText);
        tabText.setText("Tab Layout No "+mParam1);
        return convertView;
    }

}

Android TabLayout Example Video

 

Conclusion

With the help of TabLayout, we can easily make Material Tabs like Play Store and Whatsapp have. Hope you like our simple example of Android Material Tabs using Android Material Design Support Library.

Happy Coding 🙂

 

nirav kalola