Create a custom tab layout in android studio.

Arti Mishra 2395 06 Nov 2018

Create a Custom tab layout in android.

Ask by Arti Mishra

Updated 02 Jul 2023

2 Answers

Aryan Kumar 02 Jul 2023

Sure. Here are the steps on how to create a custom tab layout in Android Studio:

Create a new project in Android Studio.
In the activity_main.xml file, add a TabLayout widget to the layout.
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.
In the TabLayoutAdapter class, create a getTabCount() method that returns the number of tabs that the tab layout should display.
In the TabLayoutAdapter class, create a getTabView() method that returns the view that should be displayed for each tab.
In the MainActivity.java file, set the TabLayoutAdapter class as the adapter for the tab layout.
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.
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

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.

Arti Mishra 06 Nov 2018

First, you need to create a layout file

Activity_main.xml

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

<RelativeLayout xmlns: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">



    <android.support.v4.view.ViewPager

        android:layout_above="@id/tab_layout"

        android:id="@+id/view_pager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_behavior="@string/appbar_scrolling_view_behavior" />





    <android.support.design.widget.TabLayout

        app:tabTextAppearance="@style/MineCustomTabText"

        android:id="@+id/tab_layout"

        android:layout_alignParentBottom="true"

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:background="@color/colorPrimary"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>



</RelativeLayout>

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<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> 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"

forum

Create a custom tab layout in android studio.

Can you answer this question?

2 Answers