Tabs
Tabs make it easy to explore and switch between different views.
TabLayout
TabLayout provides a horizontal layout to display tabs.
ViewPager Integration
If you’re using a ViewPager together with this layout, you can call setupWithViewPager(ViewPager) to link the two together. This layout will be automatically populated from the PagerAdapter’s page titles.
Get GITHUB code from Here.
Creating New Project
1 .In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.
2 . Open build.gradle. Now add design support library com.android.support:design:26.1.0 and then sync the project.
Build.gradle
dependencies {
compile 'com.android.support:design:26.1.0'
}
3.Open styles.xml located under res ⇒ values and add below styles. The styles defined in this styles.xml are common to all the android versions.
styles.xml
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>
4.Under your main package create a fragment named MoviesFragment.java and add the below code.
MoviesFragment.java
package com.example.lenovo.tablayout.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.example.lenovo.tablayout.R; public class MoviesFragment extends Fragment{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_movies, container, false); } }
5.Open fragment_movies.xml located under res ⇒ layout and do the below changes.
fragment_movies.xml
<RelativeLayout 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:background="@android:color/holo_orange_light" tools:context="com.example.lenovo.tablayout.fragment.MoviesFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Movies" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout>
6.Similarly, again under your main package create a fragment named PlaysFragment.java,EventsFragment.java and add the below code.
Also,open fragment_plays.xml and fragment_events.xml located under res ⇒ layout and do the below changes.
PlaysFragment.java
package com.example.lenovo.tablayout.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.example.lenovo.tablayout.R; public class PlaysFragment extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_plays, container, false); } }
EventsFragment.java
package com.example.lenovo.tablayout.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.example.lenovo.tablayout.R; public class EventsFragment extends Fragment{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_events, container, false); } }
fragment_plays.xml
<RelativeLayout 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:background="@android:color/holo_blue_light" tools:context="com.example.lenovo.tablayout.fragment.PlaysFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Plays" android:textSize="40dp" android:textStyle="bold" /> </RelativeLayout>
fragment_events.xml
<RelativeLayout 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:background="@android:color/holo_green_light" tools:context="com.example.lenovo.tablayout.fragment.EventsFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Events" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout>
7.Open the layout file activity_tab.xml and add below layout code.
activity_tab.xml
<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.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" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed" /> </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>
xml attribute :
app:tabMode – Defines the mode of the tab layout. In our case the value should be “fixed”
Fixed Tabs
Fixed tabs should be used when you have a limited number of tabs. These tabs are fixed in position.
Scrollable Tabs
The scrollable tabs should be used when you have many number of tabs where there is insufficient space on the screen to fit all of them. To make the tabs scrollable, set app:tabMode=”scrollable” to TabLayout.
Center Aligned Tabs
If you want to keep your tabs horizontally centered, assign app:tabGravity=”center” to TabLayout.
Full Width Tabs
If you want the tabs to be occupied the fullwidth of the screen, you need to assign app:tabGravity=”fill” to our TabLayout.
8.Open TabsActivity.java and do the below changes.
setupWithViewPager() – Assigns the ViewPager to TabLayout.
setupViewPager() – Defines the number of tabs by setting appropriate fragment and tab name.
ViewPagerAdapter – Custom adapter class provides fragments required for the view pager.
TabsActivity.java
package com.example.lenovo.tablayout; 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.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import com.example.lenovo.tablayout.fragment.MoviesFragment; import com.example.lenovo.tablayout.fragment.EventsFragment; import com.example.lenovo.tablayout.fragment.PlaysFragment; import java.util.ArrayList; import java.util.List; public class TabsActivity extends AppCompatActivity { private Toolbar toolbar; private TabLayout tabLayout; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tabs); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar(); 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 MoviesFragment(), "MOVIES"); adapter.addFragment(new PlaysFragment(), "PLAYS"); adapter.addFragment(new EventsFragment(), "EVENTS"); viewPager.setAdapter(adapter); } class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>(); private final List<String> mFragmentTitleList = new ArrayList<>(); 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); } } }
Now run the app. You should able to see the tabs displayed with swipe functionality between the tabs.