How to implement Material Design Tab Layout
Android Material Design Tab Layout without toolbar looks like the following.
You can implement the Tab Layout in android by using the following steps.
Step 1 : Add the design dependency in the project
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0'
}After adding the dependency, synchronize your project so that gradle downloads and add the dependency.
Step 2 : Layout Structure for the activity
Your activity structure should be like following.--CoordinatorLayout
----AppBarLayout
------TabLayout
----ViewPager
Now let's understand why we need to follow this hierarchy to create the tab layout.
- CoordinatorLayout provides an additional layer of control over the touch events between child views. It is actually a super powered FrameLayout. So we will wrap all our layout inside the Coordinator layout.
- AppBar Layout is used to wrap the TabLayout inside it. It will wrap the Tabs text/heading and will always be a part of the app bar. This allows the tabs to be always visible at the top on vertical scrolling down. If we do not wrap the Tab Layout inside AppBarLayout then we will need to place and adjust its position manually when the pager will scroll vertically.
- TabLayout this layout is the one that will display the tab/pager header/text. If this layout is not added, then the tab headers will not be displayed but the tabs can be still switched by swiping left and right.
- ViewPager this layout is actual implementation of the pages/tabs that can be swiped left and right. It should contain fragment layouts that need to displayed on each tab.
So your main layout should look like the following
<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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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"/>
</android.support.design.widget.AppBarLayout>
<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" />
</android.support.design.widget.CoordinatorLayout>
Points to note here is
- app:tabMode="fixed" - it is used when the number of tabs to be displayed can be shown in screen. (fits the screen and scroll is not needed to display all tabs)
- app:tabGravity="fill" - it is used to fill the parent width with the tabs. the tabs will be utilize the width of the parent and will be of same width.
Other mode are
- app:tabMode="scroll" if the number of tabs do not fit the screen size.
- app:tabGravity="center" if the tabs are to be displayed in the center and does not fill the parent width.
Step 3 : Creating a ViewPagerAdapter to setup ViewPager
package com.ekiras.tab.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;
/**
* @author ekansh
*/
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList = new ArrayList<Fragment>();
private final List<String> titles = new ArrayList<String>();
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
public void addFragment(Fragment fragment, String title){
fragmentList.add(fragment);
titles.add(title);
}
}
Step 4 : Making Fragments to be displayed in ViewPager
For demo purpose we have create two fragments- FragOne
- FragTwo
package com.ekiras.tab.fragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.ekiras.tab.R;
/**
* @author ekansh
*/
public class FragOne extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one,container,false);
return view;
}
}
package com.ekiras.tab.fragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.ekiras.tab.R;
/**
* @author ekansh
*/
public class FragTwo extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_two,container,false);
return view;
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Fragment One"
android:textSize="40dp"
android:textStyle="bold"
/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Fragment Two"
android:textSize="40dp"
android:textStyle="bold"
/>
</LinearLayout>
Step 5 : Putting everything together in Activity
package com.ekiras.tab;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.ekiras.tab.adapter.ViewPagerAdapter;
import com.ekiras.tab.fragment.FragOne;
import com.ekiras.tab.fragment.FragTwo;
/**
* @author ekansh
*
* */
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
public void setupViewPager(ViewPager viewPager){
ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
pagerAdapter.addFragment(new FragOne(),"Frag One");
pagerAdapter.addFragment(new FragTwo(),"Frag Two");
viewPager.setAdapter(pagerAdapter);
}
}
In the above activity we have done the following
- Created a ViewPager adapter to hold the fragments in view pager, these will be used as tabs.
- Created a Tab layout to set the view pager heading and controls.
Comments
Post a Comment