---
title: "Create a custom tab layout in android studio."
description: "Create a custom tab layout in android studio."
author: "Arti Mishra"
published: 2018-11-06
updated: 2023-07-02
canonical: https://www.mindstick.com/forum/34700/create-a-custom-tab-layout-in-android-studio
category: "android apps"
tags: ["android"]
reading_time: 5 minutes
---
# Create a custom tab layout in android studio.
Create a [Custom](https://www.mindstick.com/blog/12298/use-custom-writing-services-to-get-through-the-finals) tab [layout](https://www.mindstick.com/articles/12853/android-layout-and-its-type) in android.
## Replies
### Reply by Aryan Kumar
Sure. Here are the steps on how to create a custom tab layout in Android Studio:
1. Create a new project in Android Studio.
2. In the `activity_main.xml` file, add a `TabLayout` widget to the layout.
3. In the `MainActivity.java` file, create a `TabLayoutAdapter` class. This class will be responsible for providing the tab layout with the data that it needs to display.
4. In the `TabLayoutAdapter` class, create a `getTabCount()` method that returns the number of tabs that the tab layout should display.
5. In the `TabLayoutAdapter` class, create a `getTabView()` method that returns the view that should be displayed for each tab.
6. In the `MainActivity.java` file, set the `TabLayoutAdapter` class as the adapter for the tab layout.
7. In the `MainActivity.java` file, add a listener to the tab layout. This listener will be responsible for updating the app's UI when the user selects a different tab.
8. Run the app and test the custom tab layout.
Here is an example of the code that you can use to create a custom tab layout:
public class MainActivity extends AppCompatActivity {
Code snippet
```plaintext
private TabLayout tabLayout;
private TabLayoutAdapter tabLayoutAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initialize the tab layout
tabLayout = findViewById(R.id.tab_layout);
// Create the tab layout adapter
tabLayoutAdapter = new TabLayoutAdapter();
// Set the tab layout adapter
tabLayout.setAdapter(tabLayoutAdapter);
// Add a listener to the tab layout
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// Update the app's UI
// ...
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// Do nothing
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// Do nothing
}
});
}
private class TabLayoutAdapter extends PagerAdapter {
@Override
public int getCount() {
// Return the number of tabs
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
// Return the title of the tab at the specified position
switch (position) {
case 0:
return "Tab 1";
case 1:
return "Tab 2";
case 2:
return "Tab 3";
}
return null;
}
@Override
public View instantiateItem(ViewGroup container, int position) {
// Create the view for the tab at the specified position
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab_item, container, false);
// Set the text of the tab
TextView textView = view.findViewById(R.id.tab_text);
textView.setText(getPageTitle(position));
// Add the view to the container
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// Remove the view from the container
container.removeView((View) object);
}
}
}
```
This code will create a tab layout with three tabs. The title of each tab will be "Tab 1", "Tab 2", and "Tab 3". When the user selects a different tab, the app's UI will be updated accordingly.
### Reply by Arti Mishra
First, you need to create a layout file \
## Activity_main.xml
```
```
## \
**MainActivity.java**\
```
package com.example.msclient010.mindstickqna.Fragment;import android.graphics.Color;import android.os.Build;import android.os.Bundle;import android.support.annotation.RequiresApi;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import com.example.msclient010.mindstickqna.Adapter.QuestionPagerAdapter;import com.example.msclient010.mindstickqna.R;import com.example.msclient010.mindstickqna.Utils.SaveSharedPreference;import static com.facebook.FacebookSdk.getApplicationContext;public class RecentActivityFragment extends Fragment { View mView; ViewPager mViewPager; @RequiresApi(api = Build.VERSION_CODES.KITKAT) @Override public View onCreateView(final LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ if (savedInstanceState == null) { mView = inflater.inflate(R.layout.home_page_fragment, container, false); setupTabLayoutWithViewPager(mView); } return mView; } private void setupTabLayoutWithViewPager(View view) { mViewPager = (ViewPager) view.findViewById(R.id.view_pager); QuestionPagerAdapter adapter = new QuestionPagerAdapter(getFragmentManager(), getContext()); adapter.addFragment(new HomeFragment(), getString(R.string.home)); adapter.addFragment(new UnansweredFragment(), getString(R.string.unanswered)); //********* My code ************** if (SaveSharedPreference.getPrefUserId(getContext()) != null) { adapter.addFragment(new NotificationFragment(), getString(R.string.notification)); adapter.addFragment(new UserProfileFragment(), getString(R.string.profile)); } else { adapter.addFragment(new LoginRegisterFragment(), getString(R.string.login)); } /// ******************** mViewPager.setAdapter(adapter); TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout); tabLayout.setupWithViewPager(mViewPager); tabLayout.getTabAt(0).setIcon(R.drawable.ic_home_white_18dp); tabLayout.getTabAt(1).setIcon(R.drawable.ic_question_answer_white_18dp); if (SaveSharedPreference.getPrefUserId(getContext()) != null) { tabLayout.getTabAt(2).setIcon(R.drawable.ic_notifications_white_18dp); tabLayout.getTabAt(3).setIcon(R.drawable.ic_account_circle_white_18dp); } else { tabLayout.getTabAt(2).setIcon(R.drawable.login_white_icon); } }}
```
\
## QuestionPagerAdapter.java
```
package com.example.msclient010.mindstickqna.Adapter;import android.content.Context;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import java.util.ArrayList;import java.util.List;public class QuestionPagerAdapter extends FragmentStatePagerAdapter { private final List mFragmentList = new ArrayList<>(); private final List mFragmentTitleList = new ArrayList<>(); public QuestionPagerAdapter(FragmentManager fragmentManager, Context context){ super(fragmentManager); } @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); }}
```
\
## Output :
**\**
\
## "Thanks!!! for Reading"
---
Original Source: https://www.mindstick.com/forum/34700/create-a-custom-tab-layout-in-android-studio
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.