How to Implement Dynamic TabLayout in Android?
Last Updated :
15 May, 2021
In this article, we will learn about how to add Dynamic TabLayout with ViewPager in an app. TabLayout provides a horizontal layout to display tabs. Here we will be just specifying the number of tabs we want to have. WhatsApp, Facebook, etc are a very good example of TabLayout with ViewPager. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add dependency
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
implementation ‘com.android.support:design:26.1.0’
In this project we are Creating these files:
- One Java file with the name DynamicFragmentAdapter
- One Fragment with the name DynamicFragment
- One Activity of name DynamicActivity
Step 3: Working with the DynamicFragmentAdapter.java file
Go to the DynamicFragmentAdapter.java file and refer to the following code.
// returnthe mNumOfTabs
@Override
public int getCount() {
return mNumOfTabs;
}
Below is the code for the DynamicFragmentAdapter.java file.
Java
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
public class DynamicFragmentAdapter extends FragmentStatePagerAdapter {
private int mNumOfTabs;
DynamicFragmentAdapter(FragmentManager fm, int NumOfTabs) {
super (fm);
this .mNumOfTabs = NumOfTabs;
}
@Override
public Fragment getItem( int position) {
Bundle b = new Bundle();
b.putInt( "position" , position);
Fragment frag = DynamicFragment.newInstance();
frag.setArguments(b);
return frag;
}
@Override
public int getCount() {
return mNumOfTabs;
}
}
|
Step 4: Working with the fragment_dynamic.xml file
Go to the fragment_dynamic.xml and refer to the following code. Below is the code for the fragment_dynamic.xml file
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:background = "@android:color/white" >
< TextView
android:id = "@+id/commonTextView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerInParent = "true"
android:text = "zxjhcvzxvchjzxbhj"
android:textColor = "@color/purple_500"
android:textStyle = "bold" />
</ RelativeLayout >
|
Step 5: Working with the DynamicFragment.java file
Go to the DynamicFragment.java file and refer to the following code.
// initialise the categories
private void initViews(View view) {
TextView textView=view.findViewById(R.id.commonTextView);
textView.setText(String.valueOf("Category : "+getArguments().getInt("position")));
}
Below is the code for the DynamicFragment.java file.
Java
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class DynamicFragment extends Fragment {
public static DynamicFragment newInstance() {
return new DynamicFragment();
}
@Override
public void onCreate( @Nullable Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_dynamic, container, false );
initViews(view);
return view;
}
private void initViews(View view) {
TextView textView = view.findViewById(R.id.commonTextView);
textView.setText(String.valueOf( "Category : " + getArguments().getInt( "position" )));
}
@Override
public void onActivityCreated( @Nullable Bundle savedInstanceState) {
super .onActivityCreated(savedInstanceState);
}
@Override
public void onAttach(Context context) {
super .onAttach(context);
}
@Override
public void onPause() {
super .onPause();
}
@Override
public void onResume() {
super .onResume();
}
@Override
public void onStop() {
super .onStop();
}
@Override
public void onDestroyView() {
super .onDestroyView();
}
@Override
public void onDestroy() {
super .onDestroy();
}
}
|
Step 6: Working with the activity_dynamic.xml file
Go to the activity_dynamic.xml file and refer to the following code. Below is the code for the activity_dynamic.xml file
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent" >
< com.google.android.material.appbar.AppBarLayout
android:id = "@+id/appbar"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:theme = "@style/ThemeOverlay.AppCompat.Dark.ActionBar" >
< com.google.android.material.tabs.TabLayout
android:id = "@+id/tabs"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
app:tabGravity = "fill"
app:tabIndicatorColor = "@android:color/white"
app:tabIndicatorHeight = "4dp"
app:tabMode = "scrollable"
app:tabTextColor = "@android:color/white" />
</ com.google.android.material.appbar.AppBarLayout >
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
app:layout_behavior = "@string/appbar_scrolling_view_behavior" >
< androidx.viewpager.widget.ViewPager
android:id = "@+id/viewpager"
android:layout_width = "match_parent"
android:layout_height = "match_parent" />
</ RelativeLayout >
</ androidx.coordinatorlayout.widget.CoordinatorLayout >
|
Step 7: Working with the DynamicActivity.java file
Go to the DynamicActivity.java file and refer to the following code.
// show all the tab using DynamicFragmnetAdapter
private void setDynamicFragmentToTabLayout() {
for (int i = 0; i < 10; i++) {
mTabLayout.addTab(mTabLayout.newTab().setText("Page: " + i));
}
DynamicFragmentAdapter mDynamicFragmentAdapter = new DynamicFragmentAdapter(getSupportFragmentManager(), mTabLayout.getTabCount());
viewPager.setAdapter(mDynamicFragmentAdapter);
viewPager.setCurrentItem(0);
}
Below is the code for the DynamicActivity.java file
Java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.tabs.TabLayout;
public class DynamicActivity extends AppCompatActivity {
private ViewPager viewPager;
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_dynamic);
initViews();
}
private void initViews() {
viewPager = findViewById(R.id.viewpager);
mTabLayout = findViewById(R.id.tabs);
viewPager.setOffscreenPageLimit( 5 );
viewPager.addOnPageChangeListener( new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.setOnTabSelectedListener( new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
setDynamicFragmentToTabLayout();
}
private void setDynamicFragmentToTabLayout() {
for ( int i = 0 ; i < 10 ; i++) {
mTabLayout.addTab(mTabLayout.newTab().setText( "Page: " + i));
}
DynamicFragmentAdapter mDynamicFragmentAdapter = new DynamicFragmentAdapter(getSupportFragmentManager(), mTabLayout.getTabCount());
viewPager.setAdapter(mDynamicFragmentAdapter);
viewPager.setCurrentItem( 0 );
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...