Quick Contact


    Android TabLayout with FrameLayout

    We used TabLayout and ViewPager to generate sliding tabs on the previous page. We’re going to use TabLayout and FrameLayout to make non-sliding tabs.TabLayout items are implemented by using the Android Support Design Widget TabItem.

    We’ll learn how to use TabLayout with ViewPager in an app in this post. TabLayout displays tabs in a horizontal arrangement. Because fragments are lightweight and the app can have more functionality on a single screen if additional fragments are introduced, if TabLayout is utilised, Fragment is also used. When the user clicks on the tab, a transaction of one Fragment to another will occur. Swiping between tabs is done with ViewPager. WhatsApp, Facebook, and other social media platforms are excellent examples of TabLayout with ViewPager. This is an example of a TabLayout.

    Example of TabLayout using FrameLayout

    Let’s make a TabLayout example with FrameLayout and Fragment.

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

    < ?xml version="1.0" encoding="utf-8"?>

    < android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app=”http://schemas.android.com/apk/res-auto”

    xmlns:tools=”http://schemas.android.com/tools”

    android:layout_width=”match_parent”

    android:layout_height=”match_parent”

    tools:context=”tablayout.example.com.tablayoutwithframelayout.MainActivity”>

    < android.support.design.widget.TabLayout

    android:id=”@+id/tabLayout”

    android:layout_width=”match_parent”

    android:layout_height=”wrap_content”

    android:background=”#7367″>

    < android.support.design.widget.TabItem

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Home” />

    < android.support.design.widget.TabItem

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Java” />

    < android.support.design.widget.TabItem

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Android” />

    < android.support.design.widget.TabItem

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Php” />

    < /android.support.design.widget.TabLayout>

    < android.support.design.widget.TabItem

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Android” />

    < android.support.design.widget.TabItem

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Android” />

    < FrameLayout

    android:id=”@+id/frameLayout”

    android:layout_width=”match_parent”

    android:layout_height=”385dp”

    app:layout_constraintEnd_toEndOf=”parent”

    app:layout_constraintStart_toStartOf=”parent”

    app:layout_constraintTop_toBottomOf=”@+id/tabLayout”>

    < /FrameLayout>

    < /android.support.constraint.ConstraintLayout>

    MainActivity.java

    package tablayout.example.com.tablayoutwithframelayout;

    import android.support.design.widget.TabLayout;

    import android.support.v4.app.Fragment;

    import android.support.v4.app.FragmentManager;

    import android.support.v4.app.FragmentTransaction;

    import android.support.v7.app.AppCompatActivity;

    import android.os.Bundle;

    import android.widget.FrameLayout;

    	public class MainActivity extends AppCompatActivity {  
    	TabLayouttabLayout;  
    	FrameLayoutframeLayout;  
    	    Fragment fragment = null;  
    	FragmentManagerfragmentManager;  
    	FragmentTransactionfragmentTransaction;  
    	    @Override  
    	    protected void onCreate(Bundle savedInstanceState) {  
    	super.onCreate(savedInstanceState);  
    	setContentView(R.layout.activity_main);  
    
    	tabLayout=(TabLayout)findViewById(R.id.tabLayout);  
    	frameLayout=(FrameLayout)findViewById(R.id.frameLayout);  
    
    	        fragment = new HomeFragment();  
    	fragmentManager = getSupportFragmentManager();  
    	fragmentTransaction = fragmentManager.beginTransaction();  
    	fragmentTransaction.replace(R.id.frameLayout, fragment);  
    	        fragmentTransaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);  
    	fragmentTransaction.commit();  
    
    	tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {  
    	            @Override  
    	            public void onTabSelected(TabLayout.Tab tab) {  
    	               // Fragment fragment = null;  
    	                switch (tab.getPosition()) {  
    	                    case 0:  
    	                        fragment = new HomeFragment();  
    	                        break;  
    	                    case 1:  
    	                        fragment = new JavaFragment();  
    	                        break;  
    	                    case 2:  
    	                        fragment = new AndroidFragment();  
    	                        break;  
    	                    case 3:  
    	                        fragment = new PhpFragment();  
    	                        break;  
    	                }  
    	FragmentManagerfm = getSupportFragmentManager();  
    	FragmentTransaction ft = fm.beginTransaction();  
    	ft.replace(R.id.frameLayout, fragment);  
    	ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);  
    	ft.commit();  
    	            }  
    	        protected void onCreate(Bundle savedInstanceState) {  
    	super.onCreate(savedInstanceState);  
    	setContentView(R.layout.activity_main);  
    
    	tabLayout=(TabLayout)findViewById(R.id.tabLayout);  
    	frameLayout=(FrameLayout)findViewById(R.id.frameLayout);  
    
    	        fragment = new HomeFragment();  
    	fragmentManager = getSupportFragmentManager();  
    	fragmentTransaction = fragmentManager.beginTransaction();  
    	fragmentTransaction.replace(R.id.frameLayout, fragment);  
    	        fragmentTransaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);  
    	fragmentTransaction.commit(); 
    
    	            @Override  
    	            public void onTabUnselected(TabLayout.Tab tab) {  
    
    	            }  
    
    	            @Override  
    	            public void onTabReselected(TabLayout.Tab tab) {  
    
    	            }  
    	        });  
    
    	    }  
    	}
    	

    Enroll Yourself in Live Classes For AngularJS Tutorial.

    Create separate fragment files for each of the tabs now.

    HomeFragment.java

    package tablayout.example.com.tablayoutwithframelayout;

    import android.os.Bundle;

    import android.support.v4.app.Fragment;

    import android.view.LayoutInflater;

    import android.view.View;

    import android.view.ViewGroup;

    	public class HomeFragment extends Fragment {  
    
    	    public HomeFragment() {  
    	        // Required empty public constructor  
    	    }  
    
    	    @Override  
    	    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
    	                             Bundle savedInstanceState) {  
    	        return inflater.inflate(R.layout.fragment_home, container, false);  
    	    }  
    
    	}  
    	File: fragment_home.xml
    
    	< FrameLayoutxmlns: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="tablayout.example.com.tablayoutwithframelayout.HomeFragment">
    	< TextView
    	android:layout_width="match_parent"  
    	android:layout_height="match_parent"  
    	android:gravity="center"  
    	android:text="@string/home_fragment" />
    
    	< /FrameLayout>
    	File: JavaFragment.java
    	public class HomeFragment extends Fragment {  
    
    	    public HomeFragment() {  
    	        // Required empty public constructor  
    	    }  
    
    	    @Override  
    	    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
    	                             Bundle savedInstanceState) {  
    	        return inflater.inflate(R.layout.fragment_home, container, false);  
    	    }  
    
    	}  
    
    	package tablayout.example.com.tablayoutwithframelayout;  
    
    	import android.os.Bundle;  
    	import android.support.v4.app.Fragment;  
    	import android.view.LayoutInflater;  
    	import android.view.View;  
    	import android.view.ViewGroup;  
    
    	public class JavaFragment extends Fragment {  
    
    	    public JavaFragment() {  
    	        // Required empty public constructor  
    	    }  
    
    	    @Override  
    	    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
    	                             Bundle savedInstanceState) {  
    	        return inflater.inflate(R.layout.fragment_java, container, false);  
    	    }  
    
    	}  
    	File: fragment_java.xml
    	< FrameLayoutxmlns: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="tablayout.example.com.tablayoutwithframelayout.HomeFragment">
    
    	< TextView
    	android:layout_width="match_parent"  
    	android:layout_height="match_parent"  
    	android:gravity="center"  
    	android:text="@string/home_fragment" />
    
    	< /FrameLayout>
    
    	< FrameLayoutxmlns: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="tablayout.example.com.tablayoutwithframelayout.JavaFragment">
    
    	< TextView
    	android:layout_width="match_parent"  
    	android:layout_height="match_parent"  
    	android:gravity="center"  
    	android:text="@string/java_fragment" />
    
    	< /FrameLayout>
    	
    AndroidFragment.java

    package tablayout.com.tablayoutwithframelayout;

    import android.os.Bundle;

    import android.support.v4.app.Fragment;

    import android.view.LayoutInflater;

    import android.view.View;

    import android.view.ViewGroup;

    	public class AndroidFragment extends Fragment {  
    
    	    public AndroidFragment() {  
    
    	    }  
    
    	    @Override  
    	    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
    	                             Bundle savedInstanceState) {  
    	        // Inflate the layout for this fragment  
    	        return inflater.inflate(R.layout.fragment_android, container, false);  
    	    }    
    	}
    	
    fragment_android.xml

    < FrameLayoutxmlns: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=”tablayout.example.com.tablayoutwithframelayout.AndroidFragment”>

    < TextView

    android:layout_width=”match_parent”

    android:layout_height=”match_parent”

    android:gravity=”center”

    android:text=”@string/android_fragment” />

    < TextView

    android:layout_width=”close_parent”

    android:layout_height=”close_parent”

    android:gravity=”center align”

    android:text=”@string/android_fragment” />

    < /FrameLayout>

    PhpFragment.java

    package tablayout.example.com.tablayoutwithframelayout;

    import android.os.Bundle;

    import android.support.v4.app.Fragment;

    import android.view.LayoutInflater;

    import android.view.View;

    import android.view.ViewGroup;

    	public class PhpFragment extends Fragment {  
    
    	    public PhpFragment() {  
    	        //public constructor  
    	    }  
    
    	    @Override  
    	    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
    	                             Bundle savedInstanceState) {   
    	        return inflater.inflate(R.layout.fragment_php, container, false);  
    	    }  
    
    	}
    	
    fragment_php.xml

    < FrameLayoutxmlns: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=”tablayout.example.com.tablayoutwithframelayout.PhpFragment”>

    < TextView

    android:layout_width=”@_parent”

    android:layout_height=”@_parent”

    android:gravity=”center”

    android:text=”@string/php_fragment” />

    < TextView

    android:layout_width=”$_parent”

    android:layout_height=”$_parent”

    android:gravity=”center”

    android:text=”@string/php_fragment” />

    < TextView

    android:layout_width=”match_parent”

    android:layout_height=”match_parent”

    android:gravity=”center”

    android:text=”@string/php_fragment” />

    < /FrameLayout>

    strings.xml

    < resources>

    < string name="app_name">TabLayout with FrameLayout< /string>

    < string name="home_fragment">Home fragment< /string>

    < string name="java_fragment">Java fragment< /string>

    < string name="android_fragment">Android fragment< /string>

    < string name="php_fragment">Php fragment< /string>

    < /resources>

    Output: –
    Android TabLayout with FrameLayout

    Enroll Yourself in Live Classes For Android training in delhi.

    Copyright 1999- Ducat Creative, All rights reserved.