Android TabLayout with FrameLayout

In the previous page, we created a sliding tabs using TabLayout and ViewPager. Here, we are going to create non sliding tabs using TabLayout and FrameLayout.

Items of TabLayout are implemented by adding TabItem of android support design widget.

Example of TabLayout using FrameLayout

Let's create an example of TabLayout using FrameLayout and Fragment.

File: activity.xml

Create an activity.xml file with TabLayout and FrameLayout view components.

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     tools:context="tablayout.example.com.tablayoutwithframelayout.MainActivity">  
8.   
9.   
10.     <android.support.design.widget.TabLayout  
11.         android:id="@+id/tabLayout"  
12.         android:layout_width="match_parent"  
13.         android:layout_height="wrap_content"  
14.         android:background="#7367">  
15.   
16.         <android.support.design.widget.TabItem  
17.             android:layout_width="wrap_content"  
18.             android:layout_height="wrap_content"  
19.             android:text="Home" />  
20.   
21.         <android.support.design.widget.TabItem  
22.             android:layout_width="wrap_content"  
23.             android:layout_height="wrap_content"  
24.             android:text="Java" />  
25.   
26.         <android.support.design.widget.TabItem  
27.             android:layout_width="wrap_content"  
28.             android:layout_height="wrap_content"  
29.             android:text="Android" />  
30.   
31.         <android.support.design.widget.TabItem  
32.             android:layout_width="wrap_content"  
33.             android:layout_height="wrap_content"  
34.             android:text="Php" />  
35.     </android.support.design.widget.TabLayout>  
36.   
37.     <FrameLayout  
38.         android:id="@+id/frameLayout"  
39.         android:layout_width="match_parent"  
40.         android:layout_height="455dp"  
41.         app:layout_constraintEnd_toEndOf="parent"  
42.         app:layout_constraintStart_toStartOf="parent"  
43.         app:layout_constraintTop_toBottomOf="@+id/tabLayout">  
44.   
45.     </FrameLayout>  
46. </android.support.constraint.ConstraintLayout>  

File: build.gradle

Now gave the dependency library of TabLayout in build.gradle file.

1. implementation 'com.android.support:design:26.1.0'  

File: MainActivity.java

1. package tablayout.example.com.tablayoutwithframelayout;  
2.   
3. import android.support.design.widget.TabLayout;  
4. import android.support.v4.app.Fragment;  
5. import android.support.v4.app.FragmentManager;  
6. import android.support.v4.app.FragmentTransaction;  
7. import android.support.v7.app.AppCompatActivity;  
8. import android.os.Bundle;  
9. import android.widget.FrameLayout;  
10.   
11. public class MainActivity extends AppCompatActivity {  
12.     TabLayout tabLayout;  
13.     FrameLayout frameLayout;  
14.     Fragment fragment = null;  
15.     FragmentManager fragmentManager;  
16.     FragmentTransaction fragmentTransaction;  
17.     @Override  
18.     protected void onCreate(Bundle savedInstanceState) {  
19.         super.onCreate(savedInstanceState);  
20.         setContentView(R.layout.activity_main);  
21.   
22.         tabLayout=(TabLayout)findViewById(R.id.tabLayout);  
23.         frameLayout=(FrameLayout)findViewById(R.id.frameLayout);  
24.   
25.         fragment = new HomeFragment();  
26.         fragmentManager = getSupportFragmentManager();  
27.         fragmentTransaction = fragmentManager.beginTransaction();  
28.         fragmentTransaction.replace(R.id.frameLayout, fragment);  
29.         fragmentTransaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);  
30.         fragmentTransaction.commit();  
31.   
32.         tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {  
33.             @Override  
34.             public void onTabSelected(TabLayout.Tab tab) {  
35.                // Fragment fragment = null;  
36.                 switch (tab.getPosition()) {  
37.                     case 0:  
38.                         fragment = new HomeFragment();  
39.                         break;  
40.                     case 1:  
41.                         fragment = new JavaFragment();  
42.                         break;  
43.                     case 2:  
44.                         fragment = new AndroidFragment();  
45.                         break;  
46.                     case 3:  
47.                         fragment = new PhpFragment();  
48.                         break;  
49.                 }  
50.                 FragmentManager fm = getSupportFragmentManager();  
51.                 FragmentTransaction ft = fm.beginTransaction();  
52.                 ft.replace(R.id.frameLayout, fragment);  
53.                 ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);  
54.                 ft.commit();  
55.             }  
56.   
57.             @Override  
58.             public void onTabUnselected(TabLayout.Tab tab) {  
59.   
60.             }  
61.   
62.             @Override  
63.             public void onTabReselected(TabLayout.Tab tab) {  
64.   
65.             }  
66.         });  
67.   
68.     }  
69. }  

Now create different fragment files for all different tabs.

File: HomeFragment.java

1. package tablayout.example.com.tablayoutwithframelayout;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class HomeFragment extends Fragment {  
10.   
11.     public HomeFragment() {  
12.         // Required empty public constructor  
13.     }  
14.   
15.     @Override  
16.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
17.                              Bundle savedInstanceState) {  
18.         // Inflate the layout for this fragment  
19.         return inflater.inflate(R.layout.fragment_home, container, false);  
20.     }  
21.   
22. }  

File: fragment_home.xml

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="tablayout.example.com.tablayoutwithframelayout.HomeFragment">  
6.   
7.     <!-- TODO: Update blank fragment layout -->  
8.     <TextView  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:gravity="center"  
12.         android:text="@string/home_fragment" />  
13.   
14. </FrameLayout>  

File: JavaFragment.java

1. package tablayout.example.com.tablayoutwithframelayout;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class JavaFragment extends Fragment {  
10.   
11.     public JavaFragment() {  
12.         // Required empty public constructor  
13.     }  
14.   
15.     @Override  
16.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
17.                              Bundle savedInstanceState) {  
18.         // Inflate the layout for this fragment  
19.         return inflater.inflate(R.layout.fragment_java, container, false);  
20.     }  
21.   
22. }  

File: fragment_java.xml

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="tablayout.example.com.tablayoutwithframelayout.JavaFragment">  
6.   
7.     <!-- TODO: Update blank fragment layout -->  
8.     <TextView  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:gravity="center"  
12.         android:text="@string/java_fragment" />  
13.   
14. </FrameLayout>  

File: AndroidFragment.java

1. package tablayout.example.com.tablayoutwithframelayout;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class AndroidFragment extends Fragment {  
10.   
11.     public AndroidFragment() {  
12.         // Required empty public constructor  
13.     }  
14.   
15.     @Override  
16.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
17.                              Bundle savedInstanceState) {  
18.         // Inflate the layout for this fragment  
19.         return inflater.inflate(R.layout.fragment_android, container, false);  
20.     }  
21.   
22. }  

File: fragment_android.xml

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="tablayout.example.com.tablayoutwithframelayout.AndroidFragment">  
6.   
7.     <!-- TODO: Update blank fragment layout -->  
8.     <TextView  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:gravity="center"  
12.         android:text="@string/android_fragment" />  
13.   
14. </FrameLayout>  

File: PhpFragment.java

1. package tablayout.example.com.tablayoutwithframelayout;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class PhpFragment extends Fragment {  
10.   
11.     public PhpFragment() {  
12.         // Required empty public constructor  
13.     }  
14.   
15.     @Override  
16.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
17.                              Bundle savedInstanceState) {  
18.         // Inflate the layout for this fragment  
19.         return inflater.inflate(R.layout.fragment_php, container, false);  
20.     }  
21.   
22. }  

File: fragment_php.xml

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="tablayout.example.com.tablayoutwithframelayout.PhpFragment">  
6.   
7.     <!-- TODO: Update blank fragment layout -->  
8.     <TextView  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:gravity="center"  
12.         android:text="@string/php_fragment" />  
13.   
14. </FrameLayout>  

File: strings.xml

1. <resources>  
2.     <string name="app_name">TabLayout with FrameLayout</string>  
3.   
4.     <!-- TODO: Remove or change this placeholder text -->  
5.     <string name="home_fragment">Home fragment</string>  
6.     <string name="java_fragment">Java fragment</string>  
7.     <string name="android_fragment">Android fragment</string>  
8.     <string name="php_fragment">Php fragment</string>  
9. </resources>  

Output