tab layout android
After the deprecation of ActionBar.TabListener (API level 21), the TabLayout is released by Android which is used to implement horizontal tabs. To implement tabs, the TabLayout is introduced in the design support library. The TabLayout class provides the newTab() method to create Tabs. The setText(int) and setIcon(int) methods of the TabListener interface are used to set the title and icon of Tabs. The addTab(Tab) method is used to attach the Tabs of the layout over the TabLayout.
Syntax:
TabLayout tabLayout = (TabLayout)findViewById(R.id.tabLayout); tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3")); |
Syntax: To add the tab items to TabLayout using TabItem of android design widget.
<android.support.design.widget.TabItem android:text="@string/tab_text"/> |
Example of TabLayout using ViewPager:
In the below example, we are demonstrating the use of the TabLayout using ViewPager and Fragment.
File: activity _main.xml:
<?xml version="1.0" encoding="utf-8"?> <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" tools:context="com.example.radioapp.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#1db995"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tabLayout" android:layout_centerInParent="true" android:layout_marginTop="100dp" tools:layout_editor_absoluteX="8dp" /> </RelativeLayout> |
File: fragment_home.xml:
<?xml version="1.0" encoding="utf-8"?> <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" tools:context=".Home"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:textAlignment="center" android:text="Home Fragment" android:textSize="16sp" android:textStyle="bold"/> </FrameLayout> File: AndroidManifest.xml:
|
